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

在上一篇文章部署明星关系图谱那些事儿（GitHub Pages） 的最后，古柳讲到了GitHub Pages不只能够用来搭我的博客，并且能单独部署静态网页（HTML/CSS/JS，而不涉及后端），鉴于自身在部署明星关系图谱时，查阅的几篇中文博客内容（可能没搜对关键词的缘故）都不太能解答我关于实操过程的困惑，最后还得感谢这篇简洁明了的英文文章：Use Github Static Pages to Host Your Front End Projects，助我成功部署，因此古柳也简单讲下实践步骤，但愿能帮到有须要的人，对GitHub和Git熟悉的朋友直接拉到Git命令处便可，或者看原文也行。

古柳一开始的困惑是，我已经用GitHub Pages搭建过我的博客，其对应的GitHub仓库是：DesertsX/desertsx.github.io，里面已经有master主分支；

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

等看了Use Github Static Pages to Host Your Front End Projects一文，发现代码清晰明了，因而就照着作了，采起的就是第二种方式。

下面就是实操步骤，默认你们对GitHub与Git有所了解，首先GitHub的帐号是必须的，注册登陆便可；接着建立一个新项目，点右上角+号处的New repository或者直接打开 github.com/new ；在Repository name处填写仓库名称，由于和后续网页展现的URL挂钩，建议取个可读性好点的名称，好比本次明星关系图谱的项目名叫yulequan-relations-graph，对应展现的网址就是 desertsx.github.io/yulequan-re…；最后点绿色按钮Create repository，一个空的仓库就建立成功（不带readme.md和.gitignore），后续只需将本地仓库的代码推送到此处便可。

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

本文不对Git作过多介绍，默认你们已经完成安装配置，没有的能够看看：Git 安装配置和Git 远程仓库(Github)；小白能够看这篇指南快速了解下：Git- 简明指南 - 助你入门 Git的简明指南，木有高深内容；想系统学习的能够看：Git 教程- 廖雪峰的官方网站；想快速查找命令的能够看：经常使用 Git 命令清单。

接下来先看看本项目的webapp/文件夹的目录结构，必须放在根目录下index.html，打开：https://desertsx.github.io/yulequan-relations-graph/渲染出来的页面就是index.html；static文件夹下分别是包含全部明星图片的images/star/文件夹，包含CSS和JS外部文件的lib/文件夹，以及符合本项目格式要求的ylq_star_relation_graph_v2.json数据。因为本次用到开源项目grapheco/InteractiveGraph，因此只须要关注想展现什么样的数据，如何爬取数据，并将通常的csv数据转换成json数据便可。

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复制代码

最后就是本文的重点，若是你对GitHub和Git很熟悉，上面琐碎的讲解彻底能够忽略，直接看这部分就行。注意下述命令均在项目所在的webapp文件夹下运行。快速查找命令可看：经常使用 Git 命令清单。

# 将该文件夹变成用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 git@github.com:DesertsX/yulequan-relations-graph.git
# 把本地的 gh-pages 分支推送到 origin 服务器上
git push origin gh-pages复制代码

刷新GitHub仓库：DesertsX/desertsx.github.io，本地仓库的文件提交成功后，GitHub仓库里就不是空的了，而后查看部署后的网页效果：desertsx.github.io/yulequan-re…，没问题后就大功告成了。

若是后续本地仓库里修改了什么文件，再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复制代码

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

最后欢迎关注“牛衣古柳”哈！