将Hexo自动部署到Github Pages

Hexo建站比较简单，并提供了多种模板，方便快速开发个人博客。
在使用过程中，唯一让我感到麻烦的地方，就是每次修改完内容之后，都得重新编译，然后将编译完的静态文件重新上传到github仓库（或者自己的服务器）
再搜索过程中，发现使用Hexo的小伙伴都碰到过这种问题，并且已有合适的解决方案。
以下记录本站自动部署过程。

前期所需:

1. Hexo 项目
2. Github 账户
3. Travis 账户（与GitHub关联的）

正文

1. 建立Hexo项目

按照Hexo的教程，依次运行以下命令，建立新项目blog

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

完成 hexo server 之后，正常情况 terminal/cmd 下会提示打开 localhost://4000
在浏览器打开该地址后，就打开了Hexo的原始页面，至此Hexo新项目建立完毕

2. 创建Github新仓库

Github Pages 是Github的亲儿子，所以只要有Github账户，就可以生成一个对应Github Pages 页面。

创建一个符合规则的仓库

必须符合规则 以 username.github.io 作为仓库名，其中 username 是你 github 的用户名，这个名字不能出错。如果出错，那么需要你删掉这个仓库重来，更改仓库名是无效的。

3. 获取并设置Github Personal access tokens

获取Personal access tokens，并在Travis中进行设置（在Travis的username.github.io项目中进行Environment Variables设置）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mBEwLnbv-1620197735932)(http://img.ohh.ink//%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2Github.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cp9HKCfm-1620197735935)(http://img.ohh.ink//%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%20Travis.png)]

注意Travis中，我将key设置为了github，这个key可以任意设置，但是要记住，后面要用的
注意Travis中，我将key设置为了github，这个key可以任意设置，但是要记住，后面要用的
注意Travis中，我将key设置为了github，这个key可以任意设置，但是要记住，后面要用的

详细操作可以查看此文章

4. 在blog项目根目录下，创建.travis.yml

内容如下，可根据自己的环境进行修改

# 使用语言
language: node_js
# node版本
node_js: stable
# 设置只监听哪个分支
branches:
  only:
  - dev
# tarvis生命周期执行顺序详见官网文档
before_install:
- git config --global user.name "Oscar" # git username
- git config --global user.email "[email protected]"  # git Email
- npm install -g hexo-cli
- npm i hexo-generator-json-content --save  # 这个是我使用的Theme需要的，如果你使用的Theme不需要，可以删除
install:
- npm i
script:
- git submodule init  # 这个是我使用的Theme需要的，如果你使用的Theme不需要，可以删除
- git submodule update  # 这个是我使用的Theme需要的，如果你使用的Theme不需要，可以删除
- rm -rf ./themes/yilia/_config.yml  # 这个是我使用的Theme需要的，如果你使用的Theme不需要，可以删除
- cp ./_config.yml.themes ./themes/yilia/_config.yml  # 这个是我使用的Theme需要的，如果你使用的Theme不需要，可以删除
- hexo clean
- hexo generate
after_success:
- cd ./public
- git init
- git add --all .
- git commit -m "Travis CI Auto Builder"
# 这里的 $github 即之前在 travis 项目的环境变量里添加的
# 这里的 $github 即之前在 travis 项目的环境变量里添加的
# 这里的 $github 即之前在 travis 项目的环境变量里添加的
- git push --quiet --force https://[email protected]/username/username.github.io.git
  master
- hexo d

5. 向仓库的dev分支添加内容

在本地新建的blog根目录下，运行

  git init
  git remote add origin https://github.com/username/username.github.io.git
  # 创建新分支
  git checkout -b dev
  git add -A
  git commit -m 'code'
  git push origin dev

推送之后，去Travis查看一下（需要等5-10s左右），看有没有拉取分支并进行编译
图示情况即为成功。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vVYchKLg-1620197735938)(http://img.ohh.ink//%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2/Travis%E6%88%90%E5%8A%9F.png)]
至此，Travis自动部署，生成Github Pages 就完成了

附加

1. 修改Theme，并加入自动部署

我比较喜欢鹅厂前端工程师出品的Yilia，所以拿这个作为演示
在blog根目录下生成.gitmodules，内容如下

[submodule "themes/yilia"]
    path = themes/yilia
    url = https://github.com/litten/hexo-theme-yilia.git

上面是添加了git子目录

在根目录下运行，将Theme配置文件外置

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
cp ./themes/yilia/_config.yml ./_config.yml.themes

修改根目录下_config.yml

theme: yilia

deploy:
    type: git
    repository: https://github.com/ouhaohan8023/ouhaohan8023.github.io.git
    branch: master      # 将build后的静态网页发布到github仓库master分支

jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

完整使用上面给出的.travis.yml
将以上修改加入git，并提交到github，观察自动部署状态