hexo持久化构建以及给自有域名github-page上HTTPS

过一段时间博客的主机要到期了。我看了一下才发现,主机上其实我也只是放着我hexo的静态博客而已。觉得每个月要交几十块钱其实并不值当,遂决定把hexo博客从云主机上转移出来到github-page上。

本文主要记录如何运用Travis-CI对hexo博客进行持久化构建,以及通过Cloudflare给自有域名的github-page加上https文末给出如何将自己的博客加入HSTS网站列表。

之前在自己的主机上写博客的时候,写完执行一下hexo g就可以了。不过后来想想其实还是不太安全。这个方式万一在主机dang掉之后,数据就有可能找不回来了。如果每次写完既要hexo g又要hexo d的话又过于麻烦,而且只能推送构建后的页面而不能保存文章源(markdown)文件。于是趁此机会来改造一下,也是一件快意之事。

持久化构建

持久化构建,也就是持久化构建

持久化的意思就是能保证数据能够长久保留下来。对应于我的情况来说,github就是一个非常优秀的持久化存储数据的地方。github的仓库能够持久化保留我的md文件+构建后的hexo博客页面。

构建就是把源(md)文件编译成博客页的步骤。

能够做到构建的同时持久化的,目前来说最方便而且最省心的就是Travis-CI了。

简单来说,在你push到github仓库后,通过配置文件,它能够执行一系列的脚本(比如编译、构建、测试、推送等)。对于我来说,就可以实现:只要我写完hexo的md博客,推送到github仓库里后,它就能自动帮我构建并推送到github相应的分支上。从而实现了持久化构建,以及我博客的更新。

注册Travis-CI

去官网注册一下Travis-CI,关联上你的github账号,给予权限后就可以把你的github仓库同步到它这里来。

Travis-CI

在需要Travis-CI构建的仓库打开同步设置。

打开同步设置

设定Token

去github的个人设置那边找到Token设置。

Github-token

设定一个Token给Travis-CI,名字自己取让它对我们的仓库能够拥有读写权限(就够了)。

Token

然后保存一下这个Token——它只显示一次,之后就不再显示了。所以找个地方把它记下来先。

然后回到Travis-CI里,对于开启同步的仓库进行设置,我们把刚才的这个Token存储为一个叫做GH_TOKEN的环境变量,可以在.travis.yml这个配置文件里通过${GH_TOKEN}的方式获取。这样就不会将你的TOKEN暴露出去了。

GH_TOKEN

然后在所在github项目里创建一个叫做.travis.yml的文件。这个文件就是Travis-CI的执行脚本。它会根据里面定义的环境、步骤一步一步执行直到最后输出结果。

编写.travis.yml

.travis.ymlTravis-CI读取的配置文件。我的配置文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
language: node_js # 声明环境为node
node_js: stable

# Travis-CI Caching
cache:
directories:
- node_modules # 缓存node_modules文件夹

# S: Build Lifecycle
install:
- npm install # 下载依赖

script:
- hexo algolia # 我装了algolia的搜索工具。这一步正常可以是 hexo g


after_script: # 推送到github的部分
- cd ./public
- git init
- git config user.name "Molunerfinn"
- git config user.email "[email protected]"
- git add .
- git commit -m "Update docs"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master # 通过之前存在Travis-CI里的token以及github仓库的地址推送到相应的master分支
# E: Build LifeCycle

branches:
only:
- hexo # 只对hexo分支构建

env: # 环境变量
global:
- GH_REF: github.com/Molunerfinn/Molunerfinn.github.io.git # 我的仓库地址

推送

我原本设定的是master分支作为github-page的展示分支。所以我切出了一个hexo分支,用来放置博客原文。hexo分支只需要留下如下的目录结构即可(其实就是除了public文件夹以外,其他文件夹都可以留)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.
├── _config.yml
├── .travis.yml
├── package-lock.json
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   ├── CNAME
│   ├── _posts
│   ├── about
│   ├── favicon.ico
│   └── tags
└── themes
└── next

做完上述工作后,将.travis.yml这个文件添加进git仓库,然后推送到远端的hexo分支,就会发现Travis-CI已经接收到相应的请求正在进行构建了。构建完成后,会将public文件夹内的内容推送到master分支。至此我们完成了持久化构建的部分。

给自有域名的github-page上HTTPS

从Chrome56左右开始,对于没有HTTPS的网站,不符合要求的,都不会出现一把小绿锁。反之,有了小绿锁的网站,标志着这个网站是HTTPS安全的。

