HUGO

サマリーの変更とコメント欄を追加

はじめに

大まかなブログの体裁は整ったので、ブログとしての機能を拡充したいと思い始めました。一般的なブログとしては、サマリーが長すぎるので短くしたい、サマリーに日付を表示したい、サマリーから記事本文にとんで貰いたい、記事にコメント欄を追加したい、これからを実現できることは知っているんですが、GitHub Pageの手順は素人には非常に難しいので次のようにしてみました。

1. やりたいことをGminiに相談してみた

  • サマリーが長すぎるので短くしたい
  • サマリーのタイトル付近に日付を追加したい
  • サマリー下部に[Read More]と記事へのリンクを追加したい
  • 記事にコメント欄を追加したい

2. 実作業

  1. サマリーを短くする

GitHub Pagesのビルドをサーバー側(Actions)に完全移行してみた

hugoの使い方を簡潔に出来ないか

ローカルWWWサーバーのhugoで静的なhtmlファイルを作成してGitHub Pageにアップしていたわけですが、hugo serverコマンドでローカルサーバーを起動すると、hugo.tomlで設定している本番環境のbaseurlとは違うローカルホストのアドレスが静的ページに入り込み、本番環境にゴミが入り込んでしまうことがありました。ローカルサーバーを起動した場合には、都度、publicフォルダーを綺麗にしてから、hugoコマンドでbaseurlが外向きの物になっている物を作成してから、Gitにpushする(GitPageにアップロードする)必要がありました。バッチファイルを組み合わせればさほど難しいことではないのですが、なんかスマートではありません。そこでネット上の参考になる情報は無いかと徘徊していました。

Gitサーバー側で構築して展開すれば良いじゃない

時代は変わっていたんですね。ローカルでマークダウンファイルで記事を書いて、サーバーにアップロードしてビルドしてデプロイすれば良いというのが最近の推奨だったなんて。

手順

  1. GitHub設定の変更
  2. .github/workflows に hugo.ymlを作成
  3. ルートに.gitignoreを作成
  4. サブモジュールの実体化 (テーマフォルダ)
  5. 記事投稿時のgitコマンドを書き直す

1. GitHub設定の変更

リポジトリの Settings -> Pages -> Build and deployment -> Source を 「GitHub Actions」 に変更します。