以前、はてなブログからHugoを使ったサイトに移行したことを書いた。
こちら参照：はてなブログからHugoに移行。その際に行ったあれこれ。
今回、Hugoで記事を更新してからデプロイまでの流れをWerckerを使って自動化したので紹介する。
概要
今までは下記のフローでデプロイを行っていた。
一部シェルスクリプトにして自動化していたが、hugoファイルを管理するレポジトリとGithub Pages用の
２つのレポジトリへのコミットが必要で手間がかかっていた。
- hugoファイル側で記事更新、デザイン変更
- 更新のコミット、プッシュ
hugoコマンドでビルド/public以下のファイルをgithub pages用のレポジトリへコピー- github pages用レポジトリーへ移動してコミット、プッシュ
- CloudFlareのキャッシュ削除
このフローをWerckerを利用して下記のように変更した。
- hugoファイル側で記事更新、デザイン変更
- 更新のコミット、プッシュ
- Werckerでビルド
- Werckerでビルド結果をGithub pages用レポジトリへプッシュ
- WerckerでCloudFlareのキャッシュ削除やSlack通知
Werckerを使っていわゆるCI/CDのフローを組むことで、
hugo側のファイル・レポジトリ管理をするだけでよくなった。
werckerの設定
wercker.yml
まず、wercker.ymlから記述する。
Werckerを利用するには自分のレポジトリにwercker.ymlを配置する必要があり、
このファイルに記述のとおりに自動化処理を行わせる。
本記事ではWerckerの細かい話は割愛するが、以下がwercker.ymlだ。
box: debian
build:
steps:
- install-packages:
packages: git
- script:
name: download theme
code: |
$(git clone https://github.com/dplesca/purehugo ./themes/purehugo)
- arjen/hugo-build:
version: "0.20"
theme: purehugo
flags: --buildDrafts=false
after-steps:
- slack-notifier:
channel: $SLACK_CHANNEL
url: $SLACK_URL
username: wercker_bot
deploy:
steps:
- install-packages:
packages: git ssh-client curl
- leipert/git-push:
gh_oauth: $GIT_TOKEN
repo: mosuke5-lab/mosuke5-lab.github.io
branch: master
basedir: public
gh_pages_domain: blog.mosuke.tech
after-steps:
- script:
name: delete cloudflare cache
code: |
sh ./scripts/delete_cache_all.sh ${CF_ZONE_ID} ${CF_EMAIL} ${CF_KEY}
- slack-notifier:
channel: $SLACK_CHANNEL
url: $SLACK_URL
username: wercker_bot
ビルド時のhugoバージョンはきちんと書く
wercker.ymlを書く際に注意する点の１つがhugoバージョンの明記だ。
以下部分のversionは、自分のローカルの環境のHugoバージョンときちんと合わせるとよい。
公式ドキュメントを参考にしてこの環境を作ったが、はじめドキュメントのままコピペで行っていたので、一部ビルド結果が本番環境だけ異なることがあり、はまった。
Automated deployments with Wercker
- arjen/hugo-build:
version: "0.20"
theme: purehugo
flags: --buildDrafts=false
デプロイは’leipert/git-push’を使った
公式ドキュメントではlukevivier/gh-pagesの利用を紹介している。
しかし、現状Github pagesはmasterブランチのコードをビルドするようにできている。
このツールではどうしてもgh-pageブランチにデプロイするため、用途と合わなかった。
（自分がなにか間違っているだけな気もするが。。。）
あと、lukevivier/gh-pagesではデプロイのコミットログが残らない。
その点でもleipert/git-pushはかなりおすすめ。
CloudFlareのキャッシュ削除
Github Pagesの前段にCloudFlareを利用している。
CloudFlareのキャッシュ削除は、以前に作ったシェルスクリプトをそのまま実行する形をとった。
参考：CloudFlare APIを使ってキャッシュを削除する
werckerの設定
wercker.ymlを配置しただけでは適切にCI/CDプロセスを実行することは実はできない。
wercker側でワークフローを定義する必要がある。
今回は、buildとdeployの2つに分けてワークフローを定義した。
- build: デプロイする静的ファイルの生成
- deploy: 生成したファイルの本番環境へのデプロイ
- masterブランチに変更があった時だけ実行
- deploy後の後処理も実行
