hexo+travisCI自动部署github pages

两种方式

利用github pages搭建个人博客一般有两种组织方式：

1. 建两个项目，一个项目blog用于存放博客源码，另一个项目xxx.github.io用于部署生成的静态文件
2. 只建一个项目blog，master分支存放博客源码，生成的静态文件部署到gh-pages分支

区别是第一种可以直接用xxx.github.io访问博客，而第二种要加项目名，即xxx.github.io/blog，我选的是第一种。

hexo快速搭建

npm i -g hexo-cli
hexo init blog-hexo
cd blog-hexo

配置主题

github.com/next-theme/…

使用git clone 安装后git commit 时会提示用submodule，为了简单我直接把主题的.git文件删掉了。

待研究：在 hexo 中使用 git submodules 管理主题

手动部署

Just for a reminder，本文重点是后面的Travis CI自动部署

npm i --save hexo-deployer-git

_config.yml 添加配置

deploy:
  type: git
  repo: https://github.com/MarvinXu/marvinxu.github.io.git
  branch: master

travisCI自动部署

1. 登录travisCI并关联项目

travis-ci.org/ 使用github账号登录，关联blog项目

2. blog项目添加.travis.yml

流程：构建生成静态页 -> 部署到marvinxu.github.io

参考 docs.travis-ci.com/user/deploy…

language: node_js
node_js: 
  - 8
script: 
  - "npm run build"
cache: 
  directories: 
    - node_modules
deploy:
  provider: pages
  skip_cleanup: true
  # access token存储在环境变量中防止泄露，后面会说明如何添加
  github_token: $GITHUB_TOKEN
  keep_history: true
  # 指定部署的repo，默认为当前repo
  repo: MarvinXu/marvinxu.github.io
  # 指定branch，默认为gh-pages
  target_branch: master
  # 指定要部署的文件夹，hexo构建生成在public目录下
  local_dir: public
  on:
    branch: master

3. 获取github token

路径：Settings -> Developer settings -> Personal access tokens -> generate new token

因为我们的blog项目是public的，只需选择public_repo权限，确定得到token串

问题记录：我第一次选的权限是整个repo，结果触发构建时报错了，提示“gh-token is invalid”，后来改为只选择public_repo才正常

stackoverflow.com/questions/5…

stackoverflow.com/questions/2…

4. 在travisCI项目中添加环境变量

在项目设置里，添加变量名为GITHUB_TOKEN，值为刚才获取的token

至此已经完成自动部署的配置，当blog项目发生push操作时，自动部署就会触发啦~