Gatsbyに再入門する

JAMStack?

今までブログ構築にはJekyllやHugo、Gatsbyといった静的サイトジェネレーターを使っていた。かれこれ6年ほどはこれらのジェネレーターと付き合っていることになるのだが、最近は特にヘッドレスCMSとJavaScriptを使用したジェネレーターの組み合わせがJAMStackと呼ばれてイケているものとして扱われるようになってきたようだ。

追記 2021/01/07

JAMStackとはJavaScript+API+Markupのアクロニム、と一般には言われているが、Netlifyが作っている特設サイトではそんなことは一切書かれていない。ただしAPIと静的サイトをJavaScriptで繋ぐという要素が入ってくるようなので、厳密に言えば昔ながらのJekyllやHugoでプレーンなMarkdownから生成するページのブログなんかはJAMStackとは言わないようだ。

そこで今まではローカルにMarkdownで記事を書いてgitでプッシュ、Hugoを使ってNetlifyにビルドさせていたのを、ヘッドレスCMS+Gatsbyの組み合わせに移行してみることにした。

Gatsbyは少し前に使っていたものの、

Netlifyでのビルドが遅かった
当時の技量ではカスタマイズがほとんどできなかった

といった理由で放棄してしまい、Hugoに乗り換えていた。

しかしZennで良さげな日本語のチュートリアルを発見できたこと、最近NetlifyではGatsbyの差分ビルドができるようになりビルドが高速化されたことが重なったため、再び試してみることにした。

環境整備

M1 MacBook Airを使ってはいるが、今でもメインマシンはWindowsの自作マシンだ。キーボードはこちらのほうがよいものを使っているので、今回はWindows上で開発を進めることにした。
結局横着してWSL2を使うことにしたが、WindowsネイティブでNodeを動かすならnvm-windowsを使うのが良さそう。

WSL2のセットアップはMicrosoft公式のドキュメントがしっかりしているのでこちらを見てもらうとして、Nodeの環境づくりもLinuxそのものなので特に困る所はないと思う。

Nodeのバージョン管理にfish-nvmを使っているので、こんな感じになった。

nvm install lts
set --universal nvm_default_version lts

ハンズオン記事からの変更点

ハンズオン記事のコードを写経していくととてもシンプルなブログが出来上がります。ここからカスタマイズしていくのはとても簡単でした。プラグインを導入しただけでほとんどコードは書いていません。

クラスレスCSSフレームワークの採用
クラスレスCSSフレームワークというものは、言ってしまうとリセットCSSの進化系のようなものです。クラスをべたべた付けなくても普通のHTMLを書いていくだけでいい感じにしてくれます。今回のブログではnew.cssを採用して楽をしています。
PWA化
gatsby-plugin-manifestとgatsby-plugin-offlineを導入してPWAにしています。特にスマートフォンでの体験が良くなるでしょう。
Syntax highlight
gatsby-remark-prismjsでコードのsyntax highlightをするようにしています。

今後やりたいこと

TypeScriptへの移行
現状では拡張子をjsからtsxに変更しただけで、中身は普通のJavaScriptです。これをちゃんとしたTypeScriptにしたい。といってもビルド時の型チェックはないらしいのでVSCで書く時にいろいろ警告してくれるだけのようですが……

記事の移行

一番の鬼門だったのがこれ。ちょっと調べてみたところ、Wordpressなどからの移行事例はいくつか見つかったものの、素のMarkdownのテキストファイルからの移行事例は見つからなかった……！
ということで記事をひとつひとつ手作業で移植していくことになった。情報が古くて役に立たない昔の記事の整理にもつながったので移行プロセスのひとつとして捉えることにした。

Gatsby Cloud

ビルドはGatsby Cloudで走らせて、Netlifyにデプロイするという形にしました。Netlifyでビルドからすべてやるのに比べてビルドが高速で、Gatsbyに特化したサービスなので設定もより簡単です。

033 DeskTop

このブログだとデプロイ込みで30秒もかからないみたいです。速い。