2019/12/23

GatsbyJS + Netlify + Netlify CMSでブログをつくりました

GatsbyJSNetlifyReact

はじめまして！gesomoriといいます。この記事では、なぜGatsbyJS、Netilfy、Netlify CMSという構成でブログを作成したのかということについて書きたいと思います。

GatsbyJSとNetlify CMSを使ったブログの作り方は、いろいろな方が既に解説してくださっているので、この記事では解説しません。この構成でのブログ作成方法はGatsbyJSの公式サイトにある「Making a Gatsby Blog with Netlify CMS」の記事がわかりやすいので、おすすめです。

ブログの構成を考える

ブログを作るにあたって、自分なりに以下のよう基準を考えてみました。

  • ReactかVue.jsのどちらかを使う
  • Markdownで記事が書ける
  • 新しい技術を学べる
  • 表示が高速である
  • 無料でできる

CMSを自分で作成することも考えましたが、記事を出すまで時間がかかりそうだなと思い、今回はとりあえずCMSを利用することにしました。

フレームワークの選定

まずは使うフレームワークの選定ですが、表示が高速であるということを考えて今回は静的サイトジェネレーターを使って、いま流行りのJAMstackなサイトにしようと思いました。ReactかVue.jsを使って静的サイトを作るとなると、VueだとNuxt.js、ReactだとNext.jsやGatsbyJSが考えられます。Nuxt.jsやNext.jsはSPAのサイトを制作する際に使ったことがあるのですが、GatsbyJSは未経験だったので、とりあえず公式サイトにあるチュートリアルをやってみました。

GatsbyJSの基本的なチュートリアルを最後までやると、Markdownで書いた記事を表示するサイトが完成します。非常にシンプルでわかりやすく、まさに自分がやりたかったことだと思い、GatsbyJSでブログを作成することに決めました。

もうひとつ決め手となったのは、GatsbyJSがGraphQLを使って内部のデータを取得できるところです。GraphQLは最近様々なサービスで活用されており、ぜひ勉強したいと思っていたのでちょうど良かったです。

たとえば記事ページでは、以下のようなクエリを記事ページのComponentのファイルに記述すると、ReactのComponentにdataとして渡され、ComponentからMarkdownで書いた記事の情報へアクセスできます。

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        date(formatString: "YYYY/MM/DD")
      }
      fields {
        slug
      }
      html
    }
  }
`

このコードを見ただけでは何をやってるのかわからないと思いますので、ぜひチュートリアルをやってみてください！Reactを既に学んだことがある方なら数時間で終わると思います。また、GatsbyJSは更新も頻繁に行われており、ブログを作成するためのプラグインが豊富なのも良いです。公式のドキュメントも充実しています。

ホスティングサービスの選定

次はホスティング先を検討してみました。静的サイトをホスティングできるサービスはたくさん選択肢があると思いますが、最終的にGitHub PagesとFirebase HostingとNetlifyに絞りました。カスタムドメインやSSLなどはどれも設定できるので、無料枠の転送量とストレージの上限を比較してみました。

GitHub Pages

  • 転送量：100GB/月
  • ストレージ：1GB

Firebase Hosting

  • 転送量：10GB/月
  • ストレージ：5GB

Netlify

  • 転送量：100GB/月
  • ストレージ：100GB

ストレージの上限を比較すると、Netlifyが100GBまでと群を抜いています。転送量を比較した場合、Firebase Hostingが月10GBに対して、NetifyやGitHub Pagesは月100GBまでです。個人ブログですが、月10GBだと上限を超えてしまう可能性があると思い、今回は総合的に考えてNetlifyを選択しました。ちなみに、調べてみるとNetlifyよりFirebase Hostingのほうが高速だという記事をいくつか見ましたが、いまのところNetlifyでの表示も遅くないですし、PageSpeed Insightsのスコアも十分高いです。

PageSpeed Insightsのスコア

NetlifyとのGitHubを連携すれば、サイトのコードを更新してGitHubにプッシュすれば、サイトのデプロイも自動化できます。GitHubとの連携も簡単で数分でできました。

CMSの選定

今回フロントエンドはGatsbyJsを利用するので、CMSはHeadless CMSを使うことにしました。ただ正直、Markdownさえ扱えればなんでもいいかなと思っていたので、ホスティング先をNetlifyに決めた時点で、Netlify CMSにほとんど決めていました。実際に使ってみるとカスタマイズも簡単にできますし、GitHubのアカウントでユーザー認証もできます。

Markdownでブログの記事を作成して公開ボタンを押すと、自動的に記事がGitHubにプッシュされ、NetlifyでGatsbyJSのビルドが走るように設定しています。ビルドが終わると自動的にサイトがデプロイされます。もちろん画像ファイルの投稿でも同様のことができ、メディアライブラリなども利用できます。

今後について

今回は勉強のために gatsby new のコマンドを使って、デザインも含めてゼロからブログを構築しました。すぐできるだろうと思っていましたが、タグ機能やページネーション、SEOなど考えることも多く意外と面倒でした。gatsby-starter-blogやgatsby-starter-netlify-cmsを使えば、数時間でブログを作ることができるので、興味がある方はぜひ試してみてください！ほかにもGatsbyJSのStarter Libraryを探せばイカしたブログのテーマがたくさんあるみたいです。

今後は記事を書いてアウトプットしていくことはもちろんですが、ブログの改造を通じてAtomic DesignにおけるReact Componentの構成を考えたり、コードをTypeScriptに書き換えてみたりして、遊んでいこうと思います。