HugoとGitHub Pagesでポートフォリサイトを作った話

HugoとGitHub Pagesでポートフォリをサイトを作った話。参考サイトの情報と流れを簡単にまとめました。他の人がしっかりやり方をまとめてくれたので、自分用のメモに近いかもです。

chittai.github.io

Hugo & GitHub Pagesとは

Hugoは静的なサイトジェネレータです。最初はピンとこなかったのですが、自分で選択したテーマのフォーマットにしたがってコンテンツを作成します。これは、マークダウンで記述することができます。この成果物をHugoに通すことで、静的ファイル(html, cssなど)を生成してくれます。
gohugo.io

GitHub Pagesは静的サイトのホスティングサービスです。つまり、通常Webサイトを公開するときは、自分でWebサーバを立てたりする必要がありますが、GitHub Pagesを使用すればその必要はありません。今回はHugoで作成した成果物をGitHubのリポジトリ上に配置することでサイトが見れるようになりました。
pages.github.com

参考サイト

このあたりを見れば一通りできるのではないかなと。
qiita.com

qiita.com

qiita.com

help.github.com

環境

OS：macOS High Sierra 10.13.6

ざっくりやること

ローカルPC

1. Hugoを導入する
2. Hugoでサイト作成する
3. Hugoの起動する
4. http://localhost:1313 にアクセスしてサイトが見れるか確認する
5. テーマを追加する

HugoとGitHub Pagesで静的サイトを公開する - Qiita

1. テーマ追加後、テーマ内にあるファイルをHugoのサイト用ディレクトリ直下にあるフォルダにコピーする

【初心者向け】Hugo + GitHub Pagesで静的なポートフォリオを作る - Qiita

GitHub上

1. リポジトリを作成する(xxx.github.io)
2. リポジトリのSettingsからGitHub Pagesの設定を確認。URLがあります。(ユーザページならmasterブランチ直下がデフォルト)

ローカルPC

1. リモートリポジトリを登録して、push する
2. .gitignoreも忘れずに作成

hugo/.gitignore at master · gohugoio/hugo · GitHub

1. GitHub Pagesに向けた設定を行う

【初心者向け】Hugo + GitHub Pagesで静的なポートフォリオを作る - Qiita

ここまでで大体完了するはずです。このあとテーマのフォーマットにそって自分で色々修正を加えたりしますが、このレベルのサイトを一日で作成できてしまうのは良いですね。