はじめに

こちらの記事でhugoを使ってこのブログを開設した記事を書きました。
今回はその続きで、記事を書いたらCircleCIで自動ビルドを行なって新しい記事が公開される仕組みを作ったので、そのやり方を記載します。

構成

運用的には1つのgitリポジトリで構成していて、いくつかのブランチとプルリクで運用します。

masterブランチ
- 公開用の記事を置くブランチ
blogブランチ
- 作業のベースブランチ
- このブランチに新しいコミットが入ったら自動で記事をビルドしてmasterに入れる
post/xxxxブランチ
- 記事毎のブランチ
- 書き終わったらこのブランチからblogブランチにプルリク投げてマージする

という感じです。
このうち、blogブランチへのマージを検知してビルドしてmasterに入れる仕組みをCircleCIを使って作りました。

CircleCIの設定

言わずもがな、有名なSaaSのCIサービスです。
2.0になってdockerが使えるようになってからはますます便利になりました。
基本的には Makefile を使うのですが、git pushする設定に少し時間がかかりました。

Makefile

CircleCIの設定ではないのですが、今回の要なので先に書いておきます。
deployの部分だけを切り取ってます。

1
2
3
4
5
6
7
8
9


deploy: ## Deploy posts
	git submodule update -i
	hugo
	mkdir -p tmp && cd tmp && git clone git@github.com:ken-aio/ken-aio.github.io.git
	rm -fr $(GITHUB_DIR)/*
	cp -fr public/* $(GITHUB_DIR)/
	cd $(GITHUB_DIR)/ && git config --local user.name ken-aio && git config --local user.email suguru.akiho@gmail.com
	cd $(GITHUB_DIR)/ && git add . && git commit -m "publish" && git push origin master
	rm -fr $(GITHUB_DIR)

ポイントとしては、CircleCIとGithubのSSHキーの設定をするので、pushするためのリポジトリはhttpじゃなくてsshで設定しておくことですね。
それ以外はビルドしてpushしているだけです。

yaml

CircleCIは設定にyamlを使います。
今回の内容はとてもシンプルで

git checkout
hugoインストール
ビルド
成果物をmasterにpush

だけをCircleCIにやってもらってます。
基本機能として、ブランチへのpushをトリガーにビルドパイプラインが動きます。

↓が今回設定したyamlです。
~~※ hugoのコマンドをキャッシュしてキャッシュがなかったらインストール、にしたかったのですが、これはやれておらず…~~
1/17追記:

CircleCI で使える Hugo の Docker image があります。https://t.co/Iu2H4s06kn
— iris ʕ◔ϖ◔ʔ Hugo 布教中 (@piris314) January 16, 2019

こちらのbase imageを使うように修正しました。
@piris314さん、ありがとうございます！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


version: 2
jobs:
  deploy:
    working_directory: ~/workspace
    docker:
      - image: cibuilds/hugo:0.53
    environment:
      - GOCACHE: "/tmp/go/cache"
    steps:
      - checkout
      - add_ssh_keys:
          fingerprints:
            - "ae:a5:cb:56:aa:65:2a:f8:38:c4:2a:62:c1:0e:22:2a"
      - run:
          name: deploy
          command: make deploy

workflows:
  version: 2
  build:
    jobs:
      - deploy:
          filters:
            branches:
              only: blog

ポイントは fingerprints の部分です。

git push用の鍵設定

cloneするためのdeployキーはボタン一発とても簡単に作れたのですが、push用の鍵はちょっとだけ設定が必要でした。
まずはCircleCIのページにて、ビルド設定するリポジトリの設定画面に移動します。
そこに SSH Permissions という項目があるので、この画面を開きます。
※ Checkout SSH Keys ではないので注意

その画面の右上の Add SSH Key でGithubに設定しているSSHのprivate keyを入力します。
Hostは github.com です。

これで設定は完了です。
この設定をすると、fingerprintsが表示されるので、それをCircleCIの設定ファイルの fingerprints に設定します。
※ この設定をするまで、CircleCIのビルドでデプロイする際に権限がないと言われてpushできなくてちょっとハマりました…

これでblogブランチにpushされるとCircleCIで自動ビルドが走ってブログ記事が公開されるようになりました。

やったね！

まとめ

CircleCIで自動ブログ公開環境が出来ました。
こんな素晴らしいサービスが利用出来て、ホントに感謝です！

それではまたナニカ書いていきます。

CircleCIでHugoのブログを自動公開する

Contents

はじめに

構成

CircleCIの設定

Makefile

yaml

git push用の鍵設定

まとめ