目次
はじめに
第1章 Webサイトを作ろう
第2章 静的サイトジェネレーターとは何かを知ろう
第3章 Hugoの魅力を知ろう
第4章 Hugoをインストールして自作サイトを公開しよう
第5章 カスタマイズして自分の手に馴染むツールにしよう
第6章 AMPでWebサイトの表示高速化に挑戦しよう
第7章 他CMSからHugoに移行しよう
あとがき
参考文献・URL
はじめに
「Hugoで始める静的サイト構築入門」を手に取っていただきありがとうございます。めがにい（@meganii）と申します。本書では、静的サイトジェネレーター「Hugo」を利用した静的サイトの構築方法について、私が調べたり実際に試したりした内容をまとめています。
Hugoはカスタマイズ性が高く、柔軟にサイトを構築できるパワフルなツールです。何かやりたいことや困ったことがあった際も、Hugoの公式ドキュメントやコミュニティフォーラムを参照すれば解決することが多いです。しかし、日本語での情報は少なく、基本的に英語の情報のみとなります。Hugoの日本語情報を増やすこと、ならびに日本でのHugo利用拡大に貢献したいと考えて、本書を執筆しました。
読んでいただいた方に、少しでも「読んで良かった」と思っていただける内容であれば幸いです。
想定している読者
想定している読者は次のような方です。
・個人サイトとしてWordPressなどのCMSを利用しているが、セキュリティアップデートなどの運用が大変で別のCMSへの移行を検討している
・できるだけお金を掛けずに個人サイトを構築・運用したい
・自分だけのオリジナリティのあるサイトを作りたい
・日常的に利用するサイト構築ツールをカスタマイズしたい
・すでにHugoを利用していてAMP1対応したい
・自分で作るコンテンツは自分で管理したい
表記関係について
本書に記載されている会社名、製品名などは一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©︎、®️、™️マークなどは表示していません。
免責事項
本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。
ライセンス
表紙のGopherの原著作者はRenee French2氏です。
静的サイトジェネレーター「Hugo」のバージョン
本書で扱うHugoのバージョンは、2020年11月1日現在の最新バージョンである0.77.0をベースにしています。
第1章 Webサイトを作ろう
この章ではWebサイトを作る目的別に作成・構築方法を整理し、その中でも本書が対象とする「静的サイトジェネレーターを利用したWebサイト構築」の位置付けについて説明します。
なお、本書ではWebサイトの「作成」と「構築」をそれぞれ次の位置付けで利用しています。
Webサイト作成： Webサイトを作ること全般を指す。
Webサイト構築： Webサイト作成の中でも特に、Webサイトを動作させる環境を含めて作成することを指す。1.1 Webサイトを作成する目的
あなたがWebサイトを作成する目的は何でしょうか。
たとえば、営業・集客ツールとしての利用、人材採用や情報発信など、Webサイトで実現できることはさまざまで、企業や人によって目的は異なると思います。
本書では、個人による情報発信を目的としてWebサイトを作成・構築することに焦点を当てています。情報発信の例としては、学習や成果物のアウトプット、日々の思考、記録を残すことなどです。
1.2 Webサイト作成サービス／ツール
2020年現在、個人による情報発信のためのWebサイトを作成・構築する場合、どのような選択肢があるでしょうか。「Webサイトを作成・管理するためのツール全般」のことを広義のCMS1と捉えて、Webサイト作成サービス／ツールを図1.1のとおり分類しました。
次に各サービス／ツールの特徴を説明します。
1.2.1 CMS クラウド型
サービス提供元が提供するサービスを利用してWebサイトを作成する方式です。Webサイトのホスティングも兼ねているサービスが多いです。ホスティングとは、サービス提供元のリソースを利用してWebサイトを公開・運用することです。ホスティング利用者は、物理的なサーバを管理することなくWebサイトを公開できます。
クラウド型のCMSは、次の3つに分類できます。
●メディアプラットフォーム
利用者は、サービス提供元が用意する環境の一部を利用し、事前準備不要でサイトを作成できます。ブログ形式のサービスが多く、手軽に始められるのがメリットです。代表的なサービスには、はてなブログ2やnote3などがあります。
●サイトビルダー
利用者は、Web上でのドラッグ&ドロップ操作でWebサイトを作成できます。メディアプラットフォームと比較すると、サイトビルダーのほうが自由なデザインを実現できます。代表的なサービスには、Jimdo4や、WIX5などがあります。
●ヘッドレスCMS
ヘッドレスとはコンテンツ表示の仕組みを持たないことを指しており、ヘッドレスCMSとはコンテンツ管理に特化したサービスです。コンテンツ表示の仕組みがないため、一般的にはサイトジェネレーターと一緒に組み合わせて使います。たとえば、WebエンジニアがWebサイトの表示部分を作成し、コンテンツ作成者（利用者）がヘッドレスCMSを利用してコンテンツを入稿するという分業が可能です。代表的なサービスには、microCMS6、Contentful7などがあります。
1.2.2 CMS セルフホスト型
利用者が自身でサーバーを用意し、CMSを構築・運用する方式です。自由度が高い反面、Webサイト構築や運用にコストが掛かります。セルフホスト型のCMSとして、次の2つに分類できます。
●動的CMS
ユーザーからのリクエストに対して、動的にページを生成・表示する仕組み（動的サイト）のCMSです。動的サイトについては第2章で説明します。代表的なツールには、WordPress8などがあります。
●静的CMS
事前に静的アセット（HTML、CSS、JavaScript、メディアファイル）を生成し、ユーザーからのリクエストに対して生成済のページを表示する仕組み（静的サイト）のCMSです。静的サイトについては第2章で説明します。代表的なツールには、Movable Type9などがあります。
1.2.3 CMS ジェネレーター型
あらかじめWebサイトに必要なファイルを生成し、そのファイルをホスティング先にアップロードする方式です。
●Web制作ツール
HTML、CSS、JavaScriptなどの知識を持たなくても、PCの画面上でWebサイトを見たまま作成・編集できるツールです。Webオーサリングツールと呼ばれることもあります。代表的なツールには、ホームページ・ビルダー10やAdobe Dreamweaver11などがあります。
●サイトジェネレーター
Webサイトに必要なページを、決められたテンプレートにしたがって生成します。ページ生成には、コマンドラインを利用する場合が多いです。代表的なツールには、静的サイトジェネレーターなどがあります。本書で扱う「静的サイトジェネレーターHugo」もこのサイトジェネレーターに位置付けています。
1.2.4 CMS以外
●HTMLコーディング
HTMLおよびCSSをゼロから直接コーディングして、Webサイトを構築する方式です。サービスやツールに依存せず自分の好きなように構築できるものの、コンテンツ管理からサイト構築まですべてを利用者自身で実施する必要があります。