一文教你使用GitHub Pages部署静态网页

而网上说部署网页项目时最好将代码文件提交到gh-pages分支，于是搞不清楚到底是在desertsx.github.io个人博客项目里新建gh-pages分支（我还真这么干过，逃），还是另外开个GitHub仓库，然后在里面的gh-pages分支里提交，对后者的困惑是这么做就同时存在两个蛮相关的项目仓库，怕出问题（后面发现其实也没有）。

接着切换到大家本地保存有前端项目代码的文件夹下，或是你自己写的，或是从GitHub某处上git clone下来的，又或者就是用的古柳的明星关系图谱来练手（其实不太推荐，因为项目里涉及小1.3k张图片约140Mb，下载和上传都可能耗些时间，考虑到这点，我可能会将项目打包压缩放到百度网盘里，虽然也不见得能快多少），然后进入Git命令行的模式，window用户安装Git后在文件夹里右键Git Bash Here即可。

webapp
├─ index.html
├─ show.png
├─ static
│    ├─ images
│    │    └─ star
│    ├─ lib
│    │    ├─ font-awesome-4.7.0
│    │    ├─ interactive-graph-0.1.0
│    │    └─ jquery-3.2.1
│    └─ ylq_star_relation_graph_v2.json

# 将该文件夹变成用git管理的本地仓库
git init
# 查看所有文件，多出 .git 文件
ls -al
# 新建后对项目进行介绍
touch README.md
# 新建后可以写入后续不想提交到GitHub上的文件
touch .gitignore

# 列出所有本地分支和远程分支，仓库默认在 master 分支
git branch -a
# 新建并切换到 gh-pages 分支
git checkout -b gh-pages
# 显示有变更的文件
git status
# 删除 master 分支
git branch -d master
# 添加当前目录的所有文件到暂存区
git add .
# 提交暂存区到仓库区，并添加代码提交信息
git commit -m 'first commit'

# 添加远程仓库
git remote add origin 
# 把本地的 gh-pages 分支推送到 origin 服务器上
git push origin gh-pages

如果后续本地仓库里修改了什么文件，再git add commit push三连即可。

git status
git add .
git commit -m '添加展示图片和README说明'
git push origin gh-pages

最后本地仓库的目录结构大致如此。

webapp
├─ .git
├─ .gitignore
├─ README.md
├─ index.html
├─ show.png
├─ static
│    ├─ images
│    │    └─ star
│    ├─ lib
│    │    ├─ font-awesome-4.7.0
│    │    ├─ interactive-graph-0.1.0
│    │    └─ jquery-3.2.1
│    └─ ylq_star_relation_graph_v2.json

以上就是全部内容，希望本文对想部署静态网页项目的人有用。