Hugoでポートフォリオサイトみたいなものを作ってGitHub Pagesで公開した
最近アウトプットを増やしたいという思いがあり、とりあえず形からでもと思ってポートフォリオサイトっぽいものを作ろうと思いました。
どうやって作ろうかと思っていた中で、何となく知っていたHugoとかSphinxみたいな単語で調べてみると、そもそも静的サイトジェネレータというものがあることを知りました。
この辺の説明は以下のスライドが分かりやすかったです。
最近はほぼPythonばかり触っていることもあり、普通ならSphinxとかを選択するかもしれませんが、さすがにPythonばかりだとな、、、という思いがあり今回はHugoを選択しました。特に深い理由はありません。
ちなみに静的サイトジェネレータのメリットとしてはHTMLとかを書く必要がないことのようですが、テンプレート的なものを自分の用途に変えようと思うと普通にHTMLを書く必要がありました。この辺はもっと良いやり方があったのかもしれません。
作成したサイトはGitHub Pagesで公開しました。
GitHub PagesはGitHubが提供している静的サイトのホスティングサービスです。
今回作成したサイトは以下のものです。
Hugoの使い方
基本的にはHugoのquick startを参照しました。
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
以下から content
・ static
・ data
・ config.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/
にアクセスすれば自分のサイトが公開されています。