Hugoでポートフォリオサイトみたいなものを作ってGitHub Pagesで公開した

最近アウトプットを増やしたいという思いがあり、とりあえず形からでもと思ってポートフォリオサイトっぽいものを作ろうと思いました。

どうやって作ろうかと思っていた中で、何となく知っていたHugoとかSphinxみたいな単語で調べてみると、そもそも静的サイトジェネレータというものがあることを知りました。

この辺の説明は以下のスライドが分かりやすかったです。

slideship.com

最近はほぼPythonばかり触っていることもあり、普通ならSphinxとかを選択するかもしれませんが、さすがにPythonばかりだとな、、、という思いがあり今回はHugoを選択しました。特に深い理由はありません。

ちなみに静的サイトジェネレータのメリットとしてはHTMLとかを書く必要がないことのようですが、テンプレート的なものを自分の用途に変えようと思うと普通にHTMLを書く必要がありました。この辺はもっと良いやり方があったのかもしれません。

作成したサイトはGitHub Pagesで公開しました。

GitHub PagesはGitHubが提供している静的サイトのホスティングサービスです。

今回作成したサイトは以下のものです。

kishimoto-banana.github.io

Hugoの使い方

基本的にはHugoのquick startを参照しました。

gohugo.io

Hugoのインストール

MacOSであればHomebrewでインストールできます。

brew install hugo

ウェブサイトを作成する

以下のコマンドで my_site という名前で新しいHugoのプロジェクトを作成します。

hugo new site my_site

Gitリポジトリの作成・テーマの追加

https://themes.gohugo.io/ から使いたいテーマを選択し、submoduleとして追加します。今回はGoaというテーマを選択しました。

cd my_site
git init
git submodule add https://github.com/shenoybr/hugo-goa.git themes/hugo-goa

テーマを適用

実際にテーマを適用してサイトを作成します。 ここからのやり方は複数あるような気がしますが、今回はテーマのディレクトリ以下にあるディレクトリをプロジェクト直下のディレクトリにコピーして適用します。

Goaの場合、具体的には themas/hugo-goa/ 以下から layouts を、 themas/hugo-goa/exampleSite 以下から contentstaticdataconfig.toml をコピーします。

ここでHugoサーバを起動します。

hugo server

http://localhost:1313/ にアクセスすれば、テーマのデモサイトと同じ内容が表示されるはずです。

カスタマイズ

基本的な変更は、プロジェクトディレクトリ直下の config.toml を変更します。

ただしサイトの構成を変えるような変更は、layouts 直下のHTMLファイルを修正しなければなりません。

例えば今回採用したテーマのGoaは、トップページから自己紹介ページやブログページに遷移する構成でしたが、自分はトップページに経歴などの内容を全て記載したかったので、 layouts 以下にHTMLファイルを追加しました。

GitHub Pagesでホスティング

こちらも基本的には以下のHugoのドキュメントを参照しました。 gohugo.io

場合によって2つの方法があるようです。

https://<username>.github.io/ というURL、もしくはhttps://<username>.github.io/<projectname> といったように任意のプロジェクトのURLの場合です。

今回は前者の場合です。

2つのリポジトリを作成

  • ソース管理のための任意のリポジトリ。今回は my-site とする。
  • 公開するサイトのファイルを置くためのリポジトリ。リポジトリ名は <username>.github.io とする。

ソース管理リポジトリをcloneする

git clone <my-siteリポジトリのURL>

作成したHugoプロジェクトのコピー

cloneした my-site に Hugoプロジェクトの my_site 以下をコピーする。

cp -p -f -R my_site/* my-site/

ローカルで動作確認

my-site ディレクトリに移動して、再度ローカルにてHugoサーバを起動して表示内容を確認します。

cd my-site
hugo server

http://localhost:1313/ にアクセスして内容を確認します。

問題なければ Ctrl+C で停止します。

publicディレクトリを公開先リポジトリとしてサブモジュール化

publicディレクトリを削除して、公開先リポジトリとしてサブモジュール化します。

rm -rf public
git submodule add -b master https://github.com/<username>/<username>.github.io.git public

リモートリポジトリにpush

ドキュメントに載っていたシェルを叩くだけです。

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public
# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..

後は https://<username>.github.io/ にアクセスすれば自分のサイトが公開されています。