個人サイトのリニューアル

旧ページの構成

Gatsby + styled-componentsでページを実装、文章はMarkdownで書いていました。

当時はGatsbyを試してみるという目的があり、そのために利用していました。SSGするにあたり様々なデータソースとの接続が簡単な設定だけで済むのは魅力的でしたが、GraphQLはいち個人ページで使うのには完全にオーバーパワーでした。

新ページの構成

Next.js + Tailwind CSSの構成に変更しました。

最近Next.jsあまり触れてなかったのでSSGやApp Routerの検証のために選びました。結果としては良かったです。Next.js自体は多機能なフレームワークの部類に入ると思いますが、薄く使おうとすれば比較的シンプルな状態を保てるほうかなと感じました。

作りきった結果、当分はこの構成でいいなと思えるくらいには満足しています。

その他使用したもの

twemoji

絵文字を表示するために使用。

remark / remark-html

MarkdownファイルのHTMLへの変換に使用。また、読み込んだファイルのパースにはgray-matterを使用しています。ファイルの読み込み処理やパースはこの辺のライブラリを使うことでサクッとかけちゃうのがいいですね。

Open Peeps / Canva

ソーシャルメディア用の画像作成のために使用。普段使っているアイコンが写真ばかりで新デザインに合わなさそうだったのでOpen Peepsを使ってメガネの人アイコンを生成しました。

Canvaは素人に毛が生えた画像編集スキルくらいしかない私にとって最高のツールです。とりあえずCanvaがあればイメージしてたものが手間をかけずに質も高く作れるので。

Google Fonts

next/fontとTailwindの設定のしやすさがとにかく良かったです。フォントの定義をtsx上で宣言的に書けるのも良かったし、それをCSSの変数として扱ってTailwind側で参照するやり方が非常に分かりやすいし実装もしやすいのが最高でした。