俺イケ!!!

俺よりイケてないエンジニアはいない

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

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.」のチェックは入れないようにします。 GitHubbitbucketだとリポジトリの指定も簡単だし、deploy keyを入れてリポジトリにアクセスできるようにしてくれるので便利。

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

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

AWS S3

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

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

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

DNS

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

仕上げ

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

wercker

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

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

次はDeploy targetsを設定します。HerokuOpenShiftであれば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作ろうかとは思ってます。

6 Aug 2015 #blog