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

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

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

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

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

Hugo

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

という理由から。

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

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

参考リンク

Firebase

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

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

Firebase の設定

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

  1. Firebase CLI のインストール

  2. Google アカウントとの連携

  3. Firebase プロジェクトの作成

  4. 公開するブログの設定

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

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

firebase login:ci

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

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

CircleCI

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

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

1.0 と 2.0 の違い

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

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

CircleCI の設定

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

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

今回は CircleCI の実行環境として使う Docker Image も  自前で用意することにしました。 用意したとは言ってもHugoFirebase 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 上で 公開しています。

最後に 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が気になっているので、時間が空いた時に試してみたい。

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

comments powered by Disqus