ReZero's Utopia.

Hexo & (GithubActions | Travis CI)

Word count: 1.5kReading time: 6 min
2019/01/01 Share

基本概念

仓库: 就是项目文件存放的位置,如果只完成第一步,不需要私有仓库,因为现在私有仓库免费了,所以考虑用私有仓库作为你的博客内容文件,用来存一些你觉着可能会用到但是又不希望别人看到的文件.仓库的名字可以随便取,但有一个名字是有特殊含义的,就是 UserName.github.io, 这个往往用来作为博客域名,并且你可以为其申请免费 https

CNAME: 当你不喜欢上面那个域名,就可以通过在根目录下添加该文件来作 CNAME 转发

自动化部署: 就是你觉着每次都不用改变的重复劳动, 写成脚本即可,比如博客部署流程

博客部署流程: 本地 source 目录决定内容, _config.yml 决定网站基本配置(如名称, 部署方式, 默认配置等), 每次 hexo g 将会根据 source_config.yml generate 对应的网页文件, 然后 hexo d 将会根据 config_yml 的 deploy 选项进行 push

add, commit, push: git基本操作,不作解释

ACCESS_TOKEN: 上述流程明显需要脚本有操作你仓库的权限,这个权限就通过 token 的形式来授予.

Travis CI: 尽量使用该网站, 而不是 travis-ci.org, 后者不知道我用的时候为啥部署不了,该网站就是提供免费帮你跑部署脚本用的

环境准备

本地

首先具备一个 node 环境和 git 环境,考虑到速度建议 npm 改成 cnpm ,而 git 可以通过改 .gitconfig 来走代理。

远程

仓库及重要文件位置

远程需要

  • 一个 source 仓库用来存放你的博客内容文件,重点注意必须有 .travis.yml, _config.yml, package.json 配置文件和 source 文件夹, 如果考虑精简该仓库可以通过添加 .gitignore 的方式, 以下仅供参考

    1
    2
    3
    4
    5
    6
    7
    8
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    .vscode/
  • 一个UserName.github.io 来作为你的站点文件, 以及配置一个ACCESS_TOKEN提供给 Travis CI 使用. 没啥重点文件, 内容完全交给 deploy 来决定, 不要忘了在仓库的 setting 里开启 https, 而ACCESS_TOKEN 是在全局 setting 里的

搭博客分两步,第一步是为了方便,本地初始化一次『可以考虑算是本地备个份』,第二部是搭建后云端同步和常用操作。

本地初始化

本地初始化安装hexo脚手架,意思就是说安装个工具用来初始化你的博客(比如文件夹创建,配置啥的)

1
2
3
4
5
6
cnpm install hexo-cli -g
# 利用 cli 创建hexo项目
hexo init blogName
cd blogName
# 安装 deploy 插件
cnpm install hexo-deployer-git --save

初始化之后重点说下关注点:

  • 一个文件_config.yml,这个文件关注两处存在,一份根目录下,一份在themes目录下: 明显就是一个配置博客,一个配置主题。
  • 然后source目录下有个_post目录,这个目录用来存放写的md也就是你的博客内容.
  • 最后就是public目录,因为浏览器端不能直接解析markdown,所以需要转化成 jch <js, css, html> ,这个目录就是用来存放转化后的目录。

前面根目录下的config.yml就是用来配置部署博客到哪个服务器的。打开后将deploy项进行更改就好。

1
2
3
4
deploy:
type: git
repo: <repository url>
branch: [branch]

博客这样就搭建好了,以后你就可以

  1. 写一个md文件放在post目录下
  2. 然后 hexo g 生成 jchhexo d 部署(就是将生成好的网页传到服务器端提供访问)

云端同步

上面的步骤已经可以了,但是有两个贼烦的点:

  • 我每次写完博客都要 hexo g & d 一下,麻烦

  • 自己的电脑gg了就凉了,不能随时写作

所以有了第二步操作: TravisCI 自动化部署,首先去用户Setting-DeveloperSetting当中申请一个有repo权限的Token,
该Token 将作为环境变量 ACCESS_TOKEN

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
34
35
36
37
38
39
40
# 指定语言环境
language: node_js
# 指定需要sudo权限
sudo: required
# 指定node_js版本
node_js:
- stable
# 指定缓存模块,可选。缓存可加快编译速度。
cache:
directories:
- node_modules

# 指定博客源码分支,因人而异。hexo博客源码托管在独立repo则不用设置此项
branches:
only:
- source

before_install:
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- cnpm install -g hexo-cli

# Start: Build Lifecycle
install:
- cnpm install
- cnpm install hexo-deployer-git --save

# 执行清缓存,生成网页操作
script:
- hexo clean
- hexo generate

# 设置git提交名,邮箱;替换真实token到_config.yml文件,最后depoy部署
after_script:
- git config user.name "ReZeroS"
- git config user.email "1726542850@qq.com"
# 替换同目录下的_config.yml文件中gh_token字符串为travis后台刚才配置的变量,注意此处sed命令用了双引号。单引号无效!
- sed -i "s/gh_token/${ACCESS_TOKEN}/g" ./_config.yml
- hexo deploy

# End: Build LifeCycle

上面的文件只有一个地方需要注意: sed -i "s/gh_token/${ACCESS_TOKEN}/g", 这句话的含义很明显就是正则替换,也就是为更改 _config.ymldeploy 选项做准备.

因为推出了github actions, 这里加一份github actions 的版本

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
34
35
36
37
38
on:
- push

jobs:
build:
runs-on: ubuntu-18.04
steps:
- name: Checkout master branch
uses: actions/checkout@master
with:
fetch-depth: 1

- name: Setup nodejs
uses: dcodeIO/setup-node-nvm@master
with:
node-version: node
node-mirror: https://nodejs.org/download/v8-canary/

- name: Dependency install
run: |
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g hexo-cli
cnpm install
cnpm install

- name: Clean And Regenerate
run: |
./node_modules/.bin/hexo clean
./node_modules/.bin/hexo generate

- name: Deploy
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
run: |
git config --global user.name "ReZeroS"
git config --global user.email "1726542850@qq.com"
sed -i "s/gh_token/${ACCESS_TOKEN}/g" ./_config.yml
./node_modules/.bin/hexo deploy

结束

改完后 push 到你的私有仓库就可以了,这样每次你都可以直接 浏览器端 打开你的私有仓库,然后直接新建md文件, 然后你的 commit 记录就会被 TravisCI 监测到, 会自动触发 hook, 因而就 push 到你的博客了.

CATALOG
  1. 1. 基本概念
  2. 2. 环境准备
    1. 2.1. 本地
    2. 2.2. 远程
      1. 2.2.1. 仓库及重要文件位置
  3. 3. 本地初始化
  4. 4. 云端同步
  5. 5. 结束