WordPressだったブログをGatsby.jsでリニューアルしました

2013年ぐらいから WordPress で運用していたブログを Gatsby.js で作り直しました。

ブログのリニューアルの歴史

  • WordPress でとりあえず作る（2013年）
  • テーマの変更（2014年ぐらい）
  • WP REST API の登場によりVue.jsでテーマ作成（2017年のWord Camp Kyoto 登壇に合わせてリニューアル）
  • WordPress をやめて Gatsby.js でやってみた（←いまここ）

リニューアルのきっかけ

サーバーをただただ持ちたくなくなった

WordPress で諸々カスタマイズする場合、WordPress をインストールするサーバーが必要になります。

前まではさくらのVPSを借りていたのですが、現在のサーバーレスの流れでクラウドで諸々環境を構築するのに慣れた結果、 VPS での運用が非常に面倒になってきました。（たいして使っていないのにお金かかるのと、セキュリティが怖い）

そこで、WordPress を使わなければそんなにお金かからないでサイト運用できるんじゃないかと思いました。

また、データを Git で管理して履歴として残しつつ、push したら更新したいなとも思うようになりました。（VPSでもできますが…）

WordPress は悪ではない

最近だとWeb制作界隈で WP からの脱却を目指す動きが多いですが、やっぱり WP の歴史の積み重ねによる更新のしやすさ、柔軟さは現時点で圧倒的だと思います。

構築のハードル高いですが、Gutenberg を頑張れば管理画面で誰でもそれなりにデザインされたページを全部編集・作成することだって不可能ではありません。

また、ノウハウが豊富なので誰でも気軽に始められるとっつきやすさは WordPress の最大のメリットだと思っています。

現時点でSnow Monkeyという有料テーマは、頻繁に更新されており、 WP の奇跡だと思うのでブログやメディアサイト構築ではトップレベルに使いやすいんじゃないかと思います。

今の気持ちとしては、WPは仕事で触らざるを得ない状況なのと、DXがあんまり良くないのでプライベートではではもういいかなといった感じです。

構成など

ブログの置き場所は AWS のAmplify Console。
フロントはGatsby.js（TypeScript）で、styled-components、storybookを簡易的に導入しています。

GitHubリポジトリ https://github.com/tanshio/tanshio-blog

JamStack にしなかった理由

他のサービスやサーバーにブログのデータ置いておく利点が特にないと思うようになりました。
Git に Markdown データ格納するだけでいいのでは？と思ったので使ってません。

Amplify Console にした経緯

Netlify でもいいっちゃいいんですが、画像のダウンロードが若干重いなと思ったので Amplify Console にしました。
デプロイの速さ的にはNetlifyのほうが早いので AWS で色々やりたいとかそんな感じじゃなければ Netlify でも充分だと思います。

年末年始ぐらいから運用していますが現時点でひと月1ドルぐらいです。

Hygen でテンプレート管理

CUI で自分の使いたいテンプレートを作成できる Hygen というライブラリを使ってみました。
このサイトでは投稿、コンポーネントなどを作成できるようにしています。柔軟にファイルが作成できるので非常におすすめ。

レイアウト

とりあえず自分が作ったカンプに合わせてピクセルパーフェクトで組んでいます。
マージンやサイズ感などは、シフトブレインさんの 音楽、数学、タイポグラフィ を参考にし、若干カスタマイズしています。

できるだけアクセシビリティに配慮したつもりではあります。アクセシビリティ難しいですね…。

PCでみたときでもスマホで見たときでも回遊しやすくするためのレイアウトにしたつもりです。ぶっちゃけ前のレイアウトと対して変わっていません…

あとタイトルとかで変なところで改行いれられるのが嫌なので Mikan.js というものを入れています。たまに変なところで切れたりしますが大体いい感じになります。

ハマったこと

PCの左のサイドバーが再レンダリングされてスクロールが一番上に戻ってしまうのを何もせずに防ぎたかったのですが、これはプラグイン、gatsby-layout で解決しました。
gatsby@2 から最近のバージョンから指定部分を再レンダリングした後もスクロール位置を保存する場合、これを導入しないと面倒くさい感じになりそう。

やりたいこと（多分やらない）

  • 今の所 OGP を作成するときに Storybookを立ち上げて、storycap というもので React Component でキャプチャ撮っているのですがこれが面倒くさいので CI とか何かしらで自動化したい。
  • 検索するときのために search.json というファイルを生成しているのですが、開発時にたまにこいつがないとか言われて落ちるので謎を解き明かしたい。

おわりに

とりあえずテーマ更新のDXが上がったのが大きいと思っています。更新頻度が上がるかは不明ですが全然更新できていないので気軽に更新できたらいいなと思っています。

参考にさせていただいたサイトさま

  • アカベコマイリさん

    • Gatsby でのカテゴリーの作成方法・ページの構成方法を参考にさせていただきました。

  • MOTTO X MOTTO さん

    • Gatsby.js での検索手法を参考にさせていただきました。