Hugoでブログをサクっと作った話

2023-05-03 - #hugo #css #github-pages #github-actions #cloudflare #dns

作ってみたのでその作業ログを置いておきます

まずサイトを作る

特に意識したいポイント

書きたいときにすぐ書ける環境 を作る
とにかく まず作る、完成させる、公開する
- 気合入れて テーマや機能をいじりすぎない ことが重要

利用するツール・サービス

静的サイトジェネレータ: Hugo
ホスティング: GitHub Pages
CI/CD: GitHub Actions
- 実は以前使ったことのある CircleCI を使う予定だった
- 慣れたCircleCIよりもGitHub Actionsの方を試してみたいと思いこちらを採用

Hugoテーマを選ぶ

下記2つが気に入った
- Manis | Hugo Themes
  - サンプル: https://www.musclesofquartz.com
  - チャット機能の Disqusとutterances (軽量なコメント系ウィジェット)対応
  - 前後記事へのリンク 付き
- ink-free | Hugo Themes
  - サンプル: https://chollinger.com/blog/
  - 各記事リンクごとに タグ表示アリ なのがgood
    - ただ、サンプルサイトの各タグからのリンクが間違っててblog/tags/がtags/にリンクされて404エラーになる
  - こっちも Disqus 対応らしい

今回は Manis を使ってみることにした

ローカルでHugoサイト新規作成

Hugoはインストール済みなのでインストール方法は省略

下記コマンドをターミナルで実行するだけ
- Hugoサイトの名前はmyblogにした
- テーマのインストールはgit submodule addで行った
  - cloneでやるとGitHub Actions(後述)のデプロイ時にエラーになる

$ cd PATH_TO_HUGO_DIR
$ hugo new site myblog
$ cd myblog && git init
$ cd themes
$ git submodule add https://github.com/yursan9/manis-hugo-theme

編集ブランチと機能追加ブランチを分ける

$ git branch -a

  custom-manis
* edit
  main

mainはCI/CDサービスからのpull(fetch)用ブランチ
- このmainブランチのpublicディレクトリに関する変更差分がCI/CDサービスに検知される(はず)
custom-manisは全体に影響するCSS変更やShortcodesなどの機能追加用ブランチ
editは記事の追加・編集・プレビューを行うブランチ
- 機能追加などはcustom-manisからmergeする

サイトの見た目を変える

区切り線が見にくい問題修正
- Manisテーマに元々.sepクラスの<hr>タグがあったのでそれを除外して指定した

/* Custom */
.sep {
  width: 100%;
}
hr:not(.sep) {
  border: dashed 1px #999;
  width: 90%;
}

ヘッダをいじった
- Tagsをヘッダに追加したりタグ同士の隙間を調整したり
シンタックスハイライトを変更
- デフォルトだと Pygments 使ってるがManisでは Highlight.js も標準搭載してるのでこちらを使ってみる
- スタイルは hybrid が一番ダークテーマでもライトテーマでも見やすかった

コピーライト直後の西暦表示を自動生成する

まずPartialテンプレートlayouts\partials\year.htmlを作成

{{ $thisyear := now.Format "2006" }}{{ .Site.Params.Inityear | safeHTML }}{{ if ne $thisyear .Site.Params.Inityear }}-{{ $thisyear | safeHTML }}{{ end }}

次にlayouts\partials\footer.htmlの一部をこのようにした

{{ .Site.Copyright | safeHTML }} {{ partial "year" . }} {{ .Site.Params.Author | safeHTML }}

robots.txtを追加
フォント周りをいじった
- Webフォントとして Segoe UIとInconsolata だけ追加
- (cf.) Segoe UI Web Fonts
テーマのメインカラーを変えた
- 赤系の明るい文字色だとちょっとライトテーマの時に見づらかったので青系に変更
OGP 対応
- サクっと済ませた

これでテーマ弄りは終了

記事を作成する

記事管理の方針

タグやカテゴリごとのディレクトリ管理は 敢えて行わない
- 階層が無駄に深くなって 管理コスト が上がる
- 西暦などをURLに入れたいならslugにYYYY/MM/SLUGと設定すれば良い
  - このとき実ファイルの位置はcontent/posts直下のまま
同じディレクトリでもMarkdownの ファイル名にタイムスタンプを入れる だけで管理しやすくなる(はず)
- 各記事のFront matterにslugを設定しているのでファイル名の規則をYY-MM-DD_HH.mm.ss_SLUGにした
- 例えばこの記事だと下記の通りになる
  - ファイル名が2023-05-03_20.14.06_making-website-with-hugo.md
  - URLが../2023/05/making-website-with-hugo

投稿する記事を用意

