Featured image of post 💻Hugo+GitHub Pagesで簡単ブログ作成(2023年版)

💻Hugo+GitHub Pagesで簡単ブログ作成(2023年版)

マークダウンで書いた記事を、Hugo+GitHub Pagesで個人ブログとして公開しよう!

はじめに

アウトプット用として個人ブログを始めたいと思い、今回HugoとGitHub Pagesを使ってブログを作成しました。

静的サイトジェネレーターの選定

MarkdownからHTMLを生成する静的サイトジェネレーターで有名なものとして、以下の2つがあります。1

  • Hugo
    • ⭐️GitHub Stars : 70.1 K
  • Jekyll
    • ⭐️GitHub Stars : 47.6 K

今回はGitHub Starsが多く、更新もより頻繁なHugoを使っていきます。

!注意

これらのGitHub Stars数は2023年11月時点のものです。

テーマの選定

GitHubのhugo-themeトピックで、GitHub Starsが多いテーマから選びました。

  1. Hugo PaperMod 🪧デモ
    • シンプルなテーマが好みならこれ。
  2. Hugo Blox Builder(Builderなので除外)
  3. Hugo Theme Stack 🪧デモ
    • 私はこちらを選びました。PC画面でカテゴリやタグのまとめが右に出ているのがよかった。
  4. Hugo Academic CV Theme 🪧デモ
    • 執筆、出版、登壇が多い人はこちらがよいかも。
  5. Hugo LoveIt Theme 🪧デモ
    • ホーム画面で各記事ごとに著者情報が付与されているので、複数人で各々が投稿するならこれ。

私はHugo Theme Stackを選びました。 テーマ選びは個人の好みに大きく左右されますが、上記の選択肢は参考になると思います。

GitHub Pagesの設定

各テーマにはテンプレートとガイドが用意されているので、それらにしたがって操作をおこなえば問題なく完了できます。 私が選んだテーマにも、starterというテンプレート用意されており、それに沿って設定をおこないました。 基本的には、使用するテンプレートのREADMEとGitHub Pagesのクイックスタートを読めば準備完了です。

GitHubリポジトリのmainブランチにpushすることで、テンプレートに含まれている.github/workflows/*.ymlに基づいてGitHub Actionsが実行されます。 これによりサイトは自動的にビルドされ、最終的にhttps://<user>.github.io/のURLでwebサイトが公開されます。

👀補足

ビルドから公開までにはタイムラグがあったりします。気長に待ちましょう☕。 10分以上たってもwebサイト表示されない、あるいはリポジトリのREADMEが表示される場合は、 GitHub Pagesサイトの公開元設定が正しいか確認してみましょう。

まとめ

今回はHugoとGitHub Pagesを使用してブログを作成しました(このブログです🎉)。 デプロイまでは非常に簡単で、試す価値は十分にあります。 ただし日本語対応のようなカスタマイズを行うさいには、少々の難所やバグに出会うかもしれませんが、そういうものだと目をつぶってください!

ちなみに私は、どのテーマを選ぶべきか、他のテーマの方が見栄えが良いのではないかと迷い、時間をムダにしました。 しかし、最終的には、見た目の美しさよりも内容の豊かさが重要です。 見た目をとっかえひっかえせずに投稿していこうと思います。

では、さようなら~👋

Built with Hugo
Theme Stack designed by Jimmy