用 GitHub 和 CloudFlare 搭建你的个人 CDN

5,176 阅读2分钟

0. 需求来源

  1. 我想要向公众 serve 一个静态文件,例如 xtjj/xtjj.js at master · joyneop/xtjj · GitHub
  2. 静态文件的 MIME Type 必须是正确的,否则可能会导致一些比较新的浏览器禁止执行 JS 文件。
  3. 静态文件的 Access-Control-Allow-Origin 必须是 asterisk。
  4. 之前用 RawGit,但是 RawGit 的缓存太久,一天多之后还看不到更新。
  5. 不占用我自己的 VPS 的带宽和计算性能。
  6. 通过 HTTPS 提供。

1. 创建一个新的 GitHub Organization

为什么要创建新的 organization 呢?因为不想与自己的 person account 关系太大。特别是自己的 GitHub Pages 换域名会导致其他人的引用挂掉。我创建的 organization 名为 neopcdn。

2. 创建 http://username.github.io 仓库

创建一个名为 http://neopcdn.github.io 的仓库之后,在其根目录创建 CNAME 文件,内容为 http://cdn.neop.me。这会使得该 organization 拥有的仓库在不指定自己的 custom domain 时默认使用 http://cdn.neop.me

3. 创建对应仓库

例如我想让自己的 GitHub - joyneop/xtjj 这个仓库能够通过 cdn.neop.me 分发,那么就在 neopcdn organization 下创建同名仓库 xtjj。

然后要去设置里面将用于 GitHub Pages 的 branch 设置为 master。

4. Push 到相应的 remote

在本地设备,进入相应的目录,运行命令:

$ git remote add cdn https://joyneop@github.com/neopcdn/xtjj.git 

这样就可以添加一个额外的 remote。

今后,只要运行命令:

就可以将仓库 push 到 cdn 这个 remote 了。

5. 配置 CloudFlare

在 CloudFlare 上创建一条 CNAME 记录,从 http://cdn.neop.me 指向 http://neopcdn.github.io,并开启 CloudFlare CDN。

以及设置为 Flexible SSL,开启 HSTS, 在 Page Rules 里添加规则对 http://cdn.neop.me/* 路径强制 HTTPS。

感谢 CloudFlare 的免费 SSL 服务。

6. Epilogue

现在,公众就可以通过 https://cdn.neop.me/xtjj/xtjj.js 来访问到这个文件了。

xtjj.js 项目是我的个人 hobby project,不受到掘金的明示的或暗示的许可或背书。

7. So Long, And Thanks To All The Fish

你可以在掘金上收藏这篇文章