学んだ技術のアウトプットする場を作ろうと思ったが、QiitaやZennなどの投稿系のサイト、はてなブログやBloggerなどの個人ブログでは面白くない。
ということでさほど珍しい構成ではないですが、比較的モダンな技術を使ってブログをゼロから作ってみました。
使用したツールを簡単に説明してみます。
使用したツール
Gatsby
React製の静的サイトジェネレータです。 静的なSPAを生成するので表示速度がかなり早いです。
データ取得にはGraphQLが使われていて、Gatsbyの設定ファイルからmetaデータの取得する際や、ローカルファイルの読み込み、Contentfulからデータ取得など、なんでもGraphQLで取得できます。
公式ドキュメントがかなり充実しているのでまずはここから始めれば迷わずに始められます。 初めからコードを触りたいという方はStartersから触ってみるのもいいでしょう。
Contentful
HeadlessCMSと呼ばれるAPIファーストのCMSです。
コンテンツ管理のみを行い、フロント側の情報はまったく持ちません。 フロント側の情報がないのでプレビュー機能もないのですが、Gatsby Cloudで解消できます。
Gatsby Cloud
Gastsby公式のビルド、CMSプレビュー、デプロイ、ホスティングをしてくれるプラットフォームです。
Git、CMS、ホスティングサービスと連携することができ、GitやCMSに更新があると自動でホスティングまでしてくれます。 Git、CMSが連携されていれば、Gatstby Cloud上でプレビュービルドをしてくれるので、ローカルに開発環境がなくても確認ができます。
最近FastlyのCDNを使ったGatsby Cloud Hostingというサービスも始まり、Netlify、Vercelなどホスティングサービスに迷うならとりあえずこれ使っておけばいいのかなという感じ。
全体構成
ReactもGraphQLも触るのははじめてでしたが、Gatsbyのおかげか開発で大きく躓くことはありませんでした。フレームワークから始めると開発の環境が整っているので取っ付きやすいですね。
ブログを作って得られた知見は、今後記事にしていこうと思います。サイトデザインももう少し格好がつくようにしていきたいです！