Open4

Gatsby.js + Cloudflare Pagesでブログサイトを作っていく(作業しながら順次更新)

Masaki MuranoMasaki Murano

目標

  1. Gatsby.js でブログサイトを構築する
  2. 静的ホスティングで爆速で表示したい。サーバー費用を抑えたい

技術選定

Gatsby.js

安定してそうな印象。
JS技術に触れたい。SEO対策のライブラリなどが使いやすそう。
Contentful連携で、非エンジニアへのCMSとしての応用。

Cloudflare Pages

コスパ良さそう
https://zenn.dev/catnose99/scraps/6780379210136f#comment-116b7733979d5a

Gatsby cloudは気になるけれど、最近できたぽいので回避。
https://www.gatsbyjs.com/docs/deploying-and-hosting/

Masaki MuranoMasaki Murano

やること

こんな感じでやっていき

  • Gatsby.js 調査。ハンズオン
  • Cloudflare pages 調査。ハンズオン
  • ドメイン調査、決定
  • テンプレとキービジュアル決定
  • デプロイテスト
  • WF作成
    • Miro
  • 実装
  • デプロイ
  • デプロイ自動化
Masaki MuranoMasaki Murano

Gatsby.js ハンズオン

とりあえず、チュートリアルをやってみる
https://www.gatsbyjs.com/docs/tutorial/

このあたりも参考になるか
https://qiita.com/abouch/items/2668fbc185b8dc7b659c

0. Set Up Your Development Environment

開発環境の構築。gatsby cliを使う

1. Get to Know Gatsby Building Blocks

基本要素を学ぶ。Gatsby cloud hostingにデプロイ。これがかなり便利。

2. Introduction to Styling in Gatsby

globalなCSS スタイルについて学ぶ

3. Creating Nested Layout Components

プラグインとlayout componentについて学ぶ。
最新版だとnpmインストールでエラーが発生する。

% npm install gatsby-plugin-typography react-typography typography typography-theme-fairy-gates
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gatsby-starter-hello-world@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"^16.9.0 || ^17.0.0" from gatsby-plugin-typography@3.3.0
npm ERR!   node_modules/gatsby-plugin-typography
npm ERR!     gatsby-plugin-typography@"*" from the root project
npm ERR!   2 more (gatsby, react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from react-typography@0.16.19

reactバージョンを下げる
https://stackoverflow.com/questions/66612083/how-to-solve-dependency-error-in-gatsby-js

package.json

    "react": "^16.14.0",
    "react-dom": "^16.14.0"

4. Data in Gatsby

Page query と Static query でデータを動的に設定する

5. Source Plugins

Dataを取得するためのプラグイン。その使い方を学ぶ

6. Transformer plugins