Hugo + GitHub Pagesでポートフォリオっぽいサイトを作りました。
本記事では、サイト作成にあたりやったことについて書きます。
できたもの
技術選定
今までの経歴や作ったものをまとめたページが作れること（ブログ機能不要）、
メンテしやすくMarkdownで書けること、サイトのビルドが早いことという観点で選びました。
- ホスティング：GitHub Pages
- 静的サイト生成ツール：Hugo
- Hugoテーマ：PaperMod
テーマをPaperModにした決め手は Changelog がきちんと書かれていて、変更が追いやすいことです。
Coder という別のテーマと悩んだのですが、変更が追いづらいため今回はPaperModにしました。
CoderはソーシャルアイコンにFont Awesomeのクラスを直接指定できるのがいいところだと思います。
ただ、デフォで日本語対応フォントではなかったり、Topページからメニューの各ページに移動するとタイトルがズレるのは気になるところです。
やったこと
Hugoを使ったことがなかったので、まずは公式のドキュメントを読みました。
Quick Start で大まかな使い方、Basic Usage でhugoコマンドの使い方、Directory Structure でディレクトリ構成について学びました。
その後は、PaperModのWiki を見て、install手順に従った後、config.ymlを設定していきました。
Menuの設定
PaperModのWikiにある Add menu to site を参考にconfig.ymlを編集し、hugo new menu名 してページを追加しました。
PaperModのCSSを調整
PaperModはライトテーマだと、Topページが背景色 #F5F5F5 なのですが、それ以外のページで #FFFFFF になります。
この問題はIssueが上げられましたが、製作者によると意図的なものだそうで、修正されずにcloseされています。
自分的に違和感があったため、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 を見るのは大事だと思いました。
終わりに
静的サイトが作れてよかったです。
今後はサイトに内容を追加していきたいです。
