はじめに
この記事はJAMstack advent calendar15日目の記事です！
僕は東京理科大学の学部３年生なのですが、就活を控えてなんかパッと見せれるブログ欲しいなーと思っていたところ、10月に開催された技術書典で @mottox2 さんの「GatsbyJSで作るモダンウェブサイト」を読ませていただき、この手法を使えば2日くらいでハイパフォブログ出来るわ！！と思い立ち、2日で（就活のために）JAMstackなブログを作ったのでその時の経験等を共有させていただきます！
JAMstackとして何を使ったと言いますと、
- gatsby
- conetntful
- netlify
という、このアドベントカレンダーでは一番オーソドックスでとっつきやすい感じなのかなと思いますので、今からJAMstackやるぞ！と思っている方が何をやればいいのか分かるように書きたいと思います！
作ったブログ
今回作成したブログは以下のURLで見れます！
https://shagamii.tech
使用した技術
軽く先ほど説明しましたが、それぞれの技術が何をやってくれるものかを説明していきます。
gatsby 
gatsbyはreact製の静的サイトジェネレーターです。
ただreactで書いたものを静的サイトにビルドしてくれるだけではなく、入れるだけでtypescriptが書けるようになったり、contentfulを使えるようにしてくれたり、build時にreact-helmetを使えるようにしてくれるなど、ブログを書くのにはすごい便利な様々なプラグインを使うことができます。
contentful 
contentfulはheadless cmsの１つです。
モデルを定義するだけで記事を書くことができますし、記事同士の連携といったものも気軽に出来るので例えば食のブログを作るときに、記事のモデルとお店のモデルを作って記事のお店みたいなことも簡単にできたりします。
また、gatsbyやnetlifyとの相性も非常によく、モデルを定義するだけでgatsbyでgraphqlを書くことでcontentfulからデータを取ってこれますし、contentfulで記事を編集する毎にnetlifyでビルドをさせる連携なども非常に簡単に行うことができます。
netlify 
netlify は、サイトのホスティングに利用するのですが、ホスティングした際にビルドをしてくれたり、該当のgithubにpushされる度にビルドするフックを簡単にしてくれたり、環境変数も簡単に登録できたり、カスタムドメインも超簡単に設定出来る至れり尽くせるなサービスです。
🙇♂️そして、なんと基本的な機能が無料で使える！🙇♂️
参考記事: 知ってました？Netlifyにはこんな機能もあるんだよ！
要するに
reactで書いたサイトをgatsbyが静的サイトにビルドしてくれて、そのビルドする際にcontentfulからデータを取ってくる、これらをnetlify上で行いホスティングまでしてくれる。
といった流れです。
ここからは、作った流れについて時間と共に書いていきます。
contentfulを使ってapiを作る（２0分）
- アカウント登録 (5分)
- Modelを作る(15分)
- フォームの名前や種類を選ぶだけで簡単にできます。
本当に20分もかからずに終わります。衝撃的な簡単さ。
gatsbyでReactをゴリゴリ書く(1日半)
- boilerplateを生成(5分)
- contentful周りのプラグインを入れる(10分)
- データ取得のgraphqlを書く(45分)
4. 記事ページなど動的に生成したいページは gatsby-node.js に書いて設定をかく。(45分)
5. あとは必要に応じて、プラグインを入れつつゴリゴリreactを書く。
ちなみに僕が最初のデフォルトで入っているプラグイン以外で入れたものは以下になります！
| プラグイン名 | 内容 |
|---|---|
| gatsby-plugin-typescript | typescript, tsxのサポート |
| gatsby-source-contentful | graphqlを用いてcontenfulからbuild時にデータを取ってこれるようにする |
| gatsby-transformer-ramark | markdownのデータのときにhtmlに変換出来るようにする |
| gatsby-plugin-styled-components | build時にstyled-componentsのサーバサイドレンダリングのサポート |
| gatsby-remark-prismjs/ | markdownのコードブロックにシンタックスハイライトをつける |
netlifyにデプロイする（90分）
- アカウント登録(5分)
- ビルドするレポジトリの登録、環境変数の登録とかもろもろ(25分)
- ドメインの購入からnetlifyのカスタムドメイン登録まで
- 初めてのドメイン購入で時間がかかりました笑
まとめ
こんな感じで見事2日でブログできました！
手順の１つ１つを詳しく解説している形ではありませんでしたが、この手順で進めていただければブログが完成しますので、この手順をキーワードにググったりで解決してみてください！（結構、しっかりtutorial書くつもりが全部書くと対策になることに気づいてしまった。。）
もっと詳しくここ書いて欲しい等あればコメントもしくはtwitterへ連絡してください！