Hugo + Wercker + S3で軽い感じのブログにした

ぼくのような小規模・中規模案件がメインなフロントエンドエンジニアだと、CI環境を構築するなんてことはないんですが、これは覚えておいて損はないと感じたので「Wercker」をいじってみることにしました。

WerckerとはCIツールで、GitHubへのコードのPushをフックしてアプリケーションのテスト、ビルド、デプロイを自動でやってくれたりします。他にもTravis CIとかいくつかあるようなんですが、プライベートリポジトリも無料で使えるのは2015年9月現在、Werckerだけのようです。

で、「責任なく自由に、かつモチベーションを保ちながら作業できる成果物」でおなじみの個人ブログで、この目的を達成してみることにしました。

WordPressはいや

仕事でWordPressを使うことはよくありますが、なんやかんや考えることが多くて面倒なので個人のブログでこれを選定するのはできれば避けたいところでした。
それ以外の選択肢を見てみると、最近は「静的サイトジェネレータ」を使って、Markdownから静的なHTMLを生成するってのが幸せそうな感じ。

  • Jekkyl
  • middleman
  • Hexo
  • Metalsmith

こんな感じの選択肢があがりましたが、Go言語で出来てるHugoがビルド最速らしいので、Hugoを使うことにしました。

こういう構成が一番楽そう

結局、

Hugoでテンプレートを自作して、bitbucketのプライベートリポジトリで管理
↓
記事のMarkdownを書いてプッシュ
↓
WerckerでHugoビルド後、S3にデプロイ

という構成にすることに。

やってみた

この記事を参考にさせてもらいました。特に困ることはなかったですが、一つつまづいたとこがあったので、以下ご参考までに！

wercker.yml

box: wercker/nodejs
build:
  steps:
    - npm-install

    - script:
        name: assets build
        code: |
          npm run build

    - arjen/hugo-build:
        version: "0.14"

deploy:
  steps:
    - s3sync:
        key-id: $KEY
        key-secret: $SECRET
        bucket-url: $BUCKET
        source-dir: $SOURCE

上記のwercker.ymlで落ち着きました。Werckerで用意されてるステップのおかげで、だいぶすっきりしてます。npmのビルドタスクがあるのは、coffeeとかstylusとかを先にgulpでコンパイルしているため。
このgulpのタスクを、はじめ「gulp bulid」とそのまんま書いていてうまく行かなかったんですが、そういえばgulpってグローバルにインストールしないといけないじゃんと気づき、node_modules/.bin から使えばいいのかなと調べてたら、

package.json で”script” を “npm run” で実行する場合は、パスが自動で通る

らしかったので、”npm run build” のなかにgulpのビルドタスクを書いておく形にしたらうまくいきました（Hugo関係ないですね）。

やってみて

とてもしあわせです。

静的サイトジェネレータは、できることが限られている分かなり簡単に扱えるし、場合によっては案件でも活かせる感じがします。このくらいのめちゃシンプルテーマは一時間半くらいで作れました。
また、Hugoにはライブリロード機能がついてるので、gulpのwatchタスクと組み合わせて使うと、爆速で編集できてかなりいい感じです。

Werckerに関しては、本当はテスト書いとくと真価を発揮するものなのでしょうが、プッシュしたら勝手にビルド/デプロイしてくれるだけでも、感謝の気持ちでいっぱいです。

今後テーマをパワーアップしていく予定ですが、せっかくなんでHugoのテンプレート/テーマ編集に関してもまた書きます。

おわり🐶