配置完成后可实现git上传代码后自动部署hexo页面

准备工作

  1. 本地已经初始化完成的hexo项目
  2. 该项目上传github后github地址
  3. 静态网页部署的github地址

    仓库介绍

    我的github内有两个仓库, blog 为hexo源代码仓库(私有), hexo-blog-html 为生成的静态页面仓库(公开);
    如下图:
    image.png

    操作步骤

    travis项目导入

    打开 https://travis-ci.org 选择github 登录, 进入主界面. 在 legacy services intergration 模块内选择博客源代码仓库点击右侧滑动按钮进行导入. (这个位置需要先将github 内项目设置为公开, 等导入后再设置为私有就行) 导入成功后点击 settings 进入配置页面
    image.png

    travis配置

    点击 more option 然后点击 setting , 打开下方两个推送请求的开关
    image.png
    然后向下翻找到 Environment Variables 模块追加环境便令
    此处为通过设置环境变量来传递一些不便于写在配置文件中的值（密码、密钥之类的），在这里我们设置此处为通过设置环境变量来传递一些不便于写在配置文件中的值（密码、密钥之类的），在这里我们设置GH_TOKEN 和 GH_REF 两个环境变量分别用来传递 GitHub Personal Access Token (获取方式后面说)和GitHub Pages 仓库地址. DISPLAY VALUE IN BUILD LOG 为是否在日志中显示参数值,可以选择打开
    image.png

    获取GitHub Personal Access Token

    image.png
    先到上方github页面内点击 generate new token 会到下方页面内. 由于我们只需要能够对普通仓库 push 就行了，所以把 repo 部分勾上即可. 创建后将获取的token插入到travis的环境变量中
    image.png

    配置.travis.yml

    在项目根目录下创建 .travis.yml文件, 进行配置 ```yaml language: node_js

    配置版本号 lts/ 为最新版本, 我的项目只支持11.

    官网文档链接为 https://docs.travis-ci.com/user/languages/javascript-with-nodejs/

    node_js:
    • 11

配置缓存

cache: directories:

  1. - node_modules

配置时区

before_install:

  • export TZ=’Asia/Shanghai’

在环境安装好之后执行命令来生成静态文件

install:

  • npm install hexo-cli -g
  • npm install

生产静态文件

script:

  • hexo g

通过如下格式的 url 访问来保证对仓库有操作权：https://your-gitHub-personal-access-token@your-repo-url。

由于我们前面把 GitHub Personal Access Token 和 GitHub Pages 仓库链接都写进了环境变量，所以直接通过环境变量引用就行了

after_script:

  • cd ./public
  • git init
  • git config user.name “yuyu”
  • git config user.email “yuy9501@126.com”
  • git add .
  • git commit -m “Travis CI Auto Builder at $(date +’%Y-%m-%d %H:%M:%S’)”
  • git push —force —quiet “https://${GH_TOKEN}@${GH_REF}“ master:master

如果博客备份仓库有多个分支的话，我们需要设置一下 Travis CI 监控哪一个分支的变动

branches: only:

  1. - master

```

验证

提交代码后如果配置成功, travis会自动进行博客部署, 可在下方页面查看. 我在这一步失败过一次, hexo g 报错, 上网查阅资料后发现是配置的node版本过高, 修改版本为11就可以了
image.png