HugoとGitHub Pagesでポートフォリサイトを作った話
HugoとGitHub Pagesでポートフォリをサイトを作った話。参考サイトの情報と流れを簡単にまとめました。他の人がしっかりやり方をまとめてくれたので、自分用のメモに近いかもです。
Hugo & GitHub Pagesとは
Hugoは静的なサイトジェネレータです。最初はピンとこなかったのですが、自分で選択したテーマのフォーマットにしたがってコンテンツを作成します。これは、マークダウンで記述することができます。この成果物をHugoに通すことで、静的ファイル(html, cssなど)を生成してくれます。
gohugo.io
GitHub Pagesは静的サイトのホスティングサービスです。つまり、通常Webサイトを公開するときは、自分でWebサーバを立てたりする必要がありますが、GitHub Pagesを使用すればその必要はありません。今回はHugoで作成した成果物をGitHubのリポジトリ上に配置することでサイトが見れるようになりました。
pages.github.com
ざっくりやること
ローカルPC
- Hugoを導入する
- Hugoでサイト作成する
- Hugoの起動する
- http://localhost:1313 にアクセスしてサイトが見れるか確認する
- テーマを追加する
HugoとGitHub Pagesで静的サイトを公開する - Qiita
- テーマ追加後、テーマ内にあるファイルをHugoのサイト用ディレクトリ直下にあるフォルダにコピーする
【初心者向け】Hugo + GitHub Pagesで静的なポートフォリオを作る - Qiita
ローカルPC
- リモートリポジトリを登録して、push する
- .gitignoreも忘れずに作成
hugo/.gitignore at master · gohugoio/hugo · GitHub
- GitHub Pagesに向けた設定を行う
【初心者向け】Hugo + GitHub Pagesで静的なポートフォリオを作る - Qiita
ここまでで大体完了するはずです。このあとテーマのフォーマットにそって自分で色々修正を加えたりしますが、このレベルのサイトを一日で作成できてしまうのは良いですね。