以前、はてなブログからHugoを使ったサイトに移行したことを書いた。
こちら参照：はてなブログからHugoに移行。その際に行ったあれこれ。

今回、Hugoで記事を更新してからデプロイまでの流れをWerckerを使って自動化したので紹介する。

概要

今までは下記のフローでデプロイを行っていた。
一部シェルスクリプトにして自動化していたが、hugoファイルを管理するレポジトリとGithub Pages用の
２つのレポジトリへのコミットが必要で手間がかかっていた。

1. hugoファイル側で記事更新、デザイン変更
2. 更新のコミット、プッシュ
3. hugoコマンドでビルド
4. /public以下のファイルをgithub pages用のレポジトリへコピー
5. github pages用レポジトリーへ移動してコミット、プッシュ
6. CloudFlareのキャッシュ削除

このフローをWerckerを利用して下記のように変更した。

1. hugoファイル側で記事更新、デザイン変更
2. 更新のコミット、プッシュ
3. Werckerでビルド
4. Werckerでビルド結果をGithub pages用レポジトリへプッシュ
5. 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つに分けてワークフローを定義した。

1. build: デプロイする静的ファイルの生成
2. deploy: 生成したファイルの本番環境へのデプロイ
   1. masterブランチに変更があった時だけ実行
   2. deploy後の後処理も実行