ブログの構成 2023/1
ブログ移行しました @N回目 でもちらっと書きましたが、どう作ったかを記録します。
##要件
記事はマークダウンで書く
エディタは自作せず、 macOS のネイティブアプリを適当に使う
remark はバンドルサイズが大きいので、 AST 生成だけで使う
とにかく早くリリースしたい
###1. 記事はマークダウンで書く
マークダウンで記事を書き、.md で保存する方針にしました。
記事は Git で管理して GitHub に配置し、 GitHub Actions で S3 にデプロイしています。
###2. エディタは自作せず、 macOS のネイティブアプリを適当に使う
以前のブログはカスタム書式をサポートしたかったため、Markdown エディタを自作しました。
主に remark-attr で属性値を付与したり、スニペットやディレクティブを挿入するボタンを追加したかったためです。
しかし、 Markdown エディタは個人ブログで管理できる範囲を大きく超えており、使い勝手を調整する時間を捻出できなかったので記事を書いていませんでした。（言い訳）
Markdown エディタを作って見てわかる、 Zenn の素晴らしさ....。
###3. remark はバンドルサイズが大きいので、 AST 生成だけで使う
remark のプラグインを多く使用しているので、大したことないブログなのにビルドサイズが大きいのが課題でした。
今回は、Markdown ファイルを AST 変換する部分のみで remark を使用し、 React 側では mdast の type 毎にコンポーネントを自作する方針にしています。
エディタでカスタム書式をサポートしない分、Markdown ファイルの中身を良い感じに解釈して AST を拡張する方針です。
現状では
画像のサイズ取得、Variant 作成、WebP 作成
Twitter カード
YouTube 埋め込み
などに対応していて、今後はリンク先の OGP 表示などもやろうと思っています。
生成した AST は JSON 形式でファイル保存しておいて、Next.js の getStaticPaths や getStaticProps から読み込んでいます。
####現在のバンドルサイズ
####mdast の Node 分岐
###4. とにかく早くリリースしたい
新しい技術スタックを試したい気持ちが強かったですが、それでリリースできなかった経験を100億回やってるのでリリース優先の技術選定にしました。
私の場合は Next.js が最も得意なので、 Next.js 13 を使用しています。
Next.js 13 といえば appDir が気になっていたので使っていたのですが、リリースする段になって next exportがまだ未実装である事に気づく大ちょんぼを犯してしまいました。
「私は experimental な機能がどこまでサポートされているかを調べずに使いました」の札を下げておきます。
CSS については再移行時にコピペしたかったので Next.js にビルトインされている CSS Modules を使用しています。
typed-scss-modules を使えば補完が効くので便利でしたが、 unused を検知できない点や、コードジャンプができない点がちょっと不便だなぁという印象です。（コードジャンプは happy-css-modules でできそうではある）