Hugoでウェブサイトを構築する

このサイトは静的サイトジェネレータである「Hugo」でウェブサイトを構築します。

Hugoの使い方は、「ドキュメントのQuick Start」を読むことでだいたいは分かるのでドキュメントを読むのが一番いいと思います。

Hugoのテンプレートを選びます

Hugoのテンプレートは「テンプレートの一覧」があるので自分にあうテンプレートを選んでサイトを構築します。
このブログでは「PaperMod」を使っています。

Hugoのサイト構築

hugo new site [サイト名]

Hugoテンプレートの追加

Quick Startやっているanankeのテンプレートを適用している方法です。

cd [サイト名]
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Hugoのコンテンツの追加

以下のコマンドでコンテンツを作ると「content/posts/first.md」が作成されます。
対象ファイルのMarkdownを編集する。

hugo new posts/first.md

Hugoをローカルでテストする

以下のコマンドでドラフトの記事もローカルサーバーとして構築する。
http://localhost:1313 で接続できます。

hugo server -D

Hugoでウェブサイトを生成する

以下のコマンドを実行すると「public」以下にウェブサイトが構築されます。

hugo

Firebase Hostingでウェブサイトを配信する

Firebase Hostingを使って作成したウェブサイトを配信します。

Firebase Hostingのメリット

Firebase Hostingでウェブサイトを配信するには以下のようなメリットがあると思います。

  • コマンドで簡単にデプロイできる
  • SSLが無料で使える
  • CDNがデフォルトで使われる
  • デプロイするとCDNのキャッシュが自動的にクリアされる
  • 独自ドメイン利用可能
  • 無料枠がある

Firebase Hostingのプロジェクトの設定を初期化する

以下のコマンドでFirebase Hostingの設定を追加します。
これで、firebaseのプロジェクトの選択とGithubとの連携が行えます。

firebase init hosting

.gitignoreも無ければ作成してくれます。

以下のような内容を聞かれます。

  • firebaseのどのプロジェクトに接続するか？
  • どのディレクトリを公開するか？
  • Single Page APPで全てのURLをindex.htmlにrewriteするか？
  • 自動的にGitHub Actionsでのビルドとデプロイの設定を行うか？(デフォルトがNoなのでyを指定しないとGithubの設定がされないので注意)
  • 対象のリポジトリを指定する(自動で対象リポジトリのSecretが設定されます)
  • GitHub Actionsのworkflowの設定
    • デフォルトブランチへのpush時
    • Pull Requestの作成、push時
  • Pull Requestマージ時に自動でliveチャンネルにデプロイするか？
  • liveチャンネルにデプロイするブランチ名の指定

既にFirebaseのプロジェクトの初期化が済んでいた場合は、以下のコマンドでGitHubの設定のみ設定できます。

firebase init hosting:github

GitHub Actionsファイルの修正

作成されたGithub Actionsはデプロイを行うことしかしないのでHugoでのビルドを設定します。
Github Actions用の設定ファイルは以下のファイルが作成されます。

.github/
└── workflows
    ├── firebase-hosting-merge.yml
    └── firebase-hosting-pull-request.yml

このファイルにHugoのビルドを設定を追加します。
Hugoのビルドはpeaceiris/actions-hugoのアクションに任せます。

  1. チェックアウト時にサブモジュールを取得するように設定を追加
  2. Hugoのセットアップを追加
  3. Hugoのビルドを追加
      #　〜　略　〜
      - uses: actions/checkout@v2
      # チェックアウト時にサブモジュールを取得するように設定を追加
        with:
          submodules: true
          fetch-depth: 0

      # Hugoのセットアップを追加
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.80.0'

      # HugoのBuildを追加
      - name: Build site
        run: hugo

      # Firebase Hostingへのデプロイ
      - uses: FirebaseExtended/action-hosting-deploy@v0
      #　〜　略　〜

これでGitHubのデフォルトブランチにpushするかPRをマージすることで、Hugoでビルドしたウェブサイトが自動でFirebase Hostingにアップされます。

独自ドメインとSSLの設定

Firebase Hostingから「カスタムドメインを追加」を押下してドメインを指定します。
そうするとAレコードを設定する内容が表示されるので設定します。（Google Domainで取得したドメインだとAレコードを設定するだけで大丈夫です）
対象のDNSに設定すると、24時間以内にSSLの設定も自動でされます。（もしされない場合は設定のどこかが間違っています）