Gatsby, Netlify, Contentful, Algoliaで技術ブログを作成した話

概要

自分の中で一番今時っぽい技術（Gatsby, Netlify, Contentful, Algolia）を利用して,
個人ブログを作成し, はてなブログから移行しました.

その際に得た知見や技術選定の理由などを記載していきたいと思います.

技術構成

• React
• TypeScript
• Gatsby
• GraphQL
• emotion
• Contentful
• Algolia
• Netlify
• GitHub
• Google Analytics

React, Gatsby

React, Gatsbyとは

Reactは, Facebook様が作成された, ユーザインターフェース構築のためのOSSのJavaScriptライブラリです.
Reactを使うことで, 簡単にコンポーネントという単位でUIを分けることができ, データ変更によるUIの更新も簡単に実装することができるようになります.

Gatsbyは, ReactベースでOSSの静的サイトジェネレータです.
Gatsbyを利用することで, 簡単に高速なWebサイトを作成することができます.

選定理由

今所属している会社の新プロダクトがReactで作成されていることが決まっていました.
こちらの開発に入る前に, ガッツリReactを触っておきたかったのが
今回ブログサイトの作成をする理由の一つだからです笑

今回のブログは高速かつ無料で運用したかったため,
JAMstack 完全入門 ハイパフォーマンス Web サイト構築
でJAMstackの構成技術の例として取り上げられていたGastbyを選択しました. ※後述するContentful, Netlifyもほぼ同じ理由です笑

使用したプラグイン

• gatsby-plugin-react-helmet

headタグ内にソースコードを入れることができるため, SEO対策として利用.

• gatsby-plugin-typescript

TypeScript利用のため.

• gatsby-source-contentful

Contentful利用のため.

• gatsby-transformer-remark

Contentfulから取得したMarkdownをHTMLに変換するため利用.

• gatsby-remark-embed-youtube

ブログ記事でYouTubeの動画埋め込みをするため.

• gatsby-remark-prismjs

ブログ記事でソースコードをきれいに見せるため.

• gatsby-remark-external-links

プログ記事でリンクを他タブで開けるようにするため.

• gatsby-plugin-react-redux

Reduxを利用するため.

• gatsby-plugin-algolia

Alolia利用のため.

• gatsby-plugin-web-font-loader

Google Font利用のため.

• gatsby-plugin-twitter

ブログ記事でTwitter埋め込みをするため.

• gatsby-plugin-emotion

CSS in JSライブラリのemotionを利用するため.

• gatsby-plugin-google-analytics

Google Analyticsを利用するため.

Contentful

企業が提供するHeadless CMSです.
Headless CMSとは, WordPressやDrupalなどの一般的なCMSの記事管理のみの機能しかないものになります.
一般的には, WordPressのような管理者画面で記事情報を入力し, 他で作成したWebサイトなどからREST APIで取得します.

1MICRO SPACEは無料で使えます.
詳細は他のサイトなどを見て頂きたいのですが, 5000レコードまで無料です.
※1レコード=1記事or1画像

Algolia

企業が提供する, REST API形で爆速全文検索ができるサービスです.
詳細は他のサイトなどを見て頂きたいのですが, 5万オペレーションまで無料です.
※1オペレーション=1検索or1レコードの登録/変更/削除

Netlify

企業が提供する, 静的Webサイト向けのホスティングをしてくれるサービスになります.
他にもCMS機能やフォーム, テスト, 分析, Lamda的なやつも提供してくれています.

静的ホスティングする程度であれば, 無料で利用することができます.
GitHubと連携することで, コミットをトリガーとしてGatsbyをbuildし, 生成された静的ファイルをホスティングすることができます.

これにより, プログラムの修正をコミットするだけで,

• NetlifyがGitのコミットをトリガーにbuildを開始する
• GatsbyがContentfulから記事情報を取得して, 静的ページを生成する
• GatsbyがContentfulから取得した記事情報をAlgoliaに登録する
• Netlifyが生成された静的ページをホスティングする

みたいな, CIを簡単に作成することができます.

所感

GitHub以外は基本的には初めて触るものばかりで, どれも素晴らしい技術でした.
やっぱり新しい技術を触るのは楽しいですし, ちょっとでも使えた時は成長を感じやすくていいですね.

いい点は他のサイトでも記載されてますので, 僕的に合わなかった点を記載していきます.
※僕の知識不足によるものが大きいです.

仕事でJavaを触っている僕としては, やはりTypeScriptは中途半端すぎる気がしてしまいます...
コンパイルさん, もっと僕を怒ってよ！って思う時が多くあります.
※僕は, JavaScriptの自由さが大好きです

TypeScriptと近い理由で, GraphQLもあまり合いませんでした.

Contentfulは自由度がとても高いのですが, 自由度が高すぎて不便に感じる点が多くありました.
正直, 一から自分で作るのもありだなと思ってしまうほど自由です.

最後に

今回はブログの作成に利用した技術をざっくりと紹介しました.
1つ1つの細かい話については, 後日別の記事にしたいと思います.