Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
36
Help us understand the problem. What is going on with this article?
@Shagamii

2日で(就活のために)gatsby, contentful, netlifyでJAMstackなブログを作った話

More than 1 year has passed since last update.

はじめに

この記事はJAMstack advent calendar15日目の記事です!
僕は東京理科大学の学部3年生なのですが、就活を控えてなんかパッと見せれるブログ欲しいなーと思っていたところ、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の1つです。
モデルを定義するだけで記事を書くことができますし、記事同士の連携といったものも気軽に出来るので例えば食のブログを作るときに、記事のモデルとお店のモデルを作って記事のお店みたいなことも簡単にできたりします。
また、gatsbyやnetlifyとの相性も非常によく、モデルを定義するだけでgatsbyでgraphqlを書くことでcontentfulからデータを取ってこれますし、contentfulで記事を編集する毎にnetlifyでビルドをさせる連携なども非常に簡単に行うことができます。

netlify

netlify は、サイトのホスティングに利用するのですが、ホスティングした際にビルドをしてくれたり、該当のgithubにpushされる度にビルドするフックを簡単にしてくれたり、環境変数も簡単に登録できたり、カスタムドメインも超簡単に設定出来る至れり尽くせるなサービスです。
🙇‍♂️そして、なんと基本的な機能が無料で使える!🙇‍♂️

参考記事: 知ってました?Netlifyにはこんな機能もあるんだよ!

要するに

reactで書いたサイトをgatsbyが静的サイトにビルドしてくれて、そのビルドする際にcontentfulからデータを取ってくる、これらをnetlify上で行いホスティングまでしてくれる。

といった流れです。
ここからは、作った流れについて時間と共に書いていきます。

contentfulを使ってapiを作る(20分)

  1. アカウント登録 (5分)
  2. Modelを作る(15分)
    • フォームの名前や種類を選ぶだけで簡単にできます。

本当に20分もかからずに終わります。衝撃的な簡単さ。

gatsbyでReactをゴリゴリ書く(1日半)

  1. boilerplateを生成(5分)
  2. contentful周りのプラグインを入れる(10分)
  3. データ取得の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日でブログできました!
手順の1つ1つを詳しく解説している形ではありませんでしたが、この手順で進めていただければブログが完成しますので、この手順をキーワードにググったりで解決してみてください!(結構、しっかりtutorial書くつもりが全部書くと対策になることに気づいてしまった。。)
もっと詳しくここ書いて欲しい等あればコメントもしくはtwitterへ連絡してください!

36
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Shagamii
Web Developer🕸

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
36
Help us understand the problem. What is going on with this article?