2020-01-31使用hexo与GitPages 搭建个人静态博客我们可以使用持续集成工具 Travis CI 来简化

写在前面

建站过程中踩了不少坑，许多教程与现状有所出入，本文用以回顾和日后避雷，也方便其他小伙伴参考。

什么是 Git Pages? Git Pages 是 GitHub 推出的一种静态网页托管方案，方便 GitHub 用户展示个人页面与项目页面。可以作为一种 0 成本托管个人博客的选择，个人页面默认绑定***username***.github.io。

什么是 Hexo？ Hexo 是一种基于 node.js 的博客框架，其通过解析 .md 和主题文件生成包含相应文章内容的静态网页。

PS: 学完了三大件跟 node 才来整，做完才发现都是胶水代码，0 基础也能玩。

开始之前

在开始之前需要准备的有：

一个 GitHub 账号
VSCode
node.js
GitHub Desktop/Git

创建本地博客

创建要用作本地博客的文件夹 <folder name> 在 VSCode 中打开文件夹并在终端中输入

> npm install -g hexo-cli
> hexo init
> npm install

初始化完成后可以通过 hexo new <title> 创建新文章在新生成的 .md 文件中书写博客内容使用 hexo s 命令运行本地网站并在 localhost:4000 预览效果

_config.yml 文件中可以修改站点的配置信息 themes 文件夹中存放有主题，默认为 landscape clone 其他主题并在 _config.yml 中配置即可切换主题主题配置参考各主题作者的 Doc

创建 GitHub Pages

登录自己的 GitHub 账号，创建一个名为 username.github.io 的库 ~（其中username为自己的用户名）~

使用 Github Desktop 点击 =="Set up in Desktop"==
使用 Git

git clone https://github.com/username/username.github.io

生成静态页面并上传

使用 hexo g 命令生成静态网页将 public 目录下的文件 copy 到本地库中并 commit & push 此时访问 username.github.io 即可查看效果

使用持续集成工具

每次发布文章都需要 generate & copy & commit & push 实在是太麻烦了我们可以使用持续集成工具 Travis CI 来简化这部分工作。

Hexo 官方文档建议的是直接将 blog 文件夹推送到 io 库中使用 Travis CI 来构建发布到 gh-pages 分支下并改变 io 的发布分支然而事实上个人页面只能使用 master 分支作为发布分支

为了降低学习成本，本文采用的办法是将blog文件夹推送的新建的 hexo 库中用 Travis CI 监听代码变化来自动构建并 copy 到 io 库的 master 分支

新建一个库
将 Hexo 站点文件夹推送到库中
将 Travis CI 添加到 GitHub 账户
打开 Applications settings，使 Travis CI 能够访问你的库
新建 Personal Access Token，勾选 repo 生成 Token （保存好）。
回到 Travis CI，打开设置，在 Environment Variables 下新建一个变量 Name 为 BLOG_TOKEN，Value 为刚才在 GitHub 生成的 Token ~不要勾选~ ~DISPLAY~ ~VALUE~ ~IN~ ~BUILD~ ~LOG！！！~ 点击 Add 保存。

在 Hexo 站点文件夹中新建一个 .travis.yml 文件

文件内容直接 copy 下面保存即可

language: node_js # 设置语言

node_js: stable # 设置相应版本

cache:
    apt: true
    directories:
        - node_modules # 设置缓存，传说会在构建的时候快一些

before_install:
    - npm install hexo-cli -g

install:
    - npm install # 安装hexo及插件

script:
    - hexo clean # 清除
    - hexo g # 生成

after_script:
    - git clone ${GH_REF} pub_web # 将发布服务的仓库clone下来，
    - cp -rf public/* pub_web/ # 将源博客仓库目录下的public文件夹下的文件复制到发布服务的仓库中
    - cd pub_web # 进入到git仓库
    - git config user.name "username"
    - git config user.email "username@mail.com"
    - git add .
    - git commit -am "Travis CI Auto Builder :$(date '+%Y-%m-%d %H:%M:%S' -d '+8 hour')" # 零时区，+8小时
    - git push origin master 
branches:
    only:
        - master #只监测master分支
env:
    global:
        - GH_REF: https://username:${BLOG_TOKEN}@github.com/username/username.github.io #设置GH_REF

注意更改 username, BLOG_TOKEN: 就是在 travis-ci 仓库中配置的环境变量 push 到远程仓库后 Travis 就会开始工作，之后每次发布文章只需要 push 一下就行

2020-01-31使用hexo与GitPages 搭建个人静态博客