利用Hexo + Travis CI在Github上搭建个人博客

在本教程中，我们将会使用 Travis CI 将 Hexo 博客部署到 GitHub Pages 上，并配置Next主题。

安装Hexo

在本地依次执行如下命令，

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

此时在本地浏览器上访问http://localhost:4000 可以看到使用默认主题的博客主页。

将 Hexo 部署到 GitHub Pages

• 新建一个 repository，并将 repository 命名为 <你的 GitHub 用户名>.github.io
• 将 Travis CI 添加到你的 GitHub 账户中
• 前往 GitHub 的 Applications settings，配置 Travis CI 权限，使其能够访问你的 repository
• 前往 GitHub Personal Access Token，只勾选 repo 的权限并生成一个新的 Token。Token 生成后请复制并保存好
• 使用github账号登录Travis CI，前往你的 repository 的设置页面，在 Environment Variables 下新建一个环境变量，Name 为 GH_TOKEN，Value 为刚才你在 GitHub 生成的 Token。确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选 避免你的 Token 泄漏。点击 Add 保存
• 在上一节新建的 Hexo 站点文件夹中新建一个 .travis.yml 文件，内容如下：

sudo: false
language: node_js
node_js:
  - 10 # use nodejs v10 LTS
cache: npm
branches:
  only:
    - development # build development branch only
script:
  - hexo generate # generate static files
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN
  keep-history: true
  target-branch: master #部署到master分支
  on:
    branch: development
  local-dir: public

• 将上一节生成的文件推送到 repository 中的development分支。

设置Theme Next

• 进入到Hexo 站点根目录，执行如下命令
  git clone https://github.com/theme-next/hexo-theme-next themes/next
• 配置根目录下的_config.yml，配置结果如下：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

• 进入到themes/next，执行如下命令将next主题切换到v7.7.0，否则在编译时会出现"TypeError: Cannot read property ‘path’ of undefined"错误：

git check tag/v7.7.0

-重新编译hexo工程，并访问http://localhost:4000 可以看到应用新样式后的首页

配置博客

• 请参考配置配置博客的title, subtitle, description等
• 请参考hero-theme-next配置Theme Next主题

参考工程

可参考如下工程：
https://github.com/liulijun-dev/liulijun-dev.github.io

个人博客地址

https://liulijun-dev.github.io/