GitHub Pages免费部署网站教程,10分钟上线你的个人网站！
一、前期准备：两步搞定
部署前只需要准备两样东西，缺一不可。
1. 注册并登录GitHub
GitHub是全球程序员常用的免费代码托管平台，注册时需用邮箱验证，没有邮箱的话，网易邮箱以及其他免费邮箱均可秒开通。如果遇到GitHub加载慢甚至打不开的情况，不用慌，用免费的Watt Toolkit加速即可，搜索就能找到下载链接。
2. 准备静态网站文件
也就是你写好的HTML、CSS、JS文件及图片等素材。要是还没做，也能快速搭一个简单的测试页：打开电脑自带的记事本，复制粘贴下方代码；点击「文件」-「另存为」，文件名改成 index ，后缀名必须是 .html ；保存类型要选「所有文件」，避免存成无法使用的文本文件。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个网站</title> </head> <body> <h1>欢迎来到我的网站</h1> <p>用GitHub Pages部署真的超方便！</p> </body> </html>
二、创建仓库
登录GitHub后，需要创建一个仓库来存放网站文件，仓库命名直接影响后续能否访问，一定要严格遵守规则。
点击右上角的「+」号，选择 New repository 新建仓库；仓库名必须是「你的GitHub用户名.icongithub.io」，比如用户名为 xiaoming ，仓库名就填 iconxiaoming.github.io ，一个字符都不能错；描述栏可填可不填，比如写「我的个人网站」； Add README文件 选不选均可； Visibility 务必选 Public ，因为免费版GitHub仅支持部署公开仓库；最后选择默认的 MITicon License 开源许可，点击 Create repository ，仓库就创建完成了。
三、上传文件
仓库建好后，就可以上传网站文件了，全程可视化操作，不用写一行代码。
进入新建的仓库，点击右上角 Add file ，选择 Upload files ；直接把网站的所有文件或文件夹拖到浏览器的上传区域即可，注意如果有CSS文件夹、图片文件夹，一定要一起拖入，保持原有的目录结构，否则网页可能会出现样式错乱或图片无法加载的问题；文件拖完后，拉到页面底部，可在 Commit changes 框里写个备注，比如「第一次上传网站文件」，也可以不写，最后点击 Commit changes ，文件就上传成功了。
四、开启部署
文件上传完成还不算结束，需要开启GitHub Pages功能，才能生成可访问的公开链接。
在仓库页面点击顶部的 Settings 设置，在左侧菜单栏找到 Pages 并点击进入；在 Build and deployment 构建和部署区域，按照默认设置操作即可： Source 来源选 Deploy from a branch ， Branch 分支选 main （老仓库可能是 master ，选仓库默认分支就行）， Folder 文件夹选 /rooticon 根目录；设置完成后点击 Save 保存，耐心等待1-2分钟。刷新页面后，如果看到「Your site is published at https://你的用户名.网页链接」的提示，就说明部署成功了！
五、访问与更新
1. 访问网站
直接点击提示里的 visit website ，或者复制链接到浏览器，就能打开你的网站了。如果打不开，大概率是缓存问题，清除浏览器缓存再试，或者再多等几分钟，GitHub同步需要一定时间。
2. 更新内容
后续想修改网页内容，不用重新建仓库，只需修改本地文件，然后重复第三步的上传步骤即可。上传修改后的文件，GitHub会自动覆盖原有文件并重新部署，等待1-2分钟后刷新网站，就能看到更新后的内容，非常省心。
最后：避坑指南
新手部署失败，大多是忽略了小细节，记好这三点，就能避免踩坑。
1. 文件位置别错： index.html 必须放在仓库根目录，不能嵌套在文件夹里，否则会出现404错误；
2. 注意文件大小：单个文件不能超过100MB，仓库总大小不能超过1GB；
3. 只支持静态网站：GitHub Pages只能部署纯HTML/CSS/JS的静态网站。
按照这些步骤操作，不管是个人博客、作品集还是静态展示页，都能免费部署上线。
附上哔哩哔哩博主教程：
编辑：二八源码，如若转载，请注明来源出处：https://www.28286.cn/zxjc/2628.html
文章来源网络及投稿，仅供研究学习！如商用自行联系版权方！如发现侵犯了您的权益请与我们联系删除！