目次

はじめに

想定している読者
表記関係について
免責事項
ライセンス
静的サイトジェネレーター「Hugo」のバージョン

第1章 Webサイトを作ろう

1.1 Webサイトを作成する目的
1.2 Webサイト作成サービス/ツール
1.3 静的サイトジェネレーターによるWebサイト構築

第2章 静的サイトジェネレーターとは何かを知ろう

2.1 静的サイトと動的サイトの違い
2.2 静的サイトと動的サイトのメリット・デメリット
2.3 静的サイトのすすめ
2.4 静的サイトジェネレーターとは何か
2.5 静的サイトジェネレーターのメリット・デメリット
2.6 静的サイトジェネレーターにはどんなものがあるのか

第3章 Hugoの魅力を知ろう

3.1 Hugoの魅力と欠点
3.2 Hugoのすすめ

第4章 Hugoをインストールして自作サイトを公開しよう

4.1 事前準備
4.2 Hugoをインストールする
4.3 Hugoでサイトを構築する
4.4 Hugoで構築したサイトを公開(デプロイ)する

第5章 カスタマイズして自分の手に馴染むツールにしよう

5.1 Hugo Templateの概要を把握する
5.2 タクソノミー(Taxonomies)を理解する
5.3 ショートコード(Shortcode)を作る
5.4 カスタマイズのTips(小技)

第6章 AMPでWebサイトの表示高速化に挑戦しよう

6.1 AMPとは
6.2 AMPを導入する目的
6.3 AMP化を実現する上での留意事項
6.4 AMPサイトを最適化する
6.5 AMP Optimizerによるさらなる最適化
6.6 AMP Real URLを実現する

第7章 他CMSからHugoに移行しよう

7.1 Jekyllからの移行
7.2 はてなブログからの移行
7.3 WordPressからの移行

あとがき

参考文献・URL

はじめに

 「Hugoで始める静的サイト構築入門」を手に取っていただきありがとうございます。めがにい(@meganii)と申します。本書では、静的サイトジェネレーター「Hugo」を利用した静的サイトの構築方法について、私が調べたり実際に試したりした内容をまとめています。

 Hugoはカスタマイズ性が高く、柔軟にサイトを構築できるパワフルなツールです。何かやりたいことや困ったことがあった際も、Hugoの公式ドキュメントやコミュニティフォーラムを参照すれば解決することが多いです。しかし、日本語での情報は少なく、基本的に英語の情報のみとなります。Hugoの日本語情報を増やすこと、ならびに日本でのHugo利用拡大に貢献したいと考えて、本書を執筆しました。

 読んでいただいた方に、少しでも「読んで良かった」と思っていただける内容であれば幸いです。

想定している読者

 想定している読者は次のような方です。

 ・個人サイトとしてWordPressなどのCMSを利用しているが、セキュリティアップデートなどの運用が大変で別のCMSへの移行を検討している

 ・できるだけお金を掛けずに個人サイトを構築・運用したい

 ・自分だけのオリジナリティのあるサイトを作りたい

 ・日常的に利用するサイト構築ツールをカスタマイズしたい

 ・すでにHugoを利用していてAMP1対応したい

 ・自分で作るコンテンツは自分で管理したい

表記関係について

 本書に記載されている会社名、製品名などは一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©︎、®️、™️マークなどは表示していません。

免責事項

 本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

ライセンス

 表紙のGopherの原著作者はRenee French2氏です。

静的サイトジェネレーター「Hugo」のバージョン

 本書で扱うHugoのバージョンは、2020年11月1日現在の最新バージョンである0.77.0をベースにしています。

 ・https://gohugo.io/news/0.77.0-relnotes/

1. AMP https://amp.dev/

2. Renee French http://reneefrench.blogspot.com/

第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.1: Webサイト作成サービス/ツール

 次に各サービス/ツールの特徴を説明します。

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サイトを構築する方式です。サービスやツールに依存せず自分の好きなように構築できるものの、コンテンツ管理からサイト構築まですべてを利用者自身で実施する必要があります。

1. Content Management System: コンテンツ管理システム

2. はてなブログ:https://hatenablog.com/

3. note: https://note.com/

4. Jimdo https://www.jimdo.com/jp/

5. Wix.com https://ja.wix.com/

6. microCMS https://microcms.io/

7. Contentful https://www.contentful.com/

8. WordPress.org https://ja.wordpress.org/

9. MovableType.jp https://www.movabletype.jp/

10. JUSTSYSTEMS ホームページ・ビルダー22 https://www.justsystems.com/jp/products/hpb/

11. Adobe Dreamweaver https://www.adobe.com/jp/products/dreamweaver.html

試し読みはここまでです。
この続きは、製品版でお楽しみください。