2019年06月18日阅读 82

一文教你使用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复制代码

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

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