使用 GitHub Pages 托管静态网站

2018-07-25

本文灵感的来源是我校 Web 相关课程作业提交的难题，学生提交的大量的 HTML 文件没有一个合适的托管方案，导致每到收作业的时候数以百计的压缩包丢过来对于教师而言是一个很大的难题，在需要为之打分的时候尤其如此，在我开发出相关平台前，还是推荐使用 GitHub 暂时做一个托管和展示的平台，虽然我知道：

对于防止大量压缩包的问题可以通过学生一个个当场答辩的方式解决
这么做可能会给 GitHub 带来很多垃圾代码

但是对于一些初学者而言，这么做可以在一个比较安全的环境下学习 Git，而对于老师而言，在绝大多数同学不会 Git 的情况下，会 Git 的同学也可以作为一个加分项嘛。

本文假设：

你希望通过 GitHub 托管你的静态页面
你有自己的域名（非必需）
在 2 的基础上你懂得一些基本的 DNS 的相关概念（非必需）

此外，由于受众【不是】熟悉 GitHub 的同学，所以可能看上去会比较啰嗦。

Prerequisites

网上有很多关于在 GitHub 上面托管的文章，但是看了一下很少有在 Github 切换 CDN 之后的文章，简单来讲，那次更新的部分如下：

GitHub Pages 原生自动为自定义域名申请 Let’s Encrypt 证书了，所以网上通过 CloudFlare 减速 CDN 给自己自定域名加 HTTPS 的方法就没有意义了，毕竟原生的速度更快还不存在 Half-baked SSL 的问题
GitHub Pages 不再使用 GitHub 自己的 IP，而是有 Fastly CDN 的 4 个 IP:185.199.108~111.153，网上关于将域名解析到某个 IP 的方式也已经没有价值了（不过好在这类文章少）

GitHub Stuff

GitHub 并不提供一个像 FTP 一样的 “静态空间”，而是提供一个个 Git 仓库，GitHub Pages 功能便是将仓库中的 HTML 文件提供对外访问的功能，和大多数的服务器默认配置一样 ** 默认首页是 index.html，默认 404 页面是 404.html**

首先我们创建一个仓库吧，公有私有都是可以的，名字随意，比如我已经创建了一个叫 cqjtu.online.landing 的仓库：

由于我这个是已经创建好了的，所以界面细节上可能有点不太一样，不过没有任何问题。

然后把我们的文件给 “传” 到 GitHub 上面去：

mkdir website # 在自己电脑上创建一个文件夹 （名字随意）
cd website
git init
git config user.name "<GitHub 用户名>"
git config user.email "<你登录 GitHub 的邮件地址>"
git remote add origin <GitHub 仓库的地址，比如我的就是 `https://github.com/n0vad3v/cqjtu.online.landing`>
# 此处将你的 HTML 文件放到这个文件夹中，方法不限
echo -n "<你的域名>" > CNAME # 如果你需要自己的域名的话需要这一步，否则可以省略
git add .
git commit -m "Update Website" # 在本地 Commit
git push origin master # 提交到 GitHub 上

接下来在上面的 Setting 中找到 GitHub Pages 那一栏，启用 GitHub Pages，默认使用的 master 分支，不过那暂时不重要，底下是否使用自己的域名视个人情况而定，如果你有自己的域名，可以写上 (** 注意，带 www 的和不带 www 的是两个东西哦，比如我写的是 cqjtu.online，那么一般来讲 www.cqjtu.online 就与这个无关了 **).

好了，GitHub 这边已经完成了，如果不需要自定义域名的话你就可以通过 <你的用户名>.github.io / 仓库名 访问了，什么？你不想要那 “/” 后面的部分？那把仓库改名为 <你的用户名>.github.io 吧。

DNS

如果你有域名并且希望用自己的域名的话，这一步也很简单，做一个对应的 CNAME 记录到 <你的用户名>.github.io 即可，举几个例子（我的用户名为 n0vad3v)：

假设上面写的是 cqjtu.online，那么做一个 @ 的 CNAME 记录到 n0vad3v.github.io，从 CloudFlare 面板中看上去如下：

假设上面写的是 www.cqjtu.online，那么做一个 www 的 CNAME 记录到 n0vad3v.github.io

Off-Topic

顺便澄清一些误区啊，GitHub 对于网站托管还是有一些限制的，首先它并不像网上说的是无限流量的：

而是：

GitHub Pages source repositories have a recommended limit of 1GB（仓库大小不建议超过 1G) . Published GitHub Pages sites may be no larger than 1 GB. GitHub Pages sites have a soft bandwidth limit of 100GB per month（每个月流量不超过 100G). GitHub Pages sites have a soft limit of 10 builds per hour（如果有自动构建的话，每小时不超过 10 次）.

虽然是 soft limit，偶尔超一下没什么问题，但是如果超得过分离谱或者你的站被 DDos 的话，还是可能收到来自 GitHub 的邮件，如果你有什么容量很大或者流量很大的网站需要托管的话，可以考虑邮件联系我，哈哈～

另外，GitHub Pages 可以作为一个 “免费的静态资源 CDN” 来用，比如你放一些 css,js 或者图片（别搞盗版权图片，会被 DMCA) 在上面在某些层面上可以用来加速，当然如果仅仅是这个需求的话，普通的 GitHub 仓库 + rawgit.com 似乎会更加便捷一些（就是被墙了而已…)

最后，合理使用 GitHub，Happy Hacking!

#Chinese #GitHub