GatsbyCloudでGatsbyJS+DatoCMSの静的サイトを自動構築してNetlifyホスティングまで
はじめに
GatsbyCloudというプラットホームのスターターキットを使ってCMSと連携したGatsbyサイトをつくりました。有名なCMSではcontentfulやNetlifyCMSなどがありますが、スターターキットに含まれるDatoCMSの管理画面もなかなか使いやすく、記事の投稿、ページの簡単な編集、TwitterカードやSEOの設定も出来てしまいます。
この記事はエンジニアではない人が書いています。GatsbyJSを本格的に学ぶ前に簡単、手軽に触ってみたい方向けの内容です。
GatsbyCloudとは?
Gatsby Cloud is custom-built cloud infrastructure that gives your Gatsby site superpowers: Intelligent caching and true incremental builds to take speed and performance to a whole new level.
公式を翻訳すると「Gatsby Cloudは、Gatsbyサイトに超能力を与えるカスタムビルドのクラウドインフラストラクチャです。インテリジェントキャッシングと真のインクリメンタルビルドにより、速度とパフォーマンスをまったく新しいレベルに引き上げます。」と書かれています。
サインインするといくつかスターターキットが準備されておりGatsbyJSとDatoCMS、contentful、cosmicなどのHeadless CMSと連携したサイトが簡単に作れます。
事前準備
GatsbyCloudのサインアップにはGitHubのアカウントを使用します。
連携するCMSのアカウントが必要です。スターターで使えるCMSは現在３種類ですが既存のサイトに連携する場合は各CMSのアカウントが必要になります。（今回は触れません。）
使い方
こちらから画面右側の「Sign up freeを選択します。
「Sign up with GitHub」からGitHubアカウントと連携します。
「Add a site +」へ進みます。
「Start from a Template」を選択して「Next」へ。
Starter → Repository → Connect CMS → Summaryの順に進めて完成です。
この時点でGitHubのリポジトリ、DatoCMSにもプロジェクトが自動的に作られています。
こちらが完成したサイト。
DatoCMSの管理画面
DatoCMSのダッシュボードから出来たプロジェクトを選択すると編集画面に入れます。
SEOやTwitterカードも管理画面で編集します。
編集後「SAVE」。しばらくするとサイトに反映されます。
Netlifyへホスティング
GatsbyCloudの設定からAWS、Netlify、Firebaseなどのホスティングサービスへの連携も簡単に行えます。
Site Settings → Integrations → Hosting から登録済のホスティングサービスの「Connect」へ進みます。数分でデプロイ完了です。
おわりに
画面をポチポチ進めるだけでGitHub、CMS、ホスティングサービスの連携が行え、簡単にGatsbyサイトが出来上がります。その他にもインクリメンタル ビルドやLighthouseのレポートなどの機能が標準で備わっています。既存のGatsbyサイトも使用できるので、好みのCMSとの連携や実際の運用も試していこうと思います。
INCREMENTAL BUILDS
Get parallelized builds with intelligent caching for up to 1000x faster builds than other solutions. Build and deploy at near-instant speeds.
「他のソリューションよりも最大1000倍高速なビルドのためのインテリジェントキャッシュを備えた並列ビルドを取得します。ほぼ瞬時にビルドしてデプロイします。」
Understand how your site’s performance, best practices, and accessibility are scoring over time—for every build.
「すべてのビルドについて、サイトのパフォーマンス、ベストプラクティス、およびアクセシビリティが時間とともにどのように評価されるかを理解します。」
Discussion