Gatsby を使って新しく備忘録ブログを作成した - part 1

📅 August 25, 2019

⏱️4 min read

静的サイトジェネレーターであるGatsbyを使って新しく備忘録ブログを作成したので、 早速その備忘録。

参考になるサイトたち

gatsby のインストール

npm install -g gatsby-cli

gatsby のスターターテンプレートをクローンする

今回は、gatsby-starter-gcnというスターターを使います。

上記サイトにあるように、以下のコマンドを実行して、コードをクローン…

gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn

と思ったら、エラーが出た。

Command failed: git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git gatsby-starter-gcn --single-branch

  Error: Command failed: git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git gatsby-starter-gcn --single-branch

  - index.js:174 makeError
    [lib]/[gatsby-cli]/[execa]/index.js:174:9

  - index.js:278 Promise.all.then.arr
    [lib]/[gatsby-cli]/[execa]/index.js:278:16


  - next_tick.js:188 process._tickCallback
    internal/process/next_tick.js:188:7

仕方がないので、gatsby-starter-gcnのリポジトリ から、直接クローンすることにします。

git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
cd gatsby-starter-gcn
npm install

Contentfulの接続

このスターターテンプレートは、Headless CMSであるContentfulと接続できるようになっているので、 セットアップを実行します。

セットアップにはContentfulのアカウントが必要。 あらかじめサインアップをして、API keyを発行 してください。

便利なことに、npm run setupを実行してAPI keyを入力すると、自動的に Content modelやサンプルのContentを作成してくれます。

❯ npm run setup

  To set up this project you need to provide your Space ID
  and the belonging API access tokens.

  You can find all the needed information in your Contentful space under:

  app.contentful.com -> Space Settings -> API keys

  The Content Delivery API Token
    will be used to ship published production-ready content in your Gatsby app.

  The Content Preview API Token
    will be used to show not published data in your development environment.

  The Content Management API Token
    will be used to import and write data to your space.

  Ready? Let's do it! 🎉

? Your Space ID [space idを入力してください]
? Your Content Delivery API access token [delivery api tokenを入力]
? Your Content Preview API access token [preview api tokenを入力]
? Your Content Management API access token [management api tokenを入力]

ローカルで起動

上の設定が終わったら、ローカルでサーバーを立ち上げてみます。

gatsby develop
# or
npm run develop

コマンドを実行すると、デフォルトでlocalhost:8000でサーバーが立ち上がります。

DONE  Compiled successfully in 6782ms
13:09:55
⠀
⠀
You can now view gatsby-starter-gcn in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use npm run build

はまったポイント

デフォルトのポストをすべて消し、あたらに1つだけポストを足したらビルドでエラーが出るようになってしまいました。

Unknown field 'metaDescription' on type 'ContentfulPost'

リポジトリを見てみるとひっそりと書いてありました。

IMPORTANT: Be sure to manually enter at least one meta description on a page and post in Contentful or the site will fail to build.

とうことで、1つポストを作成して、一番下にあるMeta Description欄に何かしら記入したら、 ちゃんとビルドできました!

Well done

とても簡単にローカルでサーバーを立ち上げることができました。 次は、このサイトをNetlifyにデプロイしていきます。