Open4
Gatsby.js + Cloudflare Pagesでブログサイトを作っていく（作業しながら順次更新）
Masaki Murano目標
- Gatsby.js でブログサイトを構築する
- 静的ホスティングで爆速で表示したい。サーバー費用を抑えたい
技術選定
Gatsby.js
安定してそうな印象。
JS技術に触れたい。SEO対策のライブラリなどが使いやすそう。
Contentful連携で、非エンジニアへのCMSとしての応用。
Cloudflare Pages
コスパ良さそう
Gatsby cloudは気になるけれど、最近できたぽいので回避。
Masaki Muranoやること
こんな感じでやっていき
- Gatsby.js 調査。ハンズオン
- Cloudflare pages 調査。ハンズオン
- ドメイン調査、決定
- テンプレとキービジュアル決定
- デプロイテスト
-
WF作成
- Miro
- 実装
- デプロイ
- デプロイ自動化
Masaki MuranoGatsby.js 調査
テンプレのような機能として、ThemeとStarterがあって、Starterは設定済みでよりクイックスタートできるもの
ここから一覧が見れる
https://www.gatsbyjs.com/starters/?
ざっくり使い方
Masaki MuranoGatsby.js ハンズオン
とりあえず、チュートリアルをやってみる
このあたりも参考になるか
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バージョンを下げる
package.json
"react": "^16.14.0",
"react-dom": "^16.14.0"
4. Data in Gatsby
Page query と Static query でデータを動的に設定する
5. Source Plugins
Dataを取得するためのプラグイン。その使い方を学ぶ