🐕

Hugo×GitHub Pages×GitHub Actionsでプロフィールサイト作成

2024/05/07に公開

zennに書くほどでもないようなことをどこに書くのか悩んで調べていたら、
Hugoという静的サイトジェネレーターの存在を知りました。
noteに書いても良いかなと思ったりしたけど、簡単そうだし使ってみたくなったので
Hugoを使ってプロフィールサイトを作りました！

まだプロフィール書いてないんですが😂
英語日記を始めたのでしばらくそれ用に使います。

この記事では、以下の2つを紹介します。

Hugoの使い方
GitHub ActionsでGitHub Pageへのデプロイの自動化方法
テーマのカスタマイズ方法

私が作成したリポジトリはこちらになります。
https://github.com/serina-yam/profile

Hugoを使ったサイトの作り方

Hugoのインストール

brewを使うか、公式サイトを参照してインストールを行います。

brew install hugo

作成したいホームリポジトリで以下コマンドを実行します。
この場合は、「profile」というhugoのリポジトリを作成することになります。

hugo new site profile

基本的に設定ファイルの拡張子は「.toml」ですが、
テーマによっては「.yml」を使用している場合があります。
どちらの拡張子でも大丈夫だとは思いますが、
ymlファイルで作成したい場合はこちらのオプションをつけてコマンド実行します。

私は、PaperModにしたのですが、
こちらのテーマはymlファイルで作成されているのでオプションつけてリポジトリ作成しておきます。

hugo new site profile --format yaml

テーマの適用

Hugo公式サイトのテーマ一覧から適用したいテーマを探します。

PaperModの場合は、このコマンドを実行してテーマを適用します。

git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1
git submodule update --init --recursive

1つ目の外部リポジトリをプロジェクトのサブモジュールとして追加して
2つ目のコマンドでサブモジュールを更新して適用しています。

設定ファイルの変更

config.ymlの内容をサンプルの内容に書き換えます。

ビルドで生成されるフォルダ名の変更

今回は、ビルドで生成するフォルダを変更したいので以下の設定を追加します。
デフォルトは「public」という名前で作成されます。

config.yml

baseURL: "https://<username>.github.io/<repository>/"
publishDir: docs

※usernameとrepositoryは自分の値にします。

記事の書き方

これで記事が作成されます。

hugo new content posts/first-post.md

このようなファイルが作成されます。
draft: trueの場合は下書きになるのでサイトには表示されません。

first-post.md

---
title: "First Post"
date: 2024-05-07T20:03:07+09:00
draft: true
---

これでローカル実行できます。

hugo server

ビルドのコマンドはこちらです。

hugo

GitHub Pagesの設定方法

mdファイルを作成してビルドしてコミットしないとサイトに記事が反映されないので、
mdファイルをコミットしただけでサイトに反映されるように自動化していきます。

まずは、作成したリポジトリをGitHubにプッシュして公開設定をpublishにしておきます。

GitHubリポジトリのSettingsタブの「Pages」をクリックします。

Sourceを「GitHub Actions」に変更します。

GitHub Actionsの設定方法(ほぼテンプレ)

GitHubリポジトリのActionsタブの「New workflow」をクリックします。

「hugo」と検索して「Configure」をクリックします。

すると、このような設定ファイルが作成されます。

先ほどビルドで生成されるフォルダ名を変更したのでこちらもそれに合わせて変更します。
「name: Upload artifact」のパスの箇所をこのように変更します。

hugo.yml

path: ./docs

先ほどHugoの設定ファイルでpublishDirを変更してない場合は何も変更しなくて大丈夫です。

「Commit changes...」でコミットします。

フォルダ構成

.
├── .github
│   └── workflows
│       └── deploy-to-pages.yml
├── archetypes
│   └── default.md // 記事作成時のテーマ
├── content // 記事の格納場所
│   └── posts // フォルダ名がパス名になる
├── layouts // カスタマイズしたファイル格納場所
├── static
│   └── favicon.ico // ファビコンや画像
├── themes
└── config.toml

contentに記事を追加していく形になります。

テーマのカスタマイズ方法

テーマには大抵参考のコードがあるのでそちらを参考に自分好みにしていきます。
PaperModの場合はこちらになります。

基本的にはconfigファイルを変更することでカスタマイズします。
または、layoutsにファイルを置けばそちらが優先して適用されます。

まだconfigファイルしかいじってないのですが、
自分が作成したconfigファイルにコメントで説明を記載しているので
こちらを参考にしてみてください。

終わりに

思ったよりも簡単でびっくりしました。
自由度が高いので今後もっとカスタマイズして自分好みにしていきたいです！

今回作ったサイトは、今のところ英語勉強用に使用していて
英語日記を更新しているので興味ある人はのぞいてみてください。

今はオンライン英会話の日記をつけてます。
英語は超初級レベルなので内容は今後良くなっていくはずです😂

実は、来週から3週間のフィリピン留学に行くんですが日記を書く場所が欲しくて
せっかくだからHugoを使って作ってみた感じでした！

ということで留学頑張ってきます🔥

今後は英語学習についても発信していきたいです。