下書き 爆速サイトを爆速で作れるNetlify + Gatsby

Gatsby+Netlifyで爆速esa.ioブログを作った。

> まとめ：どのぐらい爆速なのかまとめ：どのぐらい爆速なのか

> どうやっていったのかどうやっていったのか

> NetlifyNetlify

静的サイトのホスティングサービス、hostingは無料。

Github以外にもBuild hookというTriggerがある

• 特定のURLにPOSTリクエストを叩くとdeploy開始

保守しなくていい感じなのが最高

> GatsbyGatsby

React製の静的サイトジェネレーター
Reactの公式サイトに採用されてるやつ

> 何がよいか何がよいか

特になにも考えずそれなりのパフォーマンスが出るサイトが出来る

• Preload, Inline CSS, React SPA 静的サイトジェネレーターとして、JSだけで完結する

> View開発View開発

build時にgrapgqlで呼ばれたデータと一緒に静的ファイル化される。
Reactのアプリケーション書いてる時と同じ感覚。

> esa.ioをSourceとして扱うesa.ioをSourceとして扱う

Gatsbyで外部データを取り扱うにはsource pluginというpluginを作る必要があるので作った
https://github.com/mottox2/gatsby-source-esa
所要時間は1.5h。

MarkdownやWordPressのプラグインはあるので、この作業は基本的には不要。configに書くだけ。

これらのプラグインがBuild時にsource dataとして扱われ静的サイトが生成される。

> 普通にやってれば80点が取れるGatsby普通にやってれば80点が取れるGatsby

Source Pluginを作って、ReactでViewを書く。それだけでLightHouseで高スコアの出る早いサイトが作れる。
Source PluginのFirst CommitからNetlifyのPublishまで4時間で出来た。

> 現場の声__colon__ スケールさせたい現場の声: スケールさせたい

野望はWordPressのフロントエンドを隔離して行いたくてGatsbyを調査している。
WordPressをsourceとして使えないか試しているが、500記事以上あるsourceを使うとビルドが通らなかった。

> Gatsbyでアウトプットの場を作っていこうぜGatsbyでアウトプットの場を作っていこうぜ

• ポートフォリオ
• 個人ブログ
• ドキュメント には適している。アウトプット

> ReactよりVueが好きな人ReactよりVueが好きな人

Evan YouがVuePressっていう静的サイトジェネレーター作ってます。

https://github.com/vuejs/vuepress