PR：この記事にはアフィリエイトリンクが含まれます。
HugoはGo製の静的サイトジェネレーターです。Markdownの記事とテンプレートからHTMLを生成する仕組みで、企業サイトや技術ブログの構築にも使えます。
テーマを入れれば、すぐ実務に載せられる。そう考えると、運用で困ることがあります。更新担当者が迷わないコンテンツ構造や、検索エンジンに伝わるページ情報、あとから直しやすいテンプレートも必要です。
三冊は、日本語での導入、HTML制作の経験を活かす実践、GoテンプレートとJamstackの応用にそれぞれ比重があります。扱う範囲を見ていきましょう。
本の早見表
| 書籍 | ページ数・形式 | 主な内容 | 読者の目安 |
|---|---|---|---|
 Hugoで始める静的サイト構築入門 | 86ページ・印刷版 | 導入、公開、カスタマイズ、CMS移行 | 日本語でまず公開したい人 |
 Build Websites with Hugo | 154ページ・Paperback | Markdown、テーマ、検索、デプロイ | Web制作経験をHugoに移したい人 |
 Hugo in Action | 488ページ・Trade Paperback | Goテンプレート、テーマ、Modules、Jamstack | 基本的なJavaScriptを使える開発者 |
短時間で全体像をつかみたい人には日本語の入門書がおすすめです。制作の流れを広げるならBrian P. Hoganの実践書、テーマや拡張機能まで掘り下げるならAtishay Jainの一冊が合います。
三冊はページ数も扱う技術の深さも異なります。読む時間だけでなく、現在のHugoの仕様と照らし合わせながら学べるかも、実務との距離を縮める目安ですね。
Hugoが実務に向く理由
Hugoは公開前にページを生成します。そのため、閲覧のたびに記事ごとのデータベース処理を行う構成と比べて、配信をシンプルにしやすいのが特徴です。生成したファイルを一般的なWebサーバーやホスティング環境へ配置しやすい点も魅力。
記事をMarkdownで管理すれば、HTMLを直接編集する箇所を絞れます。企画担当者が本文や見出しを直し、開発者が共通レイアウトを維持する分担も可能です。
公開後の内容を即座に差し替える機能などは、静的サイトだけでは完結しない場合があります。会員ごとの表示や在庫連動が必要なら、APIやJavaScript、外部サービスも含めて設計したいところです。
採用判断では生成速度に加え、更新頻度や公開手順、必要な動的機能も確認します。記事中心のサイトならHugoの強みを活かしやすく、複雑な業務機能は別の仕組みと連携させるのが現実的です。
テンプレートの構造
Hugoのテンプレートは、ページの種類ごとにHTMLの枠組みを分けられます。記事ページ、一覧、トップページで必要な表示を整理し、ヘッダーやフッターを共通化すれば、再利用も容易です。
たとえばlayoutsフォルダ内の_defaultフォルダにbaseof.htmlを置き、single.htmlやlist.htmlでページ別の表示を割り当てます。部品にする表示はpartialsへまとめます。
条件分岐をテンプレートに詰め込みすぎると、一か所の修正で別ページまで崩れることがあります。共通部分、ページ固有の表示、コンテンツの値を分けると、修正箇所を追いやすくなります。
Goテンプレートは、HTML内で値や条件に応じた表示を組み立てる機能です。文法に慣れればページごとの重複を減らし、表示ルールを明確にできます。
コンテンツと表示
本文と表示設計を切り離せるのは、Markdownで記事を管理する利点のひとつです。front matterにタイトルや日付、分類などを持たせれば、一覧や関連記事も共通ルールで生成できます。
製品カテゴリごとに説明ページを並べるケースを考えてみましょう。URLや分類名をその場しのぎで決めると、記事が増えたとき一覧が崩れかねません。ページの役割や分類、見出しとメタ情報を揃えると、読者は一覧を追いやすくなり、編集時も作業箇所を見つけやすくなります。
タグやセクションは便利な反面、細かく増やすほど管理の負担も上がります。読者が使う分類に絞り、空の一覧や内容の薄いページを公開しないこと。サイトの質を保つ基本です。
公開後に効く整理
静的サイトも、公開したらおしまいではありません。URL変更や古い情報の更新、リダイレクトの管理を放置すれば、検索結果や外部リンクから訪れた読者を迷わせます。
デプロイ前にローカル表示を確認したら、生成されたHTMLやサイトマップも点検します。ページタイトルと説明文の確認も必要です。共通テンプレートで管理すれば、多数の記事を個別に直す手間を減らせます。
Hugoが記事内容を自動で検索できるようにするわけではありません。検索用JSONを生成してJavaScriptで絞り込む方法や、外部検索サービスを使う方法があります。記事数や更新要件に合わせて実装を決めましょう。
日本語の入門書
『Hugoで始める静的サイト構築入門 静的サイトジェネレーターで作る自作サイト』は、meganii著、インプレス NextPublishing刊の印刷版です。2021年1月22日発行で全86ページ。Hugoの導入から公開までを日本語で学びたい人におすすめです。
自作サイトのカスタマイズと他CMSからの移行を扱います。既存サイトをHugoへ移すなら、本文やURL、サイト構成の引き継ぎも検討事項になります。
希望小売価格は税込2,200円。実売価格は時期や販売店で変わります。まとまった時間を取りにくく、まずHugoでの公開まで進めたい人には手に取りやすい入門書です。
本書は2021年発行なので、現在のHugoに手順を適用する際は、公式ドキュメントでコマンドや設定名も確かめましょう。紙の本で基礎を読み、プロジェクトで違いを確かめる使い方が合います。
英語の実践書
『Build Websites with Hugo: Fast Web Development with Markdown』はBrian P. Hogan著、The Pragmatic Programmers刊。154ページのPaperbackで、HTML制作の経験をHugoのサイト構築に活かしたい人におすすめです。
Markdownやfront matter、サイト設定から、テーマ、コンテンツセクション、Taxonomies、タグ、ページネーションまで扱います。分類やページ送りを備えたサイトの構成も学べる一冊です。
検索機能に加えてNetlifyやクラウドストレージへの公開を扱い、一般的なWebサーバーでのデプロイやHugoへの移行も取り上げます。公開まで手を動かしながらHugoを学ぶ人に合います。
出版社ページではPaperback FormatsがIn Printとして案内されています。小さなサイトで章の内容を試せば、学んだ設定を実作業で確かめられます。
応用まで学ぶ本
『Hugo in Action: Static sites and dynamic Jamstack apps』はAtishay Jain著、Manning刊の488ページです。基本的なJavaScript知識があるWeb開発者を対象とし、三冊の中でも扱う範囲が広い本です。
Markdownによるコンテンツ管理から、Goテンプレートで作る独自ページ、タグ付け、自作テーマまで扱います。テーマの構造を理解し、自分の要件に合わせたい開発者におすすめです。
Hugo Modulesによる依存関係管理も学べます。サンプルサイトとソースコードを使い、サイトの構築から公開まで追える点も実践的です。
APIやJavaScriptを使ったJamstackの応用として、動的フォームやEC機能も取り上げます。静的生成を活かしながら追加機能を組む方法を学びたい人にすすめたい一冊です。
結論
日本語でHugoの流れを短時間につかみたい人には、『Hugoで始める静的サイト構築入門』がおすすめです。印刷版86ページで、導入、公開、カスタマイズ、CMS移行をひと通り見渡せます。
Web制作の経験を活かしてテーマや検索、デプロイまで手を動かすなら『Build Websites with Hugo』。Goテンプレートやテーマを深く学び、Jamstackの動的機能まで視野に入れる人には『Hugo in Action』が合います。
Hugoのテンプレートを整えると、記事を追加した後も共通レイアウトや更新ルールを保てます。書籍で得た知識をコンテンツ分類や公開手順に反映できるか。それが学びを実務に変える鍵です。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
