Deno/Lumeでブログ作った

GitHub Gist に書いたMarkdownテキストをブログ形式で表示したくなったので作ってみた. <a name='more'></a> リポジトリは以下. [<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkxP3oP9E24xLbQ8b_PCPOsPOamCHytKRn1l-eggcIJ82QohnkK9Kjq6J29hm1Kporc_NYha5FT9h2nBPCUrzuDSHm0ogPNGpsyI_jro0VUZ7_OXspmbKl1BhPPnr6GKihJis0WtjiknBA-q7Pbl_Fg0eCVE6gKclJa3Lh-W8wpqeLEw1aYCMTu40WJ0S0/s1600/gist-blog.png" width="400px" />](https://github.com/toms74209200/gist-blog) https://github.com/toms74209200/gist-blog 実際に作ったブログは以下. [読んだもの](https://toms74209200.github.io/gist-blog/) https://toms74209200.github.io/gist-blog/ 構成としてはgistに書いたMarkdownテキストをAPI叩いてとってきて, ブログ形式でレンダリングしている. Denoを選んだのは単純にNode.js / Typescript / Reactが辛いから. Lume[[1](#lume)]はDenoの静的サイトジェネレータ(SSG) で, DenoでReactを使ってSSGするにはこれがデファクトっぽい感じ. Node.jsみたいにトランスパイルしてSPAみたいなのは一般的ではなさそう（Deno Deployを推しているのでそれはそう）. DenoのWebアプリケーションフレームワークとして, Fresh[[2](#fresh)]もあるが, これはDenoのNext.jsみたいなものでサーバーサイドレンダリングになるためSSGができない. Deno Deployを使いたいならこっちのほうが情報も多くてよさそうだが, 今回はGitHub Pagesを使いたかったので見送った. ただFreshで作るブログのサンプルを~~パクった~~参考にした[[3](#fresh-blog)]. ## Lumeの使いかた Lumeを使うにあたって, そもそもコンセプトの理解が必要だった. 公式を読めという話だが, 一つのドキュメントで簡単に理解できるほど簡単なことはない. いかんせんLumeの記事は少ないが, [[4](#mamezou-lume)] が参考になった. Lumeでは配信可能なドキュメントファイルを自動で収集して配信するらしい. > - It supports *multiple file formats*, like `markdown`, `yaml`,` JavaScript`, `typescript`, `jsx` and `nunjucks`, and it's easy to extend with more. [[5](#about-lume)] ここでLumeには Page data という概念があり, これを設定することで, そのコンテンツ（ページ）のURLやタイトル, 装飾(layout) などを設定することができる[[6](#page-data-lume)]. LumeではビルドするとすべてHTMLドキュメントに変換される. このHTMLドキュメントのファイル名などの設定が Page data によって設定されるため, この概念の理解が重要だった. ### 動的ページ生成 今回はGitHub Gistからコンテンツをとってくるため, ビルド時まで Page data が決定しない. Lumeは複数のページを動的に生成する方法があるため[[7](#dynamic-page)], これを使うとブログのコンテンツページを動的に生成することができる. 今回はブログコンテンツにするgistのIDをあらかじめリストとして用意しておき, そのgistをfetchしてコンテンツページを生成するようにした（以下のJSONの `contents` がIDのリストにあたる）[[8](#slug-page)]. Lumeの multiple pages 機能ではコンテンツを文字列型でしか指定できない. なのでJSXでコンテンツを生成するには事前にレンダリングする必要がある. Denoでは `preact-render-to-string` [[9](#preact-render-to-string)] を使ってJSXをHTML文字列に変換できる. ## GitHub Pages へのデプロイ Lumeの公式にGitHub ActionsでGitHub Pagesへデプロイするサンプルコードがあるので, これをそのまま使えばよい[[10](#deployment-lume)]. --- Denoは開発が日進月歩なので解決策が見つからないことも多いし, 「最近入ったこの機能を使わないと作れない」みたいなことも多い. 正直まだ趣味の域を出ないかなという感じ. ## 参考 - [1]<a name="lume"></a> [Lume, the static site generator for Deno - Lume](https://lume.land/) https://lume.land/ - [2]<a name="fresh"></a> [Fresh - The next-gen web framework.](https://fresh.deno.dev/) https://fresh.deno.dev/ - [3]<a name="fresh-blog"></a> [How to Build a Blog with Fresh](https://deno.com/blog/build-a-blog-with-fresh) https://deno.com/blog/build-a-blog-with-fresh - [4]<a name="mamezou-lume"></a> [Lume入門(第1回) - Denoベースの静的サイトジェネレーターLumeで静的サイトを手早く作る | 豆蔵デベロッパーサイト](https://developer.mamezou-tech.com/lume/lume-intro/) https://developer.mamezou-tech.com/lume/lume-intro/ - [5]<a name="about-lume"></a> [About Lume - Lume](https://lume.land/docs/overview/about-lume/) https://lume.land/docs/overview/about-lume/ - [6]<a name="page-data-lume"></a> [Page data - Lume](https://lume.land/docs/creating-pages/page-data/) https://lume.land/docs/creating-pages/page-data/ - [7]<a name="dynamic-page"></a> [Generate pages from other sources - Create multiple pages - Lume](https://lume.land/docs/core/multiple-pages/#generate-pages-from-other-sources) https://lume.land/docs/core/multiple-pages/#generate-pages-from-other-sources - [8]<a name="slug-page"></a> [gist-blog/src/pages/[slug].page.tsx at master · toms74209200/gist-blog](https://github.com/toms74209200/gist-blog/blob/master/src/pages/%5Bslug%5D.page.tsx) https://github.com/toms74209200/gist-blog/blob/master/src/pages/%5Bslug%5D.page.tsx - [9]<a name="preact-render-to-string"></a> [preact-render-to-string - npm](https://www.npmjs.com/package/preact-render-to-string) https://www.npmjs.com/package/preact-render-to-string - [10]<a name="deployment-lume"></a> [Deployment - Lume](https://lume.land/docs/advanced/deployment/#github-pages) https://lume.land/docs/advanced/deployment/#github-pages