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

6,703 阅读5分钟

在上一篇文章部署明星关系图谱那些事儿(GitHub Pages) 的最后,古柳讲到了GitHub Pages不仅可以用来搭个人博客,而且能单独部署静态网页(HTML/CSS/JS,而不涉及后端),鉴于自身在部署明星关系图谱时,查阅的几篇中文博客内容(可能没搜对关键词的缘故)都不太能解答我关于实操过程的困惑,最后还得感谢这篇简洁明了的英文文章:Use Github Static Pages to Host Your Front End Projects,助我成功部署,所以古柳也简单讲下实践步骤,希望能帮到有需要的人,对GitHubGit熟悉的朋友直接拉到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一文,发现代码清晰明了,于是就照着做了,采取的就是第二种方式。

下面就是实操步骤,默认大家对GitHubGit有所了解,首先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.htmlstatic文件夹下分别是包含所有明星图片的images/star/文件夹,包含CSSJS外部文件的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

最后就是本文的重点,如果你对GitHubGit很熟悉,上面琐碎的讲解完全可以忽略,直接看这部分就行。注意下述命令均在项目所在的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

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

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