Hugoでポートフォリオサイトを作る

github pagesを使って自身の経歴を公開するポートフォリオサイトを作ろうと思い立った。 今回、Hugoという静的サイトジェネレータを使って構築したのでその手順を記しておく。

使用するツール

Jekyll と Hugo 両方使ってみてHugoの方が簡単だったのでHugoで構築する。

github.com

The world’s fastest framework for building websites.

世界最速

できあがったもの

完成イメージはこちら

https://tic40.github.io/

構築方法

前提

  • github pages を使って無料で公開する
  • ユーザページとして公開する (https://.github.io/)

手順

$ brew install hugo
$ hugo new site <site name>
  • テーマを設定。submodule として登録しておく
$ cd <site name>
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\
$ echo 'theme = "ananke"' >> config.toml
$ git submodule add -b master git@github.com:{USERNAME}/{USERNAME}.github.io.git public

こうしておくことで、public/ の変更をpush したときに、公開用リポジトリに変更をpushされるようになる。

  • ローカルで動作確認
$ hugo server -D

*-Dオプションをつけるとドラフト状態の投稿も表示されるのでつけておくといい

デフォルトだと、1313ポートでローカルサーバーが立ち上がるので、ブラウザで確認できる。

http://localhost:1313/

  • デプロイ

1コマンドでリリースできるようにスクリプトを作っておく

$ vi deploy.sh
#!/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 ..

スクリプトに実行権限を付与

$ chmod +x deploy.sh

スクリプトを実行して公開

$ ./deploy.sh

githubにアクセスしてページが表示されればOK

https://{USERNAME}.github.io

記事を投稿する

記事ファイルの作成

$ hugo new posts/{title}.md

上記で作成されたファイルを編集して、deploy.shを実行すれば公開される。 *上記で作成した記事は、ドラフト状態(draft: true) になっているため、そのままでは本番に反映されない。公開時は draft: false にしておく

最新の詳しいドキュメントはこちらを参照

https://gohugo.io/documentation/