まずAboutとLicenseを作成
次に最初の記事などを作成

サイトを公開する

リポジトリ管理の方針

Hugoサイトのファイル群(ソース)は private リポジトリで管理
公開・デプロイ用のリポジトリは public にする
デプロイはGitHub Actionsで自動化
- privateリポジトリにpushすることでpublicリポジトリの方にデプロイされるように

GitHub Actionsで自動デプロイ

最初だけは手動でデプロイしようと思ったがGitHub Actionsでやっちゃった方が早そうなので先にActionsの設定をすることにした

gh-pages.ymlの設定をしていく
- ここのgh-pages.ymlをページ内の指示通りにカスタムして使うことに
  - peaceiris/actions-gh-pages
  - 指示: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-deploy-to-external-repository-external_repository

name: GitHub Pages

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment

jobs:
  deploy:
    runs-on: ubuntu-22.04
    permissions:
      contents: write
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.111.3'

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: roodolv/roodolv.github.io
          publish_branch: main
          publish_dir: ./public
          cname: roodolv.dev

デプロイキーの生成と設定
- ssh-keygenで生成した公開鍵と秘密鍵のペアをそれぞれ下記のようにする
- 公開鍵: デプロイ先のXXX.github.ioリポジトリ(public)の Deploy key に登録
- 秘密鍵: ソースのmyblogリポジトリ(private)の Actions secrets and variables の Secrets に登録
上記設定で 自動デプロイに成功
- CircleCIのそれと似た要領だなと思った

カスタムドメインを設定

独自ドメインを取得

今回は Google Domainsにお世話になることにした
roodolv.devドメインを 1400円(税抜)/年¹ で購入

独自ドメインを設定

参考
- GitHub Pages サイトのカスタムドメインを管理する - GitHub Docs
- GitHub Pages + CloudFlare で独自ドメインをSSL化する
DNSプロバイダの方でレコード設定
- 最初はGoogle DomainsでDNS設定しようと思ったが Cloudflare の方が高機能なのでそっちを使う
Cloudflareにログインして先ほど購入したドメインを入力、DNSのページで下記を Aレコード として登録
- Apexドメインなので

192.30.252.153
192.30.252.154
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

DNSプロバイダ(Cloudflare)のネームサーバ2つをGoogle Domains側で設定

XXX.ns.cloudflare.com
YYY.ns.cloudflare.com

DNSSECの設定をしておく
- まずCloudflare側のDashboardから DNS>Settings>DNSSEC と移動
- Enable DNSSEC みたいなやつをクリック
- するとDS RecordやDigestなどの情報が表示されるのでレジストラ(Google Domains)の管理画面へ行く
- Google DomainsではカスタムDNS設定のすぐ下にDNSSEC設定項目があるのでそこにさっきの情報群を貼り付ける
- 終了

DNSのサーバが切り替わるのを待つ

digコマンドを実行してこうなっていたらまだGoogle Domainsのままなので待機

❯ dig roodolv.dev +nostats +nocomments ns

; <<>> DiG 9.16.16 <<>> roodolv.dev +nostats +nocomments ns
;; global options: +cmd
;roodolv.dev.                   IN      NS
roodolv.dev.            21600   IN      NS      ns-cloud-a3.googledomains.com.
(省略)
ns-cloud-a4.googledomains.com. 238999 IN A      216.239.38.106
ns-cloud-a4.googledomains.com. 239116 IN AAAA   2001:4860:4802:38::6a
(省略)

こうなったらOK

❯ dig roodolv.dev +nostats +nocomments ns

; <<>> DiG 9.16.16 <<>> roodolv.dev +nostats +nocomments ns
;; global options: +cmd
;roodolv.dev.                   IN      NS
roodolv.dev.            262     IN      NS      xxxxxxxxx.ns.cloudflare.com.
roodolv.dev.            262     IN      NS      xxxxxx.ns.cloudflare.com.

wwwサブドメインからのリダイレクト

設定する必要はないと思うが自分は何となく気になったので設定

CloudflareのDNS設定から下記のCNAMEレコードを追加
- レコードのNameをwwwにする
- Contentをghs.googlehosted.comにする
次にDashboardからPage Rulesの項目に移動して新規Page Ruleを追加
- URL(required)をwww.YOUR_DOMAIN/*にする
  - /*を忘れずに
- Pick a Settingを Forwarding URL にする
- Select status code(required)を 301 - Permanent Redirect にする
- Enter destination URL(required)をhttps://YOUR_DOMAIN/$1にする
  - https://と/$1を忘れずに
これで上手くいけばリダイレクトされるようになる

おわりに

サクっと出来てよかった

なんとこのブログにも維持費が発生してしまった ↩︎