サイトをまたまたリニューアルしました

またまた Syakoo's Lab をリニューアルしました

この記事では、最初に全体的な構成を紹介して、大きめの変更点やそう判断した理由を説明していきたいと思います

全体的な構成

全体的な構成は、前回とさほど変わっておらず、Next.js と TypeScript を使っています

React で個人ブログを作成している人のほとんどは Gatsby で作成していると思いますが、ある程度は自分の手で作りたかったのと SSG のためだけに勉強するのも少し面倒に感じたので Next.js を選びました

絵のいいね機能は残したかったので、Azure + JavaScript で Web API を作成しています。 バックエンドに関しては、ブラウザ上でコードを書きたかったのでこのような構成になりましたが、Azure Functions のコールドスタートが目立つので AWS に変更する可能性があります (コールドスタートについて)

大きめの変更点

前回のサイトとの大きめの変更点を説明していきます

(ほぼ全部) SSG 化 + ローカルエディタ

前回のサイトでは、記事一覧ページやイラスト一覧ページは CSR でデータをフェッチして表示していましたが、少なからずロードの時間にストレスを感じたので、これも完全に SSG 化することにしました

それに加えて、別アプリとしてエディタを作成していましたが、スタイルの変更によるデザインの統一がとても面倒だったし、ブラウザで作業するのも嫌だったので、VS Code でマークダウンを書くようにしました

ソースコードと記事を公開するようにした

このサイトと記事を同じリポジトリに置けるようにしたので、ソースコードを公開するようにしました(ソースコード)

別ブログの記事も載せるようにした

Qiita などの技術ブログに上げている自分の記事も一覧ページに表示するようにしました

MDX を使えるようにした

MDX は、マークダウンで JSX を使える便利な形式です。 これによって、作ったコンポーネントを簡単に記事中に召喚することができます

例えば、起爆ボタンをここに置くことができます ↓(もちろん起爆なんかしません)

起爆

ドメインを変更した

サイトのドメインを syakoo-lab.work から syakoo-lab.com に変更しました。 お名〇ドットコムで 1 円/年 で購入したのですがメールの通知がヤバかったので、値は張りますが Google Domains で購入しました

OG 画像をなくした

前サイトでは OG 画像を自動で作成していましたが、技術記事は基本的に Zenn などの技術ブログに上げる予定ですし SNS で拡散される必要もないかなと思ってなくしました。 このサイトはイラストもあるので、画像の容量も考えた結果です。 気持ちが変わったら付けるかもしれません 🙄

今後の方針

このサイトはどちらかというと、ブログメインになると思います

ソースコードが特に後半やけくそで書いているのでリファクタリングと、ページネーションを付けていきたいなーって考えています

今後ともどうぞよろそくおねがいします

---