2023/01/31
2023/02/12
Next.jsでウェブサイト(すなわちこのサイト)を作った．
ReactはMetaがメンテナンスを主導しているJavaScript用のUIライブラリ．
Next.jsはVercelがメンテナンスを主導しているWebアプリケーションフレームワーク． Reactの上に作られていて，ルーティングやServer Side Rendering(SSR)などの機能を提供してくれる．
動的型付け言語を見るとアレルギー反応が出るので，通常のJavaScriptではなくTypeScriptを使っている． 静的(漸進的)型付け最高！
MUIはMaterial Design用のコンポーネントを提供してくれるReact用ライブラリ． 簡単に良い感じのデザインを作れるので好き．
WordPressだとサーバーを借りて管理しないといけないし，セキュリティ的にも色々面倒． ということで本サイトはJamstackを採用している．
Next.jsは，Reactのコードから静的なhtml・jsファイルを生成するStatic Site Generation (SSG)を提供している． GitHub ActionsでSSGするCIを走らせ，できたファイルをGitHub Pagesで配信している．
2023/2/12追記: CloudflareのCDNでキャッシュしてもらうことにした．大体のファイルはGitHub PagesのサーバーじゃなくてCDNから配信されているはず．
ブログ記事はMarkdownで書けるようにした．
表示にはreact-markdownを使用している．
記事はリポジトリ内に.mdファイルとして保存していて，
SSGする時に記事ファイルを読み込んでいる．
ソースコードを書いたらシンタックスハイライトをつけてくれるようにしたり，MUI/Next.jsと親和性が出るようにカスタマイズしている．
export const showExample = ()=>{ console.log("こんな感じ"); }