農学部×Linux

農学部でプログラミングをしている(していた)人のブログです

VuePressをGitHubPagesにTravis-CIを通じてデプロイする

基本的にはGitHub Pages Deploymentを参考にすればいいが、途中躓いたので一からメモ。

要点

  • devブランチにpushする -> CIがビルド -> masterにコンパイル後のファイルが自動生成。

vuepressのディレクトリ構造は以下のように設定。 ソースをsrc/に置き、コンパイル後のファイルをdocs/以下にビルド。

jkatagi.github.io/
  README.md ... GitHubのトップ用。
  node_modules
  package.json
  .travis.yml
  src/ ... ここにvuepressのファイル

package.json

{
  "scripts": {
    "docs:dev": "vuepress dev src",
    "docs:build": "vuepress build src"
  }
}

手順

  1. travisコマンドラインツールをインストールしていない場合)travisコマンドラインツールをインストールする(アクセストークンの暗号化に必要)。
 $ sudo apt install ruby-dev
 $ sudo apt install travis
  1. アクセストークンをここを参考に取得する (ここでは取得したアクセストークンをabcdeとする)

  2. アクセストークンを暗号化

$ travis encrypt GITHUB_TOKEN=abcde --add env.matrix
  1. .travis.ymlに以下を記述(env以下は自動的に挿入されているはず)
language: node_js
node_js:
- '10'
install:
- npm i -g vuepress
script:
- npm run docs:build
cache:
  directories:
  - node_modules
deploy:
  provider: pages
  skip-cleanup: true
  local_dir: docs
  github-token: "$GITHUB_TOKEN"
  repo: # in my case, jkatagi/jkatagi.github.io
  keep-history: true
  target-branch: master
  on:
    branch: dev
env: ... # generate automatically
  1. src以下のファイルを編集した後、push
$ git push # current branch is dev 

疑問