ブログ(HUGO)のビルドとデプロイをCircleCIで自動化した

Kazuki Koide

September 30, 2018

このブログはHUGO(ヒューゴ)というブログ構築のためのフレームワークを使っている。HUGOで記事を作成する手順はWordPressなどのブログサイトとは異なり、PC上で静的なHTMLやCSSを生成してから、それをWebサーバにアップロードする必要がある。このブログの場合はGitHub Pagesを使っているので、Webサーバを用意しなくてもGitHubにPushすれば公開される仕組みになっているが、いずれにせよ一手間がかかる。これまでは Host on GitHub | Hugo を参考にサイトの生成とGitHubへのPushをシェルスクリプトで自動化していたが、それだったらCIツール使えばいいじゃんってことで、CircleCIでブログのデプロイを自動化することにした。

自動化の過程

ブログの生成元となるリポジトリは非公開にしたかったのでBitbucketを使っている(GitHubはプライベートリポジトリが有料なので)。Hugo + Bitbucket + CircleCI で GitHub Pages に自動デプロイ | shotarok’s Tech Blog で既に同じ構成で自動化している人がいたのでこれを参考に構築した。ただし設定ファイルがCircleCI 1.0のものだったので、 Auto Deploy Hugo by Circle CI 2.0 - taikii blog を見ながらCircle CI 2.0を使った設定にした。Circle CIからGitHubにSSHアクセスする必要があるので、事前に鍵ペアを作成して、公開鍵をGitHubに秘密鍵をCircle CIにそれぞれ登録しておく必要があった。あとデプロイ結果をメールで確認するのが面倒だったので、CircleCI | Slack App ディレクトリ を使ってSlackで通知するようにした。

.circleci/config.yml

version: 2
jobs:
  build:
    docker:
      - image: cibuilds/hugo:latest
        environment:
          TZ: Asia/Tokyo

    working_directory: ~/blog
    steps:
      - checkout

      - run:
          name: "Setting for Git"
          command: |
            git config --global user.name "koirand"
            git config --global user.email "koirand.jp@gmail.com"

      - run:
          name: "Up to date themes"
          command: |
            git submodule sync
            git submodule update --init --recursive

      - run:
          name: "Get GitHub repository"
          command: git clone git@github.com:koirand/koirand.github.io.git public

      - run:
          name: "Build & Push"
          command: |
            hugo
            cd public
            git add .
            git commit -m "rebuilding site `date '+%Y-%m-%d'`"
            git push origin master

ビルド結果はこんな感じ。14秒くらいかかった。

2019-03-02 追記

GitHubのプライベートリポジトリが無料化されたので、ブログのリポジトリをGitHubに移行した