日誌ウェブサイトの構成について

日誌といえば小学校では学級日誌に落書きしまくってました
あと近所で通っていた英語教室では1週間で印象深かった出来事を絵と英語で書くみたいなのがありました
Kimberly先生がパイを焼いてくれたり、みんなでハロウィンパーティをやったりして楽しかったです

構成

• ・フロントエンドはRemix + TailwindCSS
• ・サーバレスDBのsupabaseを採用
• ・記事の管理にヘッドレスCMSのstrapiを採用
• ・Cloudflare Pagesにデプロイ

サーバレスDB採用

supabase
サーバレスでPostgreSQLが使えます
これが無料で使えていいのかという機能が豊富にそろっています

ヘッドレスCMS採用

strapi
Cloudinaryプラグインを利用してアセットの配信はCloudinaryにお任せ
CDNで配信されるので普通にサーバーにアセットを置くより高速です

マークダウン対応

react-markdownを利用してマークダウンをReactコンポーネントに変換しています
改行コードの対応にはremark-breaksプラグインを利用

コードハイライト対応

react-syntax-highlighterを利用してコードのハイライトを実装しています
マークダウンでコードを書くとこんなふうに言語のコンテキストに応じていいかんじに色付けしてくれるやつです

// メモリ効率を考えないシンプルなFizzBuzz
const fizzBuzz = (i = 1, max = 100) => {
 if (i > max) return;
 console.log(i % 15 === 0 ? 'FizzBuzz' : i % 3 === 0 ? 'Fizz' : i % 5 === 0 ? 'Buzz' : i);
 return fizzBuzz(i + 1, max); // 末尾再帰
};
fizzBuzz();

お問い合わせフォーム

• ・フォーム管理にConformを採用
• ・バリデーションにzodを採用

まとめ

Remixはいいぞ