Hugo + GitHub Pagesで静的サイトを作る

Hugo + GitHub Pagesでポートフォリオっぽいサイトを作りました。

本記事では、サイト作成にあたりやったことについて書きます。

できたもの

f:id:nafuka11:20211009205136p:plain:h300

https://nafuka11.github.io/

github.com

技術選定

今までの経歴や作ったものをまとめたページが作れること(ブログ機能不要)、
メンテしやすくMarkdownで書けること、サイトのビルドが早いことという観点で選びました。

テーマをPaperModにした決め手は Changelog がきちんと書かれていて、変更が追いやすいことです。

Coder という別のテーマと悩んだのですが、変更が追いづらいため今回はPaperModにしました。
CoderはソーシャルアイコンにFont Awesomeのクラスを直接指定できるのがいいところだと思います。
ただ、デフォで日本語対応フォントではなかったり、Topページからメニューの各ページに移動するとタイトルがズレるのは気になるところです。

やったこと

Hugoを使ったことがなかったので、まずは公式のドキュメントを読みました。

Quick Start で大まかな使い方、Basic Usage でhugoコマンドの使い方、Directory Structureディレクトリ構成について学びました。

その後は、PaperModのWiki を見て、install手順に従った後、config.ymlを設定していきました。

PaperModのWikiにある Add menu to site を参考にconfig.ymlを編集し、hugo new menu名 してページを追加しました。

PaperModのCSSを調整

PaperModはライトテーマだと、Topページが背景色 #F5F5F5 なのですが、それ以外のページで #FFFFFF になります。

この問題はIssueが上げられましたが、製作者によると意図的なものだそうで、修正されずにcloseされています。

github.com

自分的に違和感があったため、CSSを調整しました。

CSSの設定方法はPaperModのWikiにある Bundling Custom css with theme's assets を参考にしました。

GitHub Actionsを使った自動デプロイ

Hugo公式の Host on GitHub にある Build Hugo With GitHub Action のワークフローをほぼそのまま使いました。

このワークフローは以下のことをしてくれます。

  • リポジトリをチェックアウト
  • Hugoをインストール
  • ./public にサイトを生成
  • ./public の内容をgh-pagesブランチにデプロイ

ワークフローを追加した当初、GitHubの障害が発生していてワークフロー動作しなくて焦りました。何かあった時に GitHub Status を見るのは大事だと思いました。

終わりに

静的サイトが作れてよかったです。

今後はサイトに内容を追加していきたいです。