Hugo + Bitbucket + CircleCI で GitHub Pages に自動デプロイ

By Shotaro Kohama on
hugo

このブログは Hugo で生成した静的ファイルを GitHub Pages でホスティングしていて Hugo に食わせるファイル自体は BitBucket のプライベートレポジトリで管理しています.

久しぶりにブログを書くと Hugo のコマンドを忘れてしまって, hugo server でビルドした結果を リンクのホストが localhost になっているのに気付かずに push してしまったり, 時間がかかっていたので BitBucket に更新があると CircleCI で Hugo の静的ファイルを生成して GitHub Pages にデプロイする ように下のような手順でしました.

  1. GitHub Pages のレポジトリにデプロイキーを登録
  2. BitBucket のプライベートレポジトリを CircleCI に登録
  3. CircleCI にデプロイキーを登録
  4. BitBucket のプライベートレポジトリに circle.yml を追加
  5. 記事を編集して push すると自動デプロイされることを確認

以下，ハマったところ・注意したところをポイントに手順を紹介します.

1. GitHub Pages にデプロイキーを登録

CircleCI からデプロイを行うために公開鍵を ssh-key をデプロイキーとして登録します. デプロイキーは下のような感じでローカルで生成します.

$ cd ~/.ssh
$ ssh-keygen -t rsa -f hugo-blog
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in hugo-blog.
Your public key has been saved in hugo-blog.pub.
...

パスワードは空にしないと手順3で CircleCI に登録できないので気を付けて下さい. あとは生成した公開鍵 hugo-blog.pub を GitHub のレポジトリの Settings に Deploy Keys メニューからデプロイキーに登録して下さい.

参考: Qiita | GithubのDeploy Keysを登録してパスワードなしでアクセスする

2. BitBucket のプライベートレポジトリを CircleCI に登録

2016年7月から BitBucket も CircleCI に Integration できるようになりました. 以下の公式ブログを参考に認証を行って，対象のブログレポジトリを Build Project に追加して下さい.

参考: CircleCI Blog | Announcing CircleCI Beta Support for Atlassian Bitbucket

3. CircleCI にデプロイキーを登録

手順1で生成した秘密鍵を CircleCI に登録します. サイドメニューから PERMISSIONS の SSH Permissions を開きます. Add SSH Key ボタンを押し秘密鍵を登録します.

Add SSH Key

GitHub Pages にデプロイする場合は github.com を Hostname に設定すれば十分です.

4. ButBucket のレポジトリに circle.yml を追加

CircleCI では circle.yml をレポジトリのトップに置くことで CI の設定を行うことができます. 今回設定したファイルは以下で、注意したポイントはこんなところです.

  • デプロイの対象は master のみにしています
  • public 以下の更新がない場合は，テストの git commit が成功しないのでデプロイは実行されません
  • circle.yml のテストも出来るように master だけでなく feature/ が付いたブランチも CI の対象とする
machine:
  timezone: Asia/Tokyo

general:
  branches:
    only:
      - master
      - /feature\/.*/

dependencies:
  pre:
    - go get -v github.com/spf13/hugo
    - git config --global user.name "Shotaro Kohama"
    - git config --global user.email "khmshtr28@gmail.com"
    - git clone git@github.com:shotarok/shotarok.github.io.git public

compile:
  override:
    - hugo -t angels-ladder

test:
  override:
    - cd public && git add --all && git commit -m "Update blog via Circle CI"

deployment:
  master:
    branch: master
    commands:
      - cd public && git push origin master

5. 記事を編集して自動デプロイされることを確認

最後に記事を追加・編集して BitBucket に master ブランチに push します. もしくはプルリクエストを作って master にマージします.

  • CircleCI でビルドが成功していること

Build Success

  • GitHub で commit されていること

Update via CircleCI

が確認できれば自動デプロイ成功です.