Hugo で生成したサイトを GitHub Pages に自動デプロイする

静的サイトジェネレータの Hugo で作ったサイトを Travis CI で GitHub Pages に自動デプロイする仕組みを作ったので紹介します。

GitHub でリポジトリを作る

GitHub Pages は GitHub 上のリポジトリ内のファイルを公開するサービスです。

GitHub Pages を使うにはリポジトリが必要なので作ります。
今回紹介するサイトのリポジトリは https://github.com/kstm-su/blog です。

master branch の設定

master branch に Hugo を導入します。
基本的には quick start のままです。

Hugo のインストール

mac OS を使っているので brew install hugo でインストールしました。

サイトの初期化

hugo new site [repo name] を実行してサイトを作ります。

テーマの追加

See themes.gohugo.io for a list of themes to consider. This quickstart uses the beautiful Ananke theme.

cd quickstart;\
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\

# Edit your config.toml configuration file
# and add the Ananke theme.
echo 'theme = "ananke"' >> config.toml

Travis CI の設定

master に push されたら Travis CI で gh-pages に自動で commit するように設定ファイルを書きます。

.travis.yml

language: bash

env:
  global:
    - GIT_AUTHOR_EMAIL=[e-mail]
    - GIT_AUTHOR_NAME=bot
    - HUGO_VERSION=0.30.2
    - secure: "Pw475F/bEiP8yIyZAPTwu6tHXMHTtC5u52pm5eZWYXiYQPuWdTvTe1X14tGimWtbTUX95joVduEpZmAVnKa53U6u3Fv9kiEP0RWCxGXCbxJ98a69MfNb58b+s2qftfwxwXrlOPE1o9Uz9qjkmwwHGoObuMeH776reAxuBsMGppjMq2Bje78fqlKUtmnlRT3EzpNCQbCv954RBTLWwZUZ9/JHjuv7/57Q0PwbHuGoMEN6nXloxHVObFQ33odAma2U7WRTN4CtV8rsA/zs6llbCGK/4kfZb5xaYnHcWXExRLZAuhQifXB5mHeBtNgt7nFzXaGEJ5P9vakSeU2X6A+2T6WWn33oqkMf4yK0MMdYda/ABhyz0pEKUzXcF1UZQUdxaSNaIz9uU6w1ZrmZeHefKeLkhxBAwenYsSNTMkHHFtKyhtYoK6M7BpmZZkNgNrN3oDIUEhVbe5qW23wWHcaUQIXCDs0hBwLiY9EiwyBG0lClfEBObRcLB4cdUYw/fwRMvxerLmg3tv3AIiSJBTSV1IyUaj3amkysTNRiX4hSQ8GKNLV/uFoawJfgTcEImgoi4+y52/DBNz0fhSJeNx0x4l11pgVlkb6TuhkR3Lk2Ol06raNCSNWG9sZLiJ9MfkZ+klAz2qFArCSpa4F2JJAIVQDZ6+QxMwpLkq/s3AuuS/Y="
    - GIT_URL=https://${GIT_TOKEN}@github.com/kstm-su/blog.git

install:
  - wget https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz
  - tar xzf hugo_${HUGO_VERSION}_Linux-64bit.tar.gz

before_deploy:
  - git remote set-url origin ${GIT_URL}
  - git fetch origin gh-pages:remotes/origin/gh-pages
  - git worktree add -B gh-pages public origin/gh-pages
  - ./hugo

deploy:
  skip_cleanup: true
  provider: script
  script: scripts/deploy.sh
  on:
    branch: master

環境変数の secure の部分は GitHub のログイントークンを暗号化したものです。
ログイントークンは https://github.com/settings/tokens で生成します。
暗号化は travis encrypt を使います。

GitHub に push する

master の準備が終わったら git push します。

GitHub Pages の設定

GitHub Pages を使う方法はいくつかあるのですが、今回は gh-pages というbranchを公開します。

Github Pages の設定は Settings で見れます。
gh-pages branchを作るとデフォルトで設定されているはずですが、念のため確認しておきます。

ページの追加

content/posts に Markdown ファイルを追加します。

hugo new posts/my-first-post.md
vi content/posts/my-first-post.md

draft: true があると下書きとして扱われるのでこの行は消しておきます。

ページを作成したら git push します。

しばらくすると CI が走って GitHub Pages に反映されます。

まとめ

所属しているサークルのブログで使っていますが、
git push で記事を公開するので技術サークルらしくなったなーと気に入っています。