我又㕛叕重写了一遍博客，这次用上了 Vite。其实我以前用过不少博客生成器，包括 Jekyll、Hexo、Gatsby 等等，但是他们要么渲染太慢，要么安装成本太大。我曾经口胡过详细的需求，简单来说我需要这个生成器拥有以下功能：
我曾经试过手撸 HTML 源码，这样确实灵活性很高且只需要成本为零的先验知识，但是遇到代码高亮等读写都比较麻烦的内容还是不够方便。后来我写了一个 telegraph，除了灵活度不高外基本实现了上述需求。
这次重写我决定尝试一下 Vite 的 SSR，在研究了一下 Vue 的方案后，我发现核心就是要让前端代码能跑在 Node.js 上，这样本地的脚本就可以分析同一份前端数据以渲染那些网页了。
// src/main.ts
export const app = import.meta.env.SSR ? createSSRApp(App) : createApp(App)
// scripts/build.ts
import { app } from '../src/main'
console.log(renderToString(app))因为我不想要运行时带一个 100 kB 的 Vue，但是又想要 dev 环境下能看到内容，最后我的入口文件长这样：
// 这几个变量都是纯的，打包时会被 tree shake 掉
export let templates = {}
export let posts = {}
// 只在预渲染和 dev 时加载真正的数据
if (import.meta.env.SSR || import.meta.hot) {
templates = import.meta.glob('./templates/*.html', { query: 'raw', eager: true })
posts = import.meta.glob('../posts/*.md', { eager: true })
if (import.meta.hot) {
render(location.pathname, templates, posts)
import.meta.hot.accept()
}
}完整的代码见这里。
经过这么一通折腾，现在我可以用 Vite 生成无 JS 的博客了！
> @ build /path/to/hyrious.github.io
> esbuild-dev scripts/build.ts
[build] Build for client...
vite v5.0.0 building for production...
✓ 7 modules transformed.
dist/index.html 0.50 kB │ gzip: 0.30 kB
dist/assets/index-vWxNvpCb.css 6.42 kB │ gzip: 2.37 kB
✓ built in 898ms
[build] Build for server...
dist/index.html 4.41 kB
dist/p/index.html 3.04 kB
dist/p/hello-world.html 12.11 kB
[build] Build finished.