All Articles

Gatsby.js + Netlify によるブログ構築手順 (前編)

Gatsby.js という React ベースの静的サイトジェネレータを利用してブログを作成する手順を記載します。 本ブログも Gatsbyjs + Netlify + GitHub で構築しています。

website-design

本記事のゴール

  • Gatsby.js を利用したブログ作成に必要な開発環境をセットアップできる
  • ローカル開発環境で、Gatsby.js によって作成された Web ページにアクセスできる
  • markdown 記法で作成した記事を追加できる

Gatsbyjs とは

国内では耳にすることは少ないですが、近年勢いを増している React ベースの静的サイトジェネレータで、 StaticGen を見ても、その人気ぶりが確認できます。公式ページ が英語のため少し抵抗があるかもしれませんが、チュートリアルも用意されているので順を追って学習を進められます。

「React ベース」と言うと少し抽象的ですが、完全に機能するReact Application と考えて構いません。 簡単に利点を列挙しますが、もちろんこれだけではありません。

  • 高品質で動的な Web アプリを簡単に作成可能 (ブログだけに使うのはもったいないかもしれない)

  • あらゆるデータソースからデータを取り込める

    • Markdownファイル
    • ContentfulやWordPressなどのヘッドレスCMS
    • RESTまたはGraphQL API
    • 等々

  • 自動パフォーマンス調整によるサイト高速化

    • 手動による調整は不要 ！！
    • コードの分割
    • 画像の最適化
    • 遅延読み込み
    • 等々

GatsbyjsのgitHubページ や、Qiita の こちら の方の記事が非常に参考になります。

事前準備

事前に以下の準備をしておきましょう。

  • GitHub アカウントの作成

  • Netlify アカウントの作成

    • こちら から登録
    • GitHub アカウントでログイン可能

  • Node.js

    • こちら から取得
    • npm コマンドの実行に必要

  • Yarn

    • こちら から取得
    • Netlify でのデプロイ時にハマった。npm インストール済みの人も入れるべし。
    • 詳細はこちらの Qiita 記事参照。 npmとは、yarnとは

  • Git

  • 任意のエディタ

    • 私個人のおすすめは VSCode

1. Gatsby のインストール

任意の作業ディレクトリにて、下記コマンドを実行。

npm install -g gatsby-cli

本コマンドにて、マシンに Gatsby CLI をインストールします。

2. ブログの作成

下記コマンドにてブログを作成します。

  • sample-blog の部分はブログ名に当たり、指定した名称のディレクトリが作成される

  • https://**** の部分はブログのテーマを指定します

gatsby new sample-blog https://github.com/gatsbyjs/gatsby-starter-blog

ネットワーク環境に拠りますが、数分かかる場合があります。気長に待ちましょう。 テーマによって出来上がるディレクトリ構成は異なりますが、付属の README.md を確認すれば大体のことは書かれているので問題ないと思います。

(ちょっと寄り道1)

ちなみに私は こちら のテーマを選び、構成は以下の通りでした。 (content に記事を追加するんだなーぐらいの直感的な感覚でしたが概ねあっていました。)

└── content
    ├── pages
    └── posts
└── static
    ├── admin
    └── media
└── src
    ├── assets
    │   └── scss
    │       ├── base
    │       └── mixins
    ├── cms
    │   └── preview-templates
    ├── components
    │   ├── Feed
    │   ├── Icon
    │   ├── Layout
    │   ├── Page
    │   ├── Pagination
    │   ├── Post
    │   │   ├── Author
    │   │   ├── Comments
    │   │   ├── Content
    │   │   ├── Meta
    │   │   └── Tags
    │   └── Sidebar
    │       ├── Author
    │       ├── Contacts
    │       ├── Copyright
    │       └── Menu
    ├── constants
    ├── templates
    └── utils
(ちょっと寄り道2)

私は こちら のテーマを選びましたが、gatsby new *** コマンドがエラー終了しました。

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

詳しく調べてはいませんが、Node.js のバージョン依存のエラーらしい (?)

npm install node-sass@4.14.1

を打ち直したら無事成功したのでOKOK。

3. ローカル実行

cd sample-blog
gatsby develop

success Building development bundle が表示されるまで待ちます。 完了したら、以下にアクセスしてみるとデフォルトで設定されているブログとサンプル記事にアクセスできます。

http://localhost:8000

※Port 8080 ではないので注意、初回アクセス時に？とならないように…

4. コンテンツの追加とブログの編集

基本的なブログの設定は gatsby-config.js, config.js から行います。 記事の追加や設定方法はテーマによって異なりそうですが、私の場合は

└── content
    ├── pages (固定ページ)
    └── posts (個別の投稿記事)

以下に .md ファイルを追加することで変更できました。

なお、gatsby develop によるローカル実行中はホットデプロイされるため、記事の追加 / 修正は即時反映されます。 Markdown記法に関しては、こちら をご参照ください。

後編へ

後編 では、ローカルで作成したブログを Netlify (Webサーバ。一定枠無料) へ載せ、公開する手順を紹介します。

Published 6 May 2020

しばいぬ好きエンジニア