Skip to content
Go back

Hugoで作るWebサイト(GitHub Pages編)

· Updated:

事前調査#

MarkdownをHTMLに変換してGitHub Pagesに公開するという、お手軽Webサイト構築法があるらしい。色々と設定してしまえば、Markdownで書いてGitHubにプッシュするだけで良いので、とても嬉しい。HTMLを生成するためのツールは以下のように色々あるそう。

  • Jekyll:Ruby製。GitHubで採用されている。古参。
  • 11ty:Node.js製。Jekyllから移行しやすい。
  • Hugo:Go製。ビルドが速い。実行ファイルひとつだけでOK。
  • Astro:Node.js製。カスタマイズ性が高そう。

導入しやすそうなHugoから始めてみようと思う。

手順#

Windows 11の場合

Hugo#

  • wingetでHugo.Hugo.Extendedをインストールする
    • 通常版は機能が足りなくてビルド時にエラーが出た
  • Hugoのチュートリアル通りに進める
    • hugo new site サイト名
    • git initで同フォルダをGitリポジトリにする
    • git submodule addthemesフォルダ以下に好きなテーマのリポジトリを追加する
    • hugo.tomltheme = 'テーマ名'を書き加える
    • hugo serverでローカルサーバーを立ち上げて結果を確認する
  • contentフォルダ以下にMarkdownファイルを追加する
    • Frontmatterにdraft = trueがあると、通常ではページが生成されない
    • hugo server -Dでdraftを含めて結果を確認できる

GitHub Pages#

  • チュートリアル通りに進める
    • hugo.tomlcaches項を追加する
    • .github/workflows/hugo.tomlを作る
  • GitHubにプッシュする
  • GitHub ActionsでPagesをビルドするよう設定を変える

gitignore#

生成されるものを管理対象外にするよう.gitignoreを書き換える。

public/
resources/
.hugo_build.lock

参考文献#