Hugoでポートフォリオサイトを作ってみた

HugoのAcademicテンプレートでポートフォリオサイトを作ってみました。
GitHub Pagesを利用して公開しています。https://haruto830.github.io/portfolio/

作成手順を備忘録として。

前提

• Hugoがインストールされている環境であること
• GitHubにポートフォリオ用のリポジトリが作成されていること

セットアップ

HugoのAcademicテンプレートを落としてきます。
今回は、[Portfolio]という名前のフォルダを作成します。

$ git clone https://github.com/sourcethemes/academic-kickstart.git Portfolio
$ cd Portfolio
$ git submodule update --init --recursive

テンプレートを落としてきたら、一旦Hugoをローカル実行してみます。

$ hugo server

http://localhost:1313にアクセスすると、デモページが表示されます。

サイトの編集

デモページが表示されたら、内容を編集していきます。

Portfolio
|-- LICENSE.md
|-- README.md
|-- academic.Rproj
|-- config
|   `-- _default
|       |-- config.toml
|       |-- languages.toml
|       |-- menus.toml
|       `-- params.toml
|-- content
|   |-- author
|   |   `-- admin
|   |       |-- _index.md
|   |       `-- avatar.jpg
|   |-- 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
|   `-- talk
|       `-- _index.md
|-- netlify.toml
|-- scripts
|   `-- init_kickstart.sh
|-- static
|   `-- img
|-- themes
|   `-- academic
|       |-- LICENSE.md
|       ...

ページの編集は、基本的にcontent/home配下のファイルを更新していきます。
各ページのmdファイルがあるので、対応しているものを更新してきます。

使わないページは、対応するmdファイルを削除するか、mdファイル内のactiveをactive = falseに更新することで非表示になります。

各ページの編集方法は、ソースのコメント又は公式ドキュメントに記載されているので割愛。
公式ドキュメント

ビルド

実行中の場合はHugoを停止し（[Ctl]+[c]）、config.tomlのbaseurlの設定を更新します。
予めGitHubに作成しておいたportfolioリポジトリのGithub Pagesを設定します。

baseurl = "https://<USERNAME>.github.io/portfolio"

ローカルでの動作確認が完了したら、以下コマンドでビルドします。

$ hugo 

ビルドが完了すると、publicフォルダ内に静的コンテンツが作成されます。

デプロイ

今回は、GitHub Pagesを利用し、生成された静的コンテンツをホスティングします。
予めGitHubに作成しておいたportfolioリポジトリにデプロイします。

$ cd public/
$ git init
$ git branch gh-pages
$ git checkout gh-pages
$ git add --all
$ git commit -m "Initial commit"

リモートリポジトリにgh-pagesブランチを作成します。

$ git remote add origin [e-mail]:haruto830/portfolio.git
$ git remote -v
$ git push origin gh-pages

gh-pagesブランチに静的コンテンツをpushします。

GitHub Pagesにアクセスすると、pushしたpubicの内容が表示されます。
https://{username}.github.io/portfolio/

参考

Hugo + GitHub Pagesでポートフォリオを作る
HugoとGitHub Pagesで静的サイトを公開する