結論
- 個人ブログ作った
- GatsbyとmicroCMSを使った
- こだわりポイントもあれば、今後の課題もある
- 結構満足している
経緯
去年の後半からReactを触り始めていました。
もともとVue.jsはある程度触っていて、仕事でもそれなりに開発経験がありました。
しかしどうやら今どきのフロントエンドの最先端はReactのようで、 どれどれやってみるか… という気持ちで以下のようなことに挑戦してみました。
- Reactの公式チュートリアル
- WebSocketの勉強がてら簡単なリアルタイムチャットのWebアプリを開発
- 個人サイトをNext.js + TailwindCSSで作り直し
なるほど、慣れるとReactのほうが好きかもと思い始め、もともと気になっていたGatsbyにも手を伸ばすことにしました。
それで、作ってみたいと思っていた個人ブログをHeadlessCMSも使って開発することにしました。
できたもの
今この記事を掲載しているサイトが今回作ったブログです。
作りは単純ですが、個人的にはかなり気に入っています。
特徴
- Zennの開発者のcatnoseさんをリスペクトしているため、Zennやcatnoseさんの個人サイトを多大にパク…参考にしてます
- 日本発のHeadlessCMSということでmicroCMSを採用しています
- microCMSではMarkdownは対応されておらず、あくまでもリッチテキストへの入力手段になっています
単純にMarkdownとして保存する場合はプレーンテキストとして扱うことになります
ですが、WebAPIとVSCodeを合わせて使うこ とでMarkdownでの快適な執筆が可能にしています - Gatsby、Marked、highlight.js、TailwindCSSなどを利用して開発しています
- ホスティングはVercel、一部処理はAWS Lambdaで行っています
自慢したいところ
シンプルかつ親しみやすいデザイン
Webデザインは正直趣味でやってるだけで業務的な経験は無いです。
ですが、ダサいデザインはどうしても嫌で、かつスタイリッシュというよりは見やすいけど親しみも湧くようなテイストが好きです。
まさに私の理想的なものがcatnoseさんのデザインです。
ResumeやCode Kitchen、旧個人ブログなども拝見してます。
というわけで、かなり参考（パクリ）させていただき良い形にできました。
改善の余地もあるけど、初期版としては十分でしょう！
記事の表現をMarkdownで出来るだけ拡張
上記でこのブログで表現できるパターンを掲載しています。
シンプルながらも見やすいフォントサイズ、配色、マージンに調整してみました。
技術系の記事も書きたいということで、コードブロックの表現も言語に合わせたハイライトやタイトル表示の追加などを実装しました。
もうちょっと出来る表現増やしていきたい。
高パフォーマンスなサイト表示
これは私の力ではなくGatsbyのSSGによる結果です。
Reactで実装されていますが、コンテンツを都度取得してレンダリングしなおすわけではなく、ビルド時にコンテンツを取得して表示するページをあらかじめ構築しています。
また、自動的にメディアの最適化や遅延読み込みなどを適用して全体パフォーマンスを落とさない工夫がされています。
そのため表示速度が高速です。
一応私も画像やページのパーツが足引っ張らないように調整はしてます。（小声）
いい感じのリンクカード（OGP画像）の表示
これはTwitterやSlackなど、外部ページで本ブログのリンクを貼った際に表示されるリンクカードおよびリンクカード内のOGP画像についてです。
リンクカード自体はmetaタグを適切に設定すればいいだけですが、OGP画像をコンテンツ内容から自動生成させるのにやや苦労しました。
表示例
最初はGatsbyでビルドするときに自動生成させようとしましたが、処理に使うライブラリがうまく動作せず諦め…。
最終的に下記のOSSを見つけて実現できました。
ただこちらも日本語フォントをソースに追加するとファイルサイズが大きすぎてVercelへデプロイ出来ずつまづき、フォントファイルの容量削減に挑戦して無事成功しました。
※別途記事にしようと思っています
コンテンツ管理はCMSでやりつつ、VSCodeで記事の執筆を実現
コンテンツはmicroCMSで管理しています。
制約もかけられるし、リレーションを貼って制御もできるのでこれは基本快適です。
ただMarkdownによる執筆はWebのUIでやるのがつらすぎる。
ということでWebAPIを使って記事の本文だけローカルに取得して、VSCodeでLintやFormatterを活用した執筆を行えるようにしました。
執筆ができたらまたWebAPIでmicroCMSへ更新させます。
スクリプトを書いたのでこの内容も別途記事にしようと思ってます。
いまいちなところ
機能が少なめ
本当は下記のような機能も実装したかったですが、いつまで経ってもブログを書き始められないことに気づいたので一旦今回は見送りました。
- サイト内検索
- 日付（年、月、日）ごとの記事表示
- 人気の記事表示
- 閲覧者によるコメント
今後少しずつ追加していこうかな…。
いいねボタンのレスポンスが遅い
記事の本文の横に👍できるボタンを配置したのですが、同期処理にしてるのでクソ遅いです。
あんまり整合性大事じゃないので非同期にしたほうがいいですね。
これはそんなに直すの大変じゃないのでなるはやで改善します。
まとめ
やりたいことはある程度やれて、今後の執筆モチベーションも高まったので総じて良かったです。
細かい技術的なつまづきなどは、備忘録・共有として別途記事にしていこうと思っています。
悪くないじゃんと思ったら👍お願いします～
筆者に関するリンク
