【M1 Mac】Hugo+GitHub Pagesでプロフィールページを作成した話

Hugoを使って業績まとめページを作成し、GitHub Pagesを使って公開したので、手順をまとめます。（当初はJekyllを検討していたのですが、Rubyの環境構築で詰まったので諦めました。。。）

今回はコンテンツ更新用のリポジトリと公開用のリポジトリの二つを用意して運用する方針を取ります。ローカルの環境はMacbook Air, M1, 2020モデル、OSはMonterey 12.4です。

環境構築

まずはHugoをインストールします。今回はHomebrew経由でインストールしました。

Homebrew

公式サイトの指示に従って、以下のコマンドを打つとインストールできます。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Hugo

brew install hugo

で入ります。

Homebrewを使用しない方法

公式サイトには、

1. Homebrewなどのパッケージマネージャーを経由してインストールする方法
2. githubからソースコードを持ってきて自力でビルドする方法

が掲載されています。各方法の詳細はリンク先の公式ページをご参考ください。

コンテンツ更新用のリポジトリ

今回はこちらのリポジトリを元にページを作成します。使用するHugoのthemeはAcademicです。まずはwowchemy/starter-hugo-academicをforkし、コンテンツ更新用のリポジトリとします。

最低限の設定はこちらの記事を参考に行いました。手順は大きく変わりませんが、参考記事内で変更している.tomlファイルは2022年9月1日時点では全て.yamlファイルに変更されていました。

forkした直後のcontentフォルダは以下のような構成になってます。必要に応じてファイルを追加 / 削除してください。

content
├── authors
│   └── admin
├── home
│   ├── about.md
│   ├── accomplishments.md
│   ├── contact.md
│   ├── demo.md
│   ├── experience.md
│   ├── featured.md
│   ├── hero.md
│   ├── index.md
│   ├── people.md
│   ├── posts.md
│   ├── projects.md
│   ├── publications.md
│   ├── skills.md
│   ├── slider.md
│   ├── tags.md
│   └── talks.md
├── post
│   └── _index.md
├── publication
│   └── _index.md
└── event
    └── _index.md

forkしたリポジトリのrootディレクトリでhugoコマンドを叩くとpublicというディレクトリが生成されます。このpublicディレクトリがホームページ公開用のファイルを格納するディレクトリです。

今回はpublicディレクトリをgit submoduleによって公開用の別リポジトリで管理することにします。

公開ファイル用のリポジトリ

forkしたリポジトリのrootディレクトリで以下のコマンドを打つと、publicディレクトリを公開用の別リポジトリで管理できるようになります。<username>の部分にはご自身のgithubユーザー名を入れてください。また、事前に公開用のリポジトリとして<username>.github.ioを作成しておく必要があります。（リポジトリ名は必ずしも<username>.github.ioに従う必要はない？）

git submodule add https://github.com/<username>/<username>.github.io public

ホームページの運用

コンテンツ更新用のリポジトリで以下のコマンドを打つことで公開リポジトリと更新用リポジトリの両方に変更を反映することができます。Windowsの方はコマンドが異なるので適切なものに置き換えてください。

#!/bin/bash
set -ex

pushd public
git fetch -p
git checkout -B main origin/main
popd

# Build.
hugo --minify

pushd public
git add .
git commit -m "build source at $(date)."
git push origin HEAD
popd

git add
git commit -m "build source at $(date)."
git push origin HEAD

出版物(publication)ページの自動生成

academicというPythonベースのコマンドラインツールを使用することで、Bibtexファイルからpublicationページを自動生成することができます。

pip install academic

でインストールできます。

academic import --bibtex my_publications.bib --publication-dir PUBLICATION_DIR

でページを生成できます。簡単ですね。

Event(Talk)やPostの追加

hugo new --kind <content type> <path to your content>

とすることで該当するページの雛形を作成することができます。