はじめに

自サイトの構成が古く（生PHPによるお手製CMS！）なってきたので、新しい技術で置き換えようと思いました。

いろいろ調べてみると、Next.jsかGatsbyというフレームワークが良さそうだったので、こちらはGatsbyを試してみた記事です。

Next.jsについて試してみた記事はこちらです。
https://qiita.com/naga3/items/1aaa8d58bf0e4bfa27b6

Gatsby ＆ Gatsby Cloudについて

Next.jsは動的コンテンツと静的コンテンツの両方に対応していましたが、Gatsbyは静的コンテンツのみの対応みたいです。

Gatsby CloudでGatsbyで作成されたコンテンツのホスティングができます。

Gatsby Cloudは無料プランと有料プランがありますが、個人が普通に使うぶんには無料プランで十分そうです。
https://www.gatsbyjs.com/pricing/

Gatsby CloudはVercelとは違い、独自ドメインが使えません。他のホスティングサービスとの連携が容易にできるので、VercelやNetlifyなどと接続して独自ドメインを使うスタンスのようです。

また、Gatsby CloudではWordPressなどのCMSをデータソースとして接続できます。最近WordPressはAPI対応になったので、フロントとして使う感じでしょうか。

Gatsby Cloudプロジェクト作成

アカウントがなければサインアップしておきましょう。
https://www.gatsbyjs.com/dashboard/signup/

まず、ダッシュボードからAdd a siteを押します。

既存のリポジトリを使うImport from a Git repositoryと、テンプレートから作成するStart from a Templateがありますが、今回はゼロから作るのでStart from a Templateを選びます。

StarterはBlogを選びます。

次にリポジトリを選ぶのですが、GitHubにGatsby Cloudをインストールするか聞かれるのでインストールします。その後リポジトリ名を聞かれるので適当に付けます。

しばらくするとビルドが完了してサイトを見ることができるようになります。

ローカルでの開発

ここからはローカルでの開発になります。nodeやyarnはインストールしておきます。

上で作成したリポジトリをcloneして、

yarn install
yarn develop

を実行するとサーバーが立ち上がって、http://localhost:8000で確認することができます。

予め3ページ作られているようです。

ページの編集

ページの編集はMarkdownファイルで簡単にできるようです。

content/blog/new-beginnings/index.mdを編集してみます。

---
title: こんにちは
date: "2015-05-28T22:40:32.169Z"
description: ページの説明です。
---

こんにちは最初のページです。

保存するとリアルタイムで当該ページ・トップページ両方に変更が反映されました。

http://localhost:8000/new-beginnings/

http://localhost:8000

ページの追加は、/content/blogディレクトリに、そのままMarkdownファイルを置けば良さそうです。

---
title: あはああああああ
---

うほおおおおおおお

ローカルからのデプロイ

そのままmasterにpushすれば本番に反映されます。