Hugo + CircleCI + Firebaseでブログを作りました

自身の備忘録としてブログを作りました。

Static site generator の hugo を使い、firebase 上で公開しています。

ソースコードは bitbucket のプライベートリポジトリで管理して、push すると CircleCI により hugo のビルド、firebase へのデプロイが動くようにしています。

最初の投稿となる今回は、上記の構成に決めた理由と作業手順を残していくことにします。

Hugo

Static site generator の中から Hugo を選んだのは、

StaticGenの中で評価が高い
最近勉強を始めた Go 言語製

という理由から。

テーマは、Slimを使うことにしました。

hugo に関する作業手順はすでに多くの方が公開されているので、参考にしたリンクを載せて手順自体は省略することに。

参考リンク

Firebase

Firebase で公開することにしたのは、

独自ドメインでの SSL
グローバル CDN

が無料(SPARK プラン)で利用できるという理由から。

Firebase の設定

Firebase を使うにあたり必要となる設定の流れは以下のようになります。

Firebase CLI のインストール
Google アカウントとの連携
Firebase プロジェクトの作成
公開するブログの設定

こちらの記事に詳しくやり方が書かれており、そのままなぞるだけで設定ができました。

上記の 1 から 4 までを行うだけでブログの公開まで可能ですが、CI ツールを使う場合はもう一つ Firebase での設定が必要になります。

Firebase token の発行

firebase login:ci

上記コマンドを実行して発行されるトークンをコピーしておき CI ツール上に登録します。

実際の連携方法は、次項の CircleCI の設定のところで書きます。

CircleCI

CI ツールには CircleCI を選びました。

今まで使ったことのない CI ツールを試してみたかったのが一番の理由ですが、7 月に v2.0 がリリースされたばかりのようで作業ログを残すことに意味がありそうだと思ったこともあり CircleCI に決めました。

1.0 と 2.0 の違い

CircleCI のバージョン間での大きな違いとしては以下の 2 点があるようです。

実行環境の変更
Workflow の導入

1 つ目の実行環境の違いについては、2.0 からテストの実行が Docker コンテナ上で行われるようになったようです。 2 つ目の Workflow の導入により、複数のジョブを並列で実行することが可能になったようです。

CircleCI の設定

CircleCI の設定と合わせて hugo と firebase-cli が入った Dockerfile も作成しました。

Firebase のトークンを CircleCI に登録

先ほどコピーしておいた Firebase token をBUILD SETTINGS > Environment Variablesに登録します。今回はFIREBASE_TOKENという名前で登録しました。

Dockerfile の作成

今回は CircleCI の実行環境として使う Docker Image も自前で用意することにしました。用意したとは言ってもHugoとFirebase CLIが入っただけのシンプルなものです。ベースには公式のnode イメージを使いました。実際の Dockerfile は以下のようになりました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


# use latest Node (alpine)
FROM node:alpine

# set hugo version
ENV HUGO_VERSION=0.23
ENV HUGO_DOWNLOAD_URL=https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz

RUN apk add --update --no-cache --virtual build-dependencies

RUN apk add --update --no-cache \
        bash \
        build-base \
        ca-certificates \
        git \
        libcurl \
        libxml2-dev \
        libxslt-dev \
        openssh \
        rsync \
        wget && \
     wget "$HUGO_DOWNLOAD_URL" && \
     tar xzf hugo_${HUGO_VERSION}_Linux-64bit.tar.gz && \
     mv hugo /usr/bin/hugo && \
     rm -r hugo_${HUGO_VERSION}_Linux-64bit.tar.gz && \
     rm -r LICENSE.md && \
     rm -r README.md && \
     npm -g config set user root && \
     npm install -g firebase-tools && \
     apk del build-dependencies && \
     rm /var/cache/apk/*

EXPOSE 1313

Dockerfile を作成する中で、node のバージョンが 8.x ではnpm install -g firebase-toolsがうまく実行されず少しハマりました。調べてみると以下の情報が出てきました。

No access permission error with npm global install on docker image

Dockerfile にあるように直前でnpm -g config set user rootを実行することで解決しました。どうやら npm でグローバルにモジュール追加する際の実行ユーザの問題のようでした。

今回作成した Dockerfile を Docker hub 上で公開しています。

config.yml の作成

最後に CircleCI の設定ファイルを書いていきます。 v2.0 からはプロジェクトルートに.circleci/config.yml を用意します。実際のconfig.ymlは以下のようになりました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


version: 2
jobs:
  build:
    docker:
      - image: jnyo/docker-hugo-firebase:latest
    working_directory: ~/project
    steps:
      - checkout
      - run:
          name: "Run Hugo"
          command: hugo -t slim
      - deploy:
          branch: master
          command: firebase deploy --token "$FIREBASE_TOKEN"

今回は Hugo でのビルド先と Firebase のデプロイ対象ディレクトリをともにpublicにしています。

このブログでは.firebaserc内でプロジェクト ID を指定していますが deploy コマンドのオプションとして渡すことも可能です。その場合は、token と同じようにEnvironment Variablesに登録しておくと便利です。

また、hugo の theme もリポジトリに含めているのでhugo -t slimで実行しています。

まとめ

今回は、このブログの構成と環境構築についてまとめました。

運用していくうちにより良い構成がありそうだと感じたら、現在の構成にこだわらず色々試していこうと思います。

すでに Hugo の公式ドキュメントで紹介されているNetlifyが気になっているので、時間が空いた時に試してみたい。

とりあえずブログ書いていく環境ができたので、作業ログをどんどん残していこうと思います。

draft