以下、手順メモ
nvim 準備
前回はnvim を astro ファイル対応させるのが面倒くさい、というよりも
謎の独自フォーマットを敬遠していました。
その後 jsx, svelte, vue とひととおり眺めてきて、
Web界隈では良くあるものだということを理解したので astro もいけるだろうという気持ちになりました。
:TSInstall astroであっさりとシンタックスハイライトも有効になります。
わりとマイナー？な言語でも、 tree-sitter あるので強い。
astro 初期化
> npm create astro@latesttypescript を有効にした。 生成されたファイルを svelte で運用していたフォルダに上書き。
::: wraning
node_modules をちゃんと削除しよう！ cache とか vite のキャッシュとか残っているかもしれぬ。 :::
posts に記事投入
/posts/**/*.md を /src/contents/posts に投入した。
front matter の型修正
- description を
default('') - pubDate を date に変更
rss.xml.js
items: posts.map((post) => ( { ...post.data, pubDate: post.data.date, // pubDate 無いとbuildでエラー! link: `/posts/${post.slug}/`, })),typescript を効かせる
型を定義したにも関わらず、language-server がエラーを報告してこない。
ts-plugin が追加で必要だった。
> npm install --save-dev @astrojs/ts-plugingetCollection が型エラーを伝えてくれるようになった。
さくさくっと修正。
blog テンプレートに記事を投入して動いた。
ContentCollections のよさみ
blog サイトはいわゆる FileBaseRouting とはちょっと違って、
記事収集部分の手作りとか設定を強いられることが多い。
minsta, sveltekit … etc がそうでした。
vitepress とかも手作り glob とかが要りそう。
docusaurus は記事収集能力があってお手軽です。
blog タイプのコンテンツは archive とか tags とか
の都合上、frontmatter の付属した記事一覧の管理が必要です。
next, prev なら date で sort されている必要があります。
原始的にやるならnode もしくは vite で glob して一覧を得る感じになる。
それならglob したついでに watch してほしいです。
システム化されて headless CMS や Gatsby や ContentLayer になっていきます。
でもディレクトリで完結して簡単に済ませたいという気持ちもあります。
astro の ContentCollections はまさにディレクトリから markdown を集めて frontmatter を読みこんでコレクションにしてくれる機能です。 過不足なしでちょうど良い。
さらに記事と同じフォルダにある画像も素直に収集してくれました。
build 確認
> npm run build画像でこける。
> npm install sharp正常終了するまでがんばってなおす。
20:23:54 [build] Complete!横のフォルダを build 除外する手段が見つからない
svelte の src フォルダを _src.bak とかどけておいたのが、
ビルドされてエラーになる。除外方法がわからん(srcDir はではできないぽい)。
うーん。なんだこれは。消すことを強いられる。
ローカル確認
> npx http-server distgh-pages
この時点で一度スマホでアクセスしてみる。 軽い。 前の svelte サイトはなんかやらかして、重くなっていたぽい。 ちゃんと軽量のサイトを作るってのは俄かでは難しいですね。
最低限で gh-pages まで動確できました。