cover image

HugoとGitHub Pagesでブログを作る

カテゴリ
Tech
書いた人
Tatsuya Sasaki
公開日
2021/12/24
💡
概要
できるだけ手間を書けずに気軽にアウトプットできる場所を作ることを目的に、 本ブログサイトをHugoとGitHub Pagesを使用して作りました。
同様のブログを作りたいと思った方の参考になれば幸いです!
 
🚀
記事はこちら!
HugoとGitHub Pagesでブログを作る
できるだけ手間を書けずに気軽にアウトプットできる場所を作ることを目的に、 本ブログサイトをHugoとGitHub Pagesを使用して作りました。作った時の手順を振り返りを兼ねてまとめました。 同様のブログを作りたいと思った方の参考になれば幸いです! 独自ドメインに変更する方法などについては今回は触れずに、最低限の構成で表示できるところまでをまとめています。カスタマイズした部分に関しては別途まとめる予定...です。 また、 Hugo、 GitHub Pages、 GitHub Actions の詳細な説明は割愛します。 まずは、公開するためのプロジェクトを作成します。Hugoのドキュメント Quick Start を参考に進めました。 Hugoのコマンドを使えるようにするため、Hugoをinstallします。自分はMacで作業していたので、Homebrew経由でinstallしました。 hugoコマンドが使えることを確認しプロジェクトを作成します。適宜作業したいディレクトリに移動して以下のコマンドを実行します。 Hugoでは theme というものが公開されており、themeを利用することで期待するデザインのサイトを作ることができます。 自分はシンプルなもので探して以下の3つが候補になりました。 この中で「リポジトリの最後のcommitの時間、内容」および、「starの数」を考慮し mini にしました。 使用するthemeが決まったら、themeを追加します。 cd quickstart git init git submodule add https://github.com/nodejh/hugo-theme-mini.git themes/mini 追加が済んだらテーマのディレクトリをconfig.yamlに追加します。miniの場合は sampleのconfig.yamlが用意されているので、内容をコピーして必要な部分を適宜設定するようにするのが簡単で良いと思います。合わせて各項目の説明がドキュメントに書いてあるので、翻訳してそれぞれ確認しました。 以上で記事を書くための準備が完了です。 コマンドでファイルを追加します。ローカルでサーバーを起動して実際の表示を確認しながら記事を書くことができます。 // 新しい記事のファイルを作成 hugo new posts/my-first-post.md // 実際に表示される内容を確認できるようにする hugo server -D ここからは記事を公開する手順について書いていきます。GitHubのドキュメント