假如你没有自己的域名,而是使用着github的子域名(形如xxx.github.io)那么能够自动拥有github的https,无需操心。

但是如果有自己的域名,想要实现自己的域名通过CNAME指向github的page,并加上小绿锁的话,就比较麻烦了。首先我们需要将自己的域名通过CNAME指向github-page。在hexo的source文件夹里创建一个叫做CNAME的文件,内容只需要写上你自己的域名即可。对于我来说就是molunerfinn.com

通过CNAME指向github-page的页面之后,我们发现,原本github自带的https已经不能再使用了。我们必须给自己的域名想办法弄上https。一开始并无头绪,不过好在我找到了Cloudflare这个解决方案。

注册Cloudflare

第一步当然是注册。Cloudflare是国外非常有名的一家网络服务提供商。它提供的其中一项免费服务就是给我们自有域名加上HTTPS。正好符合我们的需求。

注册成功后添加域名。

然后需要增加几个记录,其中A记录就是指向这192.30.252.153192.30.252.154这两个IP地址,它们是github-page的ip地址。然后建一个CNAME将www的网址指向我们非www的网址

DNS Records

然后需要将我们的域名的DNS服务商的地址改成Cloudflare要求的两个DNS服务器地址。每个人分配的不一样,而且必须用分配的否则会失效。

DNS Server

这个操作需要在自己的域名服务提供那边修改。一般是48小时内生效。

开启HTTPS

找到Crypto选项,这里我们需要开启Flexible的HTTPS选项。

https

其实Cloudflare做的事就是,当访问我们的域名的时候,实际上走的是Cloudflare的服务器,这个时候这个阶段的访问是有HTTPS的。然后Cloudflare再去请求我们实际的内容,再将内容返回给用户。这一段是没有HTTPS的。也就是实际上是半HTTPS。不过对于我们静态博客来说,这种半HTTPS实际上已经够我们使用了。

可以看见开启HTTPS真的非常简单,基本不需要额外操作。

重定向

这个时候我们访问https://molunerfinn.com自然走的是HTTPS。但是如果有人访问了http://molunerfinn.com,那要如何跳转到HTTPS的页面呢?CloudFare另一个很棒的功能Page Rules就派上用场了。我们可以指定我们的域名强制使用HTTPS,并且当访问是HTTP的时候重定向到HTTPS。这样就能保证用户访问我们的页面都是通过HTTPS的了。

Rewrite

附录

DNS解析

刚开始用CloudFare的DNS服务器,国内域名解析一开始会时断时续。我自己大概是过了24小时之后开始稳定的。所以一开始有可能访问不到自己的博客这是正常的。一开始我还以为是Cloudflare那边问题比较严重还提了一个issue。后来第三天就正常了。

加入HSTS的列表

上面说到,我们有可能访问自己的网站是走HTTP->304重定向->HTTPS。这个是浏览器跟服务器进行了一次通信之后才发生的跳转。那有没有可能做到,访问的是HTTP,但是浏览器识别之后自动转成HTTPS访问,而不经过重定向那一层操作呢?有的。通过HSTS的Preload List。

可以参考这篇文章对HSTS进行更深入的了解。简单来说,HSTS能够使我们的网站安全性更上一层楼。

还是CloudFare,它家自有的HSTS功能,开启之后就能很好的满足我们的需要。(真是完美了)还是在Crypto选项下,开启HSTS

HSTS

建议都使用默认的选项。

然后可以去HSTS Preload List的网站把我们的域名进行检查并收录(不能是子域名,必须是一级域名),如果没通过会给出修改建议,按照建议修改就行。如果通过了,就会放入审核列表。之后可以时不时回来看看自己的网站被收录了没有。我是等了快一周才被收录。网上的说法普遍是几周内。所以耐心等待收录。一旦被收录就会应用到主流浏览器上,这样你的网站就是更加安全的网站啦。

HSTS Preload List

记录总结

至此,我的博客迁移工作就做完了。用的因为是Cloudflare的cdn加速,所以在国外访问速度很快,在国内访问的速度会稍慢一些。不过也无伤大雅。最关键的是通过上述的办法,让我的博客能够实现持久化构建,加上了HTTPS的小绿锁,并且成功加入HSTS的Preload List,还是比较满意。

HTTPS

最后由衷感谢GitHub+Travis-CI+Cloudflare提供的这么优质的服务。

Author: Molunerfinn
Link: https://molunerfinn.com/hexo-travisci-https/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
支付宝打赏
微信打赏