Hugo で Blog

はじめに

1年前の 2022 年 1 月、 Blot というサービスを見つけて、面白いなと思い、このサイトを 作った

Blot は、Dropbox などに Markdown ファイルを投げ込むだけで静的サイトを構築できるという手軽さが魅力的。しかし、少し凝った工夫しようとすると、Blot のシンプルな機能だけでは難しくなってきた。

ということで、少し時間が取れるお正月休みに、静的サイトジェネレータの Hugo を使って、このサイトを再構築。

まずは Hugo の解説書を読む

HTML と CSS のことは少しだけ知っているけれど、静的サイトジェネレータって何だろう?というレベル。

まずは Hugo について、下記の解説書が Amazon の Kindle Unlimited 読み放題の対象だったので、ざっと読んだ。

前半にあった「静的サイトジェネレータとは何かを知ろう」を読んで、なんとなく、この分野の大まかな知識がまあまあ整理できた。

デプロイ先として、ネットの解説記事で頻繁に登場する Netlify かなと思ったけれど、「遅い」という噂も。これに関しても、次のような記述があって、納得。

はじめて利用するには、豊富な情報がネット上に存在する Netlify がお勧めです。しかしながら、CDN のエッジサーバーが日本には存在しないため、日本から利用するにはサイトの表示スピードが遅いのが玉に瑕です。– 「Hugoで始める静的サイト構築入門」

最初の一歩

macOS に Hugo をインストール

brew で楽々。

brew install hugo

新しいサイト(例:mysite)を作る

hugo new site mysite

サイトを作るときには、「 まくまく Hugo ノート - 天才まくまくノート 」が大いに助けになりました。ありがとうございます。

作成中のサイトをプレビューする

mysite/ のなかで…

hugo server

サイトを構築する

mysite/ のなかで…

hugo

Hugo を使っていると、生成される HTML ファイルに余分な空白・改行ができてしまうことがある。構築時に --minifyオプションを付けると、この余分な空白・改行を取り除いて、軽量化してくれる。

hugo --minify

参考

hugo
Posted :