Webサイトやブログを高速化、PWA対応！静的サイトジェネレーターの導入方法を詳しく解説した入門書

これからのWebサイトに求められる要件「高速化」「メタデータ」「PWA」などに対応するための一つの答えが、静的サイトジェネレーターだと思います。Reactベースの静的サイトジェネレーター「GatsbyJS」で、Webサイトやブログを構築する手順を詳しく解説した入門書を紹介します。

ReactやJavaScriptに自信が無くても、非常に分かりやすい解説なので、必要となる制作知識を身につけることができます。

本書は、6/1発売です！
著者はWeb制作系の解説書で分かりやすさで評判のエビスコム様。初心者の人でもサンプルサイトを制作しながら、ステップ・バイ・ステップで静的サイトジェネレーターの構築を学ぶことができます。

Kindle版も6/1に、同時発売です！

• 静的サイトジェネレーター活用入門 Kindle版

しかも特典がPDF2冊で、かなり豪華です！
Node.js、GitHub、Netlify、Contentfulなど開発環境の準備などをまとめたPDFとヘッドレスCMSのmicroCMSを利用する方法をまとめたPDFをサポートサイトからダウンロードできます（本書P-7を参照ください）。

特典PDF 1: セットアップ 78ページ

特典PDF 2: microCMS対応ガイド 59ページ

そんな紙面をキャプチャで少しだけ紹介します。

本書は大きく分けて、2部構成となっており、第1部はWebサイトの構築、第2部はブログの構築です。

第1部では下準備として、開発環境を整えます。本書ではGatsbyのインストールとセットアップが中心で、WindowsやmacOSやLinuxそれぞれの環境での準備手順は、特典のセットアップPDFに詳しく解説されています。

準備が完了したら、さっそく実際のページを編集します。
本書のサンプル制作で使用する素材、プロジェクトデータ、コンテンツデータはサポートサイトからダウンロード可能です。

実際のサンプルデータの変換ポイントなどもコードベースで解説されており、記述ルールなども明記されているので、非常に分かりやすいと思います。

終了したら、サーバーにアップしてテストしてみます。Gatsbyで作成したサイトは、FTPなども利用しなくても、手軽に公開・更新することができます。

一通り流れを理解したら、本格的なサイト構築の手順です。ページを増やしたり、コンポーネントを作成したり、通常のサイト構築と同じです。

もちろん、それぞれの項目ごとに詳しくその手順が解説されているので、安心して学べます。

メタデータ、OGP、PWA対応もコードベースで詳しく解説されています。

第2部は、ブログの構築。GatsbyではWordPressをはじめ、マークダウン、Googleスプレッドシートなど、さまざまなデータソースを利用できます。

本書で構築の手順が解説されているのは、トップページ、記事ページ、一覧ページ、カテゴリページなどが揃っています。

記事ページといってもそこに含まれている要素はたくさんあります。タイトル・記事はもちろん、アイキャッチ画像、投稿日、カテゴリ、アイコン、コンテンツ内の画像など、ひとつ一つ詳しく解説されています。

記事ページのテンプレートを一つ作成してしまえば、他の記事を自動生成で量産できます。

ナビゲーションやページネーションなど、ブログでよく使用されるコンポーネントも詳しく解説されています。

静的サイトジェネレーター活用入門の目次

0. イントロダクション

   今どきのWebページ&Webサイトに求められること

   CMSの利用と問題

   静的サイトジェネレータ（SSG）という選択

   Gatsbyという選択

   Gatsbyを学ぶために

   制作するサンプルについて

1. 基本的なWebサイトの構築

   ページの作成

   画像の最適化

   パーツのコンポーネント化

   ページを増やす

   メタデータの設定

2. ブログの構築

   ブログのコンテンツを用意する

   ブログの記事ページを作成する

   ブログの記事ページを自動生成する

   ブログの記事一覧ページを作成する

   カテゴリーページの作成

3. 付録

   gatsby-imageを簡単に扱えるようにする

   Googleアナリティクス

   サイトマップ

   RSS

   Google Fonts

   IE11対応

本書では静的サイトジェネレーター「Gatsby」によるサイト構築・ブログ構築だけでなく、GitHub、Netlify、Contentful、GraphQL、React、Node.jsなど、制作に関わるさまざまなツールや技術についても学べます。「これからのWeb開発」について興味がある人に特にお勧めします。

献本の御礼

最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス