Front End Programming

Gatsbyブログサイト移行物語~インストールからNetlifyデプロイまで~

ReactGatsbygit

現在、前から気になる静的サイトジェネレーターのGatsbyJSでブログを作り直しています。

今回はインストールして、Netlifyでデプロイしてウェブサイトを公開するまでの方法をご紹介します。

このサイト表示の重さに耐えかねて、サクラのレンサバ×concrete5でブログ書くのを断念することにしました。

※ Mac以外では検証してません。ご了承ください。

※ 2021年12月28日v4対応のためリライトしました。

今までのGatsbyの記事と注意点

現在ここまで記載しています。
制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。

  1. インストールからNetlifyデプロイまで(←イマココ)
  2. ヘッダーとフッターを追加する
  3. 投稿テンプレにカテゴリやらメインビジュアル(アイキャッチ)追加
  4. ブログ記事、カテゴリ、タグ一覧の出力
  5. プラグインを利用して目次出力
  6. プラグインナシで一覧にページネーション実装
  7. 個別ページテンプレート作成
  8. プラグインHelmetでSEO調整
  9. CSSコンポーネントでオリジナルページを作ろう!!
  10. 関連記事一覧出力
  11. タグクラウドコンポーネントを作成する
  12. パンくずリストを追加する
  13. 記事内で独自タグ(コンポーネント)を使えるようにする
※ Gatsbyは2021月12月、v4にバージョンアップしています。随時リライトしています。

このシリーズはGithub・gatsby-blogに各内容ブランチごとで分けて格納しています。

今回はinstall-deployにあります。

Gatsby(JS)とは?

Gatsby(JS)はReactで作られた 静的サイトジェネレーター です。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理をカンタンに行うことができます。

Gatsbyとは?

公式サイト

生成される静的サイトは SPA(シングルページアプリケーション) でもあるので、表示速度も速く感動します。

Gatsby(JS)の気になる難易度

難易度はJS触れる人ならなんとかいけると思います。
1から作ること考えたら超楽です! Reactの入口としてはオススメです。コンポーネント作る練習にもなります。

ES6以上の記述方法がある程度知っている。
あとGraphQLの使い方知らないと慣れるまでしんどいかもしれません。

ReactGraphQLについてはこのブログの最後の方に説明足してます。興味あったら読んでください。

Gatsby JS をインストール

まずは、Gatsbyをグローバルにインストールします。 インストールできない場合は、sudo実行してください。

Minimal Node.js version 14.15.0

現時点でのv4で必要とするNodeの最低バージョンは14.15.0です。バージョンの上げ方が分からない方はこちらをご覧ください。

コマンド
npm install -g gatsby-cli

もしくは

コマンド
sudo npm install -g gatsby-cli

スターター用テンプレートをインストール

まずはスターター用テンプレートをインストールしましょう。

Gatsby Starter Library

一番メジャーでベーシックなGatsby Starter Blogをインストールします。

Gatsbyとは?

公式ページのStarterの中に「gatsby-starter-blog」があるので「Install with gatsby-cli」から以下コードをコピーします。

コマンド
npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

gatsby-starter-blog はディレクトリー名なのでお好みで変えてください。

コマンド
npx gatsby new my-project https://github.com/gatsbyjs/gatsby-starter-blog

cdコマンドで移動します。

コマンド
cd my-project
かみーゆ
かみーゆ

私は普段 VS Code からコマンドを使います!Gatsbyのディレクトリーができたら、そのディレクトリをVS Codeで開くことをオススメします。

Netlifyにデプロイしたいのでgitにも追加します。

今回私はgithubを使い、公開設定で制作することにしました。

https://github.com/

新しくリポジトリ

早速新しくリポジトリを作ります。
とくに設定せずデフォルトのままで追加します。

デフォルトのまま

以下は実際制作中のリポジトリです。

gatsby-theme

コミットできるようにしておきます。
まずは「first commit」とコメントしてコミット。

コマンド
git init
git add .
git commit -m 'first commit'

リモートと連携します。連携するURLはgithubのリポジトリページから取得しておきます。

リモートと連携します。連携するURLはgithubのリポジトリページから取得

以下のコマンドでリモートリポジトリと連携できます。

コマンド
git remote add origin https://github.com/yuririn/gatsby-theme.git

gitアカウントを複数使い分けている人は、ssh接続じゃないとpushできないので以下のコマンドで。

コマンド
git remote add origin git@github.com:yuririn/gatsby-theme.git

注意!!!

最近、githubのポリシーが変わって複数のアカウントでhttpsでのpushができなくなりました。
その場合は、鍵設定が必要です。
設定の仕方はこちらを参考に。 GitHubでssh接続する手順公開鍵・秘密鍵の生成から

とりあえず今回は mainブランチ へプッシュできるようにしておきましょう!!

コマンド
git push --set-upstream origin main

追加できているか確認。

コマンド
git remote -v

Gatsbyを起動してみる

早速Gatsbyを起動してみましょう!

以下コードでタスクランナーが走ります。

コマンド
npm start

他にもコマンドがいくつかありますが、頻繁に使うのはnpm run cleanぐらいです。

コマンド詳細
npm start開発サーバーを起動
npm run buildビルド
npm run serveビルドした内容を動かす
npm run formatコードの整形
npm run cleanローカルのキャッシュなどの削除

初期設定等を変更しよう

ファイル gatsby-config.js から初期設定を変更しておきましょう!

サイトメタ情報変更。お好みで変更してください。

gatsby-config.js
siteMetadata: {
  title: `銀ねこアトリエ`,
  author: {
    name: `かみーゆ`,
    summary: `セブ島に住むフロントエンドエンジニア`,
  },
  description: `セブ島に住むフロントエンドエンジニアの気ままな日記`,
  siteUrl: `https://ginneko-atelier.com/`,
  social: {
    twitter: `lirioY`,
  },
},

記事を追加しよう!

さらに記事を追加します! 記述方法はMarkdownです。

記事はcontent/blog内に格納されています。

gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/content/blog`,
      name: `blog`,
    },
  },
],

投稿:test.mdを追加してみよう

/blogディレクトリー直下にtest.mdを追加してみましょう!

構造は以下の通り。

タイトルやメタ情報を追記できるfrontmatterの部分と、本文に当たる部分の2パートあります。 タイトルやメタ情報を追記

以下の通りfrontmatterを書いてみます。

test.md
---
title: テスト投稿
date: 2020-11-26
description: この記事はテスト投稿です
---

以下はSEO的に大切なので抜かりなく記述しておきましょう。

  • title … タイトル
  • date … 日にち。-(ハイフン)でくぎる
  • description … 記事の説明

それに続けて適当に本文を書いてみましょう!

test.md
## 見出し2
はじめての投稿です!ワクワク、ドキドキ!

今回はテスト練習なので、これでコミット&プッシュしてデプロイしてみます。

ファイルの追加

コマンド
git add .

通常のコミット。

コマンド
git commit -m '記事追加'

今回は次のようにコミットメッセージを概要と詳細に分けたい時は間に改行を挟みます。

コミットメッセージを概要と詳細に分ける
コマンド
git commit -F- <<EOM
>記事追加
>
>テスト記事を投稿する
>EOM

EOM入力で終了できます。

もしコミットのコメントを間違えたと思ったらctrl + cで一旦抜けて入力しなおしましょう。

Netlifyへデプロイする

Netlify を git と連携して mainブランチ に push されたデータが反映するように設定しましょう!

Netlify公式サイト

Netlify公式サイト

右上のSign Upから入って、githubと連携させます。

Netlify右上のSign Upから入って、githubと連携

「New site from Git」からリポジトリを追加します。

「New site from Git」からリポジトリを追加

Continuous DeploymentからGitHubを選択。

「New site from Git」からからリポジトリを追加

勝手に公開用のディレクトリpublicとbuildコマンドgatsby buildが選ばれます。
あとは「Deploy site」ボタンをクリックするだけです!

「Deploy site」ボタンをクリック

これで少し待ったら、デプロイのステータスがpublishedとなるはずです!!

Node のバージョンにご注意(2021/12/12追記)

初期デプロイ時にデフォルトで最新の安定バージョンのNodeがインストールされます。以後引き続き最初インストールされたNodeが使用されます。 現段階(2021/12/12)ではNetlifyは現在12.x.x以上でないと使えません。

ビルドでコケます

古くなってしまった場合は、Nodeのバージョンを設定し直します。

Site setting > Build & deploy > Environment に移動。

Site setting
Environment variables に Key => NODE_VERSION value => x.x.x(設定したいバージョン)をセットして保存(Save)します。 Environment variables

必ず、Netlifyで使用できるバージョンを確認しておいた方がいいいです。

これで次回のデプロイ時から、新しいバージョンが使えます。 デプロイ時から、新しいバージョンが使える
Gatsby ではバージョンごとにNodeの求められるversionが違うので注意してください。
Gatsby v4 アップグレード時にハマりました

ウェブサイトのリニューアルがようやく終わりました。WebP対応しつつv3にアップグレードする予定たったのですが、Gats...

まとめ

いかがでしたでしょうか?
Github と連携して、gitのコマンドで mainブランチ に push するだけで公開できるようになったかと思います。

次回は「ヘッダーとフッターを追加する」をご紹介します!

最後までお読みいただきありがとうございました。

参考 & Wiki

今回難しい用語が多かったので、Wikiをつけました。参考にしてください。

静的サイトジェネレーターとは?

静的なHTML/CSS & JavaScriptを生成するツールのこと。

Reactとは?

Facebookの開発したJavaScriptのフレームワーク・ライブラリの1つです。 UIのパーツ(構成部品)、いわゆるコンポーネントを作り、組み合わせてウェブサイトなどをできます。 パーツを再利用できるのが最大の特徴です。

Reactってなんぞ?

React 公式サイト

GraphQLとは?

Facebookが開発しているWeb APIのための規格で「クエリ言語」と「スキーマ言語」の2つから構成されています。

  • クエリ言語は、GraphQL APIのリクエストのための言語で、これはさらにデータ取得系のquery、データ更新系のmutation、サーバーサイドからのイベントの通知であるsubscriptionの3種類があります。なお、この記事では、総称としてのクエリ言語は「クエリ言語」と書き、クエリの3種のひとつであるqueryは「query」と書くことにします。
  • スキーマ言語は、GraphQL APIの仕様を記述するための言語です。リクエストされたクエリは、スキーマ言語で記述したスキーマにしたがってGraphQL処理系により実行されて、レスポンスを生成します。

「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ

お読みいただきありがとうございます。
「銀ねこアトリエ」をより良いブログにするために是非応援してください!

銀ねこアトリエを応援する