個人サイトをNext.jsで書き直した

MarkdownはremarkでgetStaticPropsの中で処理している。 Loaderを自作しようかと思ったが Loaderを切り出さずに作るのはちょっと面倒そうだったし、 SSRするなら性能上問題が出るがSSGだから別に良いだろうということでtext-loader で文字列として読み込んでビルド時にパースする事にした。

SSGなので高速だし<Link>を使って遷移するのでSPAの速度感が出る。 ここまで殆ど何もせずに作れるのだからNext.jsはすごい。

ある程度Markdownを処理できるようにはしたがシンタックスハイライトの対応はまだだし、 headingのレベルを見て<section>でうまくまとめるような処理も入れてない。 そのうち対応したい。

react-refractorを使用した。楽〜。 以下のような感じでシンタックスハイライトが出来る。 テーマは後で自分好みに変えようと思う。 あと行番号表示も実装したい。

console.log("Hello World!");

OGPも対応させた。元々はNext.jsで使える/pages/apiでnode-canvasを使って 画像を生成するつもりだったが、日本語描画用に入れたNoto Sans CJKjpが15 MB、node_modulesが40 MBくらいで VercelのLambda Functionの上限値50 MBを突破しデプロイ出来なかった。 厳しい〜と思いながら代替案を探しているとVercel謹製のog-imageという アプリケーションがあったのでこれをForkし、 日本語対応と画像差し替えをad-hocにやってデプロイすることでなんとなかった。 ちなみにここです。 URIエンコーディングされたファイル名を投げると画像が返ってくる。 追加のアイコンを作るクエリパラメータもあったがこれはad-hocな実装なので無効になった。 今思うと使いたい場面もあるかもしれないので後で修正したい。

これはヘッドレスChromiumでスクリーンショットを取ることで画像を生成しているらしい。 Lambda Functionの実行環境にChromiumが入っているのは驚きだ。マジか。

いつもどおりTailwind.cssです。 大分慣れてきてドキュメントを引かなくてもわりと書けるようになってきた。 ここ最近ReactとTailwindでしか書いてないので普通のCSSの書き方を忘却してきている。

そう言えばChakra UIというのもあり、 こちらはReactべったりのライブラリだがモノとしてはTailwindっぽいユーティリティ志向らしい。 コンポーネントもある程度あるらしく便利かもしれない。 次改修するときがあったら使いたい。 というかこれドキュメントの検索UIがTailwindそっくりすぎない？ これ最近流行ってるんですかね。

一応読めるようにはなったがマジで適当なCSSなのでもう少しなんとかしたい。 みそは入ってませんけどのUI が結構好きなのであんな感じにレスポンシブにしたい。 ちなみに前のバージョンがRustで書かれていたのはここのブログがRust製の静的サイトジェネレータを使っているからです。

nodejsで作ったスクリプトでビルド前に./lib/generated/metadataとpublic/sitemap.xmlに自動生成。 git logの--prettyオプションと--dateオプションを使えば好きな形に整形できるのでプログラムからも扱いやすい。 ついでに記事は./article/blogか./article/diary以下に作成されれば自動で追加されるようになっている。 事前にビルドスクリプトを走らせなくてもNextJSのGetStaticPropsとかでfs.reafFileSyncを呼んでファイルをパースすれば 良いのかもということに今気が付いたが面倒なのでまた今度検証することにする。

機能的にはタグ画面がまだだし、 設計がかなり適当になされており記事を増やすことを考慮されていないなどがある。 後者はパパッと治すにしてもタグ画面はほしいところだ。 あと将来的にはよくあるブログのようにタイトルだけではなく本文のPreviewまで見えるような記事一覧のUI がほしい。ページネーションなら難しくはない気がするが、静的にパスを列挙するのは面倒くさそうだ。 シンタックスハイライトと併せてこれはすこし実装を考える必要がある。

とにかく物は出来たし保守性も悪く無さそうなので今後はHatenablogよりこちらで書いていきたい。