Hugo + Firebase Hosting + GitHub Actionsでブログを作る

新しくブログを作成したのでその時の構成のメモ。 基本的にすべて無料枠の範囲内でできるはずなのでオススメ

静的サイトジェネレータ

ジェネレーターは「Hugo」を利用した。

Hugo

Go製の静的サイトジェネレータでQuick Startをやるだけですぐに使えるようになる。 細かい設定やテーマなどは後回しにした

Quick Start

ホスティング

サイトのホスティングはFirebase Hostingを利用した GitHub Pagesでも良かったがパブリックリポジトリに限定されることや色々な制限があるので使い慣れているFirebase Hostingを利用した。

Firebase Hosting を使ってみる

Firebase CLIが入っていれば

firebase init
firebase deploy

とかやればいい感じにdeployされる 独自ドメインの設定もFirebaseのWebからよしなにやるだけで設定できる

自動デプロイ

GitHub Actionsを利用してGitHubにPushするだけで記事が自動的に反映されるようにした。 設定ファイルはこのようになっている

name: deploy firebase hosting
on:
  push:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.74.3"
      - name: Build
        run: hugo --minify
      - uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

流れとしてはGitHubのmasterにPushしたらHugoのBuildしFirebase HostingにDeployする

FirebaseのFIREBASE_TOKENは

firebase login:ci

とすると取得できるのでこれをGitHubのsecretsに置いておけば良い。