Hugoでビルド結果ををS3にあげるのがだるいので、CircleCIにやらせることにします。

この記事ではS3へのアップロードまでを書きます。

S3で静的サイトをホストする方法や独自ドメインでアクセスさせる方法はここでは書きません。 （ググればいろいろ出てきます）

前提知識

Hugoでブログ記事をビルドする方法

Githubレポジトリを準備

ブログ用のレポジトリを作ります。

編集履歴自体を世に公開したくなかったので、今回はprivateで作りました。

利用するthemeをsubmoduleとして追加

利用するテーマをthemes以下にsubmoduleとして追加します。

単純にgit cloneしただけだと、CircleCI上でpullしたときに中身が空になりビルドが出来ません。

もしhugo-cactus-themeを使うのであれば、

$ cd themes
$ git add submodule https://github.com/digitalcraftsman/hugo-cactus-theme

です。

S3アップロード用のアクセスキーを発行

AWSの管理コンソールで、CircleCIでブログをビルドするためのIAMユーザを作成し、アクセスキーIDとシークレットアクセスキーを生成します。

生成時の画面以外ではアクセスキーを取得できないなるので、タブを開きっぱなしにするか、ダウンロードしておきます。

ポリシーの作成

ブログ用のS3バケットに対して以下の権限を持ったポリシーを作成します。

"Action": [
  "s3:ListBucket",
  "s3:PutObject",
  "s3:DeleteObject"
]

awscliのsyncによる同期時に、同期元に存在しないファイルを削除するためにDeleteObject権限を つけています。

Resourceには、バケット自身とバケット内のリソース全てを指定します。

Resource: [
  "arn:aws:s3:::ブログ用バケット",
  "arn:aws:s3:::ブログ用バケット/*"
]

CircleCIにプロジェクトを追加

CircleCIの画面上からブログ用のレポジトリをプロジェクトに追加します。

circle.ymlを作成

レポジトリのルート直下にcircle.ymlを作成して、以下のように記述します。

machine:
  timezone: Asia/Tokyo     

checkout:
  post:
    - git submodule update --init

dependencies:
  pre:
    - go get -v github.com/spf13/hugo
    - pip install awscli

test:
  override:
    - hugo

deployment:
  master:
    branch: master
    commands:
      - aws s3 sync public/ s3://バケット名/ --delete

テーマをsubmoduleで管理しているので、チェックアウトの後処理でsubmodule udpate --initを実施します。

hugoコマンドによるビルドはtestコマンドとしています。デプロイの一部として扱う事もできますが、testの設定が ないとCircleCI上ではNO TESTSとしてエラー扱いになってしまいます。 S3へのアップロード自体は出来るのですが、CircleCIの結果一覧で赤くなるのは気分が良くないのでtestでビルドするようにしています。

masterブランチの時だけ、awscliのsyncコマンドを使ってビルド結果が出力されるpublic以下をブログ用のバケットに同期させます。

AWSの権限設定

Project Settings -> AWS Perissionsに、作成したIAMユーザのアクセスキーを設定します。

ビルド

ここまでやったら、記事がなくても一旦pushしてみましょう。 設定に問題がなければ、S3上のバケットにビルド結果がアップロードされているはずです。