【初心者向け】Gatsby.jsを使った無料ブログの作り方・必要な知識について紹介する

2022年02月02日 12:34

2022年08月28日 14:30

導入

当ブログは、Gatsby.js を使って作成しています。

今回の記事では、半年間Gatsbyでブログを運営してきた私が、Gatsby.jsに関する基礎知識や特徴、学習ロードマップやブログの作成方法について紹介します。
また、gatsby-starter-blog というテンプレートを使って、ブログの雛形を作成します。

日本語用にカスタマイズする方法など、ノウハウを書いた記事は最後にまとめたので、もしよければ最後まで見ていただけると嬉しいです。

Gatsby.jsとは

Gatsby.js は React 製の静的サイトジェネレータです。

静的サイトジェネレータとは、ソースコードからHTMLファイルなどからなる静的なサイトを生成するツールのことです。
静的サイトジェネレータの説明とWordPressとの比較は前回の記事で紹介しているので、そちらをご確認ください。

Gatsby.jsには以下の5つの特徴があります。

表示速度が速い
テンプレートが豊富
プラグインも豊富
PWAに簡単に対応できる
ヘッドレスCMSとの連携も可能

それぞれ順に紹介していきます。

表示速度が速い

静的サイトジェネレータなので、表示速度が非常に速いです。

上の画像はChromeに付属しているLighthouseというツールで測定した結果（Desktop）ですが、速度や評価項目が良好であることがわかります。
特にチューニングしなくても速度が速いのは大きな利点です。

テンプレートが豊富

https://www.gatsbyjs.com/starters/

テンプレート（スターター）の種類が豊富で、公式のものからコミュニティが作っているものまで、非常に多くの種類のテンプレートが揃っています。

ブログ以外にも、ポートフォリオ用やドキュメント用、ECサイト用など種類は様々です。
少ないコマンドで必要最低限動かせるところまで設定できるため、初心者に優しいと思います。

プラグインも豊富

https://www.gatsbyjs.com/plugins

機能追加をするためのプラグインも豊富です。
公式・コミュニティ含めて、2500以上のプラグインがあるようです。

例えば以下のようなプラグインがあります。

Google Analytics
Sass
Shopify

また、プラグインを追加する際もnpmかyarnでインストール後、設定ファイルに追加するだけで簡単に使えるようになります。

PWAに簡単に対応できる

プラグインを入れることで、Webサイトをアプリのように使えるPWA（Progressive Web Apps）に簡単に対応することができます。
使うテンプレート（スターター）によっては、すでにインストールされている場合もあり、gatsby-starter-blog の場合は既にインストール済みです。

ヘッドレスCMSとの連携も可能

microCMS や contentful などのヘッドレスCMSとの連携も可能です。
プラグインのインストールや対応するテンプレートを使うことで、比較的簡単に連携できます。

ヘッドレスCMSとは、画面の表示などのフロントエンド部分を持たないCMSのことで、従来のCMSと比べてサイトスピードとセキュリティの改善が見込めます。

必要な知識

Gatsby.jsでは、主に以下の2つを使います。

React.js
GraphQL

基本的なページや機能の実装はReact.jsで、ページやコンポーネント間のデータの受け渡しにGraphQLを使います。

しかし、細かくカスタマイズしない場合はGraphQLの知識は不要です。
GraphQLは実際に使ってみて、機能追加したいときに少しずつ学んでいくのが良いと思います。

学習ロードマップ

学ぶ順番としては、(HTML/CSS→)JavaScript (ES6以降) →React の順です。
ここまでが必須で、必要がある場合にGraphQLを学ぶのが良いです。

学ぶ教材としては何でも良いですが、

一人で進めることができる場合は、公式ドキュメントやブログ、Udemy
教えてもらいたい場合は、プログラミングスクール

で学ぶと良いと思います。

ブログの雛形の作成

それでは、Gatsby でブログを作成する具体的な手順について説明します。
手順はすごく簡単で公式チュートリアルに沿ってコマンドを打つだけです。

簡単に手順を紹介します。
まず、https://nodejs.org/ja/ にアクセスし、LTS のほうをダウンロード＆インストールします。

次に、Git をインストールしていない場合は、インストールします。
Windows の場合
 mac の場合
 Linux の場合

そして、Git Bash・ターミナル上で以下のコマンドを打ちます。

npm install -g gatsby-cli

最後に、ブログのフォルダを作成したい場所に移動し、以下のコマンドを入力すると Gatsby に関するファイルが入ったフォルダが作成されます。

gatsby new (作成したいフォルダ名) https://github.com/gatsbyjs/gatsby-starter-blog

これで、あっという間にブログの雛形が完成します。
（*今回使った雛型はgatsby-starter-blogという公式のスターターです。）

サイトを表示するためには、以下のコマンドを打ちます。

cd (作成したフォルダ名)
gatsby develop

これで、http://localhost:8000/ にアクセスすると、確認できます。
確認ができたら、Ctrl+Cで終了してください。

ブログのカスタマイズ方法

このテンプレートでマークダウンから記事を作成する機能など、ブログとしての必要最低限の機能は実装されていますが、実際にブログを運営するには不十分です。

私は様々なカスタマイズをして、その実装方法をブログの記事としてまとめています。
いくつか記事を載せておきますので、良ければ参考にしてください。

終わりに

今回は、Gatsby を使ったブログ作成に必要な前提知識と、実際にブログの雛形を作成する方法を紹介しました。
今回作成したサイトのままではデザインが日本語向けにはなっていないので、次の記事でカスタマイズ方法を紹介したいと思います。