把博客完全迁移到 GitHub,开启懒人之旅

我的 Hexo 博客一直是放在自己的 VPS 进行部署的,自己配置 Nginx 等。每次写完文章还需要 SFTP 上传、登录 ssh、hexo g、hexo d,非常麻烦。而且还没办法用版本控制,享受不到 revert 等功能。这段时间,我把博客部署到了 GitHub,并使用 Travis CI 自动部署,每次写文章只需要 Push 到 GitHub 即可自动更新,非常省事。再一个,如果万一哪天 VPS GG 了,…..

迁移到 GitHub Pages

由于是静态页面,首先是抛弃 Nginx,把博客托管到 GitHub Pages,我们使用hexo自带插件hexo-deployer-git

安装配置插件

cd 到博客根目录,执行:

1
npm install hexo-deployer-git --save

之后就安装完成了,接下来进行配置。

首先,自觉建一个Repo。
然后打开hexo的_config.yml(就是博客根目录那个),最底下加入内容:

1
2
3
4
5
deploy:
type: git
repo: Repo地址,比如说https://github.com/Trumeet/Blooooooog.git
branch: 分支,我建议用 gh-pages
message: 每次提交的Message,自己瞎写即可

保存。下次执行 hexo d 的时候就会问你要 git 用户名密码 自动Push了。

配置 CNAME 及解析

如果你需要使用自己的域名,则需要在 GitHub Pages分支 添加一个 CNAME 文件,里面写你的域名。(自己 Repo Settings 里面的 Custom Domain 也是做的这个操作)

但是,由于每次自动deploy会抹掉gh-pages的内容,所以我们没办法在那个分支创建CNAME。不过别急,我们可以把这个CNAME放在博客的source目录,它就会被deployer自动上传了。

配置解析,直接在Cloudflare的DNS页面把以前的A记录IP改为192.30.252.153即可,TTL为Automatic。之后会出现一段时间证书问题,一会儿会自己解决,不用管它。

至此,我们的博客已经托管到 GitHub Pages 了。

把源文件转移到 GitHub

刚才,我们只是废弃了 Nginx,由 GitHub 帮助我们托管页面。但是博客的源配置和文章Markdown还在自己这,有什么卵用呢,所以我们需要将源文件放到 GitHub。

去除主题 Submodule

我使用 hexo-theme-material 主题,从 GitHub 下下来放进 themes 文件夹,它还带有 .git 文件夹,说明是 submodule,无法添加到git。

所以,在 git init 之前,我们先把它的.git去掉即可(大概?我没这么做)
如果你之前已经创建了,那么稍麻烦点,先干掉主题目录的 .git 文件夹,然后执行:

1
git rm --cached (主题目录)

添加主题配置

去主题目录的 .gitignore 去除 _config.yml 忽略,随后即可添加。

注意!如果你的主题配置有Key之类的内容,建议做法是使用Travis CI+sed命令+环境变量保护。但我这里没有这是,而是通过服务商那里域名验证实现的。如果需要保护,请自行研究!

上传源文件

照常添加文件、提交、Push到master(非Pages分支)即可,不再阐述。

至此,我们已完全脱离服务器。每次要更新博客,只需要找台电脑,配置npm和node环境,pull master,再生成并deploy即可了。但是还是觉得麻烦(划掉

Travis CI 全自动配置

我们还是觉得麻烦,还想再犯懒。所以就需要大杀器——Travis CI。它会在每次master变动(Push后)自动安装依赖、生成并deploy,岂不是美滋滋(跑

创建 GitHub token

需要先创建一个 personal access token,这样 Travis CI 才可以无需密码访问你的信息。

先要去 GitHub / Settings / Developer settings / Personal access tokens 页面。

然后点击 “Generate new token” 按钮创建 token。

填写信息:

  • Token description是名称,随便写。
    下面勾选:
  • repo:status
  • repo_deployment
  • public_repo
  • repo:invite
  • user:email

随后生成即可,创建后,token只显示一次,赶快拿小本本抄下来,截屏留念

绑定 Travis CI

这步会让 Travis CI 链接到你的Repo。先去 Travis CI 官网 https://travis-ci.org/ 授权 GitHub 账号。然后在Repo列表把你的博客Repo打开开关。再点进那个Repo的设置,勾选 Build only if .travis.yml is presentBuild branch updates。不勾 Limit concurrent jobsBuild pull request updates

配置环境变量

在 Travis CI 设置页,找到 Environment Variables。新建一个名为 GH_TOKEN 的变量,值为刚才的 Token。其他变量也可以在这里设置。项目构建的日志是公开的,但是这些变量的值会显示为 secure,这就是变量的好处。

创建配置文件

最后一步,在你的项目的 master(放置源文件的分支)创建 .travis.yml
内容:(主要参考 https://skychang.github.io/2017/01/01/Hexo-Use_Travis_CI_Auto_Deploy_Blog

1
2
3
4
5
6
7
8
9
10
language:  node_js
node_js: stable
script:
- npm install
- hexo cl
after_success:
- git config --global user.name "你 git 配置的用户名"
- git config --global user.email "你 git 配置的邮箱"
- sed -i'' "/^ *repo/s~github\.com~${GH_TOKEN}@github.com~" _config.yml
- hexo deploy -g

之后,打开 Travis CI 项目页,就可以看到自动部署了!至此,我们的博客完全迁移到 GitHub,而且每次写博客的时候完全可以用 GitHub 网页版上传文件,剩下的事就不需要你管了。