[Hugo] werckerを使って記事の公開を自動化する１

2016-08-24

Hugoの記事を公開する

下記の記事にも書いた通り、hugoの記事は下記の手順で公開している。

Hugoの元になるプロジェクトはmm-git/hugoにpushする。(以下元プロジェクトと呼ぶ)
pushを検出して自動でHugoコマンドを実行し、publicフォルダを作成する。
publicフォルダを公開プロジェクトmm-git/mm-git.github.ioにpushする。
記事が自動的に公開される。

[Hugo] github pagesについて

今回の記事は、hugoコマンドの実行をどうやって自動化するかについて書いている。自動化にはWerckerを利用してみる。なお、このWerckerだが、最近仕様が変わったようで、公式の情報やネットで見つかる情報が古かったりしてハマった。下記の記事が参考になった。

Hugo, github pages, werckerで自動デプロイ 2016/05/12版 · blog.nabetama.com

werckerの使い方

werckerにアカウント作成。
- githubアカウントでログイン可能。今回の記事では特に説明しません。
元プロジェクトにwercker.ymlを追加。
githubで記事push用のPersonal access tokenを作成。
werckerでapplicationを登録。
werckerでdeployのworkflowを追加。
元プロジェクトをpush。

wercker.yml

 1box: python:2.7-slim
 2build:
 3  steps:
 4    - install-packages:
 5        packages: git
 6    - pip-install:
 7        requirements_file: ""
 8        packages_list: "pygments-style-solarized"
 9    - script:
10        name: initialize git submodules
11        code: git submodule update --init
12    - arjen/hugo-build:
13        theme: hugo-uno
14        flags: --buildDrafts=false -v
15deploy:
16  steps:
17    - install-packages:
18        packages: git ssh-client
19    - leipert/git-push:
20        gh_oauth: $GIT_TOKEN
21        repo: mm-git/mm-git.github.io
22        branch: master
23        basedir: public

Box

boxにはhttps://hub.docker.comにあるboxを指定する。
- pip installを使いたいので、boxはpython:2.7-slimにしてみた。
- 少し前まで、wercker directoryにあるboxを使えたようだが現在は使えないみたい。
- Stack Overflowにも同じ質問があったので、回答してみた。

Wercker error 404 during setup environment - Stack Overflow

build

gitやsshなど基本的なものはインストールが必要。- install-packagesの部分に記載する。
- pip-installの部分に、Pythonのインストールパッケージを記載する。このboxはPygmentsはインストール済みみたいなので、pygments-style-solarizedのみインストールしている。
- Pygmentsについては、[Hugo] Syntax highlight参照。
hugoのビルドの前に行いたい処理は、- scriptに書く。上記では、Hugoのテーマをsubmoduleにしているので、その更新処理を行っている。
hugoのビルドはwerckerに登録されているstepを利用する。arjen/hugo-buildというのがそのステップ名。

deploy

buildで作成したpublicフォルダのpushについては、deployのセクションに書く
githubへのpushもwerckerに登録されているstepを利用する。leipert/git-push がそのステップ。
githubへpushするためのtokenは$GIT_TOKENの様に変数にしておく。(これでwercker.ymlが公開レポジトリにpushされても問題ない)

Personal access tokenを作成

werckerからgithubのレポジトリにpushできるように、github上でpush専用のaccess tokenを作成する。

githubのアカウントのSettingsを選択。(レポジトリのSettingではない)
Personal access tokensを選択。
Generate new tokenボタンを押す。
- githubのパスワード確認があるかもしれない。
次の画面で、tokenの名前を入力する(名前は何でも良い)。public_repoにチェックを付けて、下のGenerate tokenボタンを押す。
次の画面でtokenが表示される。tokenが表示されるのはこの時１回きりなので、忘れずにコピーしておく。

werckerでapplicationを登録

画面上部の+ Create ▼ボタンをクリックし、applicationを選択する。
① Choose a repositoryで元プロジェクトのレポジトリを選択する。
- githubでアカウントでログインしていれば、githubに接続済みのはず。
② Configure accessではwercker will checkout the code without using an SSH keyを選択したままでOK。
③ Awesome! You are all done!では、Buildの様子などを他人に見られたくなければそのままでFinishを押す。

werckerでdeployのworkflowを追加

werckerで登録したapplicationを選択する。
- 画面上部の`Applications(w)を押すと、作成済みのApplication一覧が表示される。その中から先ほど作成したものを選択する。
workflowタブを選択する。
画面中程のAdd new pipelineを押す。
下記のように入力する。特にYML Pipeline nameは、wercker.ymlのpipeline名と合わせておく必要がある。Hook typeはDefaultのままでOK。
次の画面でEnvironment variableを入力する。キーはGIT_TOKEN(wercker.ymlに書いた変数名)。値は、githubで登録しておいたPersonal access tokenを入力する。誰にも見られないようにProtectedのチェックを忘れないようにする。最後にAddボタンを押す。
workflowの画面に戻る。buildの横の+ボタンを押して、先ほど作成したdeployを追加する。branchはmasterにする。下記の様になればOK。

※この画面は何度かデザインが変更されているので、上記の説明は当てはまらないところがあるかもしれない。

元プロジェクトをpush

上記の設定で問題がなければ、元プロジェクトのpushをトリガにwerckerでのHugoのビルドと記事のデプロイが行われる。

終わりに

今回のwercker.ymlだと、元プロジェクトのpushから記事が配信されるまでに結構な時間がかかる(数分〜十数分)。現状はこれをもう少し短縮できているので、別途記事に書きたいと思う。また、wercker.ymlが正しいかどうかをローカル環境で確認する方法についても書く予定である。