こんにちは。Gatsbyを使ってブログを自作した話です。
Gatsbyとは
GatsbyはSSG（静的サイトジェネレータ）の1つです。SSGとはビルド時に必要なデータを外部（DB、CMS etc）から取得してHTML・JS・CSSといった静的ファイルを生成します。SPAでは初めてアクセスした時に、（仮想）DOMを構築してからレンダリング処理を行いますが、SSGを用いた場合はすでに構築が終わっているので表示までが早いというメリットがあります。
GatsbyではReactを使ってUIを記述します。また、gatsbyでは多くのプラグインが用意されています。例えばTypeScriptやContentful、google analyticsなどが簡単に使えます。Webpackの存在を隠蔽してくれるので手軽です。
ブログを作るにあたって
今回はせっかく勉強したのでTypeScriptを用いました。今までJavaScriptで書いていましたが、型があることによって、安全に開発できることや後からコードを見た時に、どういう引数やを取るか・戻り値を返すかなどがわかりやすいなどのメリットがあるなと思いました。使いこなせていない感があるのでどんどん使って慣れていきたい。
OGP
OGPとはツイートにリンクが含まれていると画像が表示されますが、あれです。今回はvercelが提供しているog-imageを用いてOGP画像を生成しました。リポジトリをフォークして自分用にカスタマイズすることができたり、vercelにアップロードするだけで使えるのでお手軽です。（なんと言っても無料！） また、生成する画像のテンプレートをHTML/CSSで記述できるのも良い点です。デフォルトでは日本語フォントに対応していないのでフォントファイルを用意したりgoogle fontを使うなりで対応しましょう。
簡単な使い方
基本的にはog-imageのリポジトリのREADMEの通りです。生成画像のカスタマイズするときは/_lib/template.tsやparser.tsをいじります。og-imageをvercel上にデプロイするとhttps://foobar.vercel.appというURLが割り振られます。og-imageではパスとクエリパラメータに生成する画像の情報を付与します。
例えばhttps://foobar.vercel.app/ブログを作る.jpg?md=1&theme=lightとすると、画像に埋め込む文字列が「ブログを作る」、画像の拡張子はjpeg、埋め込むテキストとしてmarkdownを使う、背景テーマはlightを使うといった設定になります。
どういうパラメータを使うかはparser.tsをカスタマイズすることでいろいろ変えれます。