lumeで個人サイトを作り直した
フロントエンド技術に触れる機会を作るために、定期的に個人サイトを作り直している。 今回はVue.jsのSPAから、Deno向け静的サイトジェネレータであるlumeを使った構成にごっそり変えた。
SSGをしっかり触るのは初めてだったこともあり、ひとまずlumeの公式サイトにあるドキュメントを読んだ。 こういう文書が整理されているのは本当にありがたい。
手を動かしながらチュートリアルを進めてみて、最近のNext.jsやNuxt.jsよりずっとシンプルで、Jekyllなどよりも取り回しが良く拡張性が高い、というような感触があった。
今回はこのような構成で作ってみた。
またTailwindの実装集であるHyperUIを大いに参考にさせてもらった。
実はJSXもTailwindもほとんど触ったことがなかったので良い勉強になった。
レポジトリはこちら。 GitHub - w-haibara/portfolio: my portfolio
denoを使うようになり、package_lock.json や yarn.lock が不要になったため、迫力のあるdiffになってしまった。アプリケーションコードだけを見ても、lumeのおかげで随分シンプルにできたように思う。
画面はこのような感じ。
