blog の環境を Hugo + wercker + s3 にしてみた

最近 CI を触る機会があるというのとGitHub Pagesの設定をいじっていたら名前解決のところのトラブルでイライラしたのでAWS S3に乗り換えたというメモです。

まずは手前で使う CI ですが、Hugo との組み合わせで割と使ってる事例が多いって安直な理由でとりあえずwerckerを使ってみることにしました。参考記事としてdeeeet さんの記事をめちゃ読みました。ほんと先人には感謝ですね。
また、Hugo+wecker+GitHub Pages の組み合わせですがm0t0k1ch1 さんの記事も参考にさせていただいております。
あと Hugo へはすでに移行済みblog を octopress から Hugo に乗り換えたメモなので興味がございましたらこちらもご覧ください。それでは各項目で何をしたかザッと書いていきます。

準備

リポジトリ

まずリポジトリですが、元となる md ファイルをオープンにしたくなかったのでbitbucketのプライベートリポジトリを使うことにしました。ディレクトリ構成はこんな感じです。

.
├── archetypes    //md ファイルのフォーマット
├── config.toml   //Theme の設定ファイル
├── content
│   └── post      //md ファイル
├── public        //Hugo で build したファイルが置かれる、リポジトリで管理しないので ignore してる
├── static        //画像もろもろ
│   ├── assets
│   └── images
│       └── post  //記事に使う画像置き場
├─── themes       //好きな theme を git submodule で配置
└─── wercker.yml

Hugo

CI 回すまでは手動で build して public ディレクトリに出来た生成物を GitHub Pages 用リポジトリに push するみたいなのやってました。今は新しい記事の作成とローカルで記事のプレビューに使ってるくらいです。

wercker

冒頭でも書きましたがwerckerを今回は使っています。 CircleCIでもよかったのですが、こちらは業務で使う機会があったというのもあり採択しませんでした。それでは wercker の準備ですが、サクッと SignUp したらApplicationsから Application を作っちゃいます。注意点としては筆者の wercker.yml で指定している box は docker 用ではないので「Docker enabled. See our stacks documentation for more details.」のチェックは入れないようにします。 GitHubやbitbucketだとリポジトリの指定も簡単だし、deploy key を入れてリポジトリにアクセスできるようにしてくれるので便利。

あとは用意した wercker.yml をリポジトリに突っ込みます。以下が用意した yml です。

他の CI もそうですが yml 見ればどの CI 使ってるのかがわかっていいですね。 box や step はExploreにいろいろ置かれているので必要なものを組み合わせればすぐに使い始められて便利。

AWS S3

普段 AWS を使ってないのであれば AWS アカウントから作成するのは少々手間ですね…（筆者も今回のために個人の AWS アカウントを作りました）
この辺りの説明は割愛するとして、環境準備の大まかな流れは

S3 でドメインと同名の bucket を作成、site の hosting を有効にして index document:index.html にしておく
作成した bucket に deploy するための IAM アカウントを作成する
deploy できる権限の policy を作成する
作成した IAM アカウントに作成した deploy 用 policy をアタッチする

となります。ちなみに IAM でアカウントを作成した際に ID と SECRET が発行されますが、これは wercker に設定するので控えておきます（後ほどでも ID/SECRET は発行できます）。

DNS

S3 で bucket を作成すると endpoint が表示されるのでそちらに向け先を変えておく。

仕上げ

ここまでが下準備となります。ここからは準備したものを流れに沿って設定していきます。

wercker

Application > Setting > Environment variables より、wercker.yml で使う環境変数を設定します。

KEY,SECRET は AWS の IAM アカウント作成時に発行した ID/SECRET を入れます。
BUCKET は S3 で作成した bucket に s3://付けておきます。
SOURCE は S3 に突っ込むディレクトリを指定します。Hugo の場合だと Build 時に public ディレクトリに生成してくれるのでそれを指定しておきます。

次は Deploy targets を設定します。HerokuやOpenShiftであれば API Key や Token を入れるだけでよしなに Deploy してくれるようですが、それ以外の場合は yml にて Deploy の step でどうにかする感じです。 Build が成功すると「Deploy to」というのが出てきて deploy 先を選択しないと deploy されないので target 名と branch を入れて deploy 先を作っておく。

後はリポジトリに md ファイルを push してやれば自動で blog に投稿できる！！！！！という算段です。
今回は必要に迫られたのでAWS S3を使用したのですが、最終的にはGoogle Cloud Storageに移行したいので GCS 用 step 作ろうかとは思ってます。