115 – 《重写个人网站》

今天花了些时间开始重写个人网站 http://23.106.141.116:8080/ 。现在的版本真是太简陋了,有且仅有一个 markdown 文件,部署在 versel。重写的原因是我的内容生成地太分散,在 github、公众号、知识星球、内网、语雀,到处都有,希望借此做下聚合,方便用户,同时也方便个人搜索查找。另外,也是由于最近准备小册,希望找个地方先存一下,知识星球的纯文本实在是太简陋了。

新的个人网站基于 umi,约定式路由,通过配置 mdx 加了自定义 webpack loader 做渲染处理,部署到 Vercel。文档方案其实有多个选择,mdx、contentlayer、markdoc,后两个都新出的,非常想尝鲜,但时间优先,目前还是选择相对熟悉的 mdx 方案。使用上,在 mdx 的基础上加了 remark-gfm、remark-frontmatter、remark-parse-frontmatter、rehype-pretty-code、rehype-slug 插件。

现有方案的不足是,markdown 除了产出内容,还需产出像创建时间、作者、标题等内容,这些内容的渲染是由外部控制的,所以渲染之前必须知道这些信息,而这些信息又是在 webpack loader 里产出的,所以是在构建之后,这就形成的循环依赖。所以 mdx 信息的产出依赖构建是不太灵活的,我会在做完之后再试试 contentlayer 的方案,这个方案中 md 文档的处理是独立在构建之外的。

纯静态的话这样就够了。后面会在补一些动态的能力,比如 newsletter 订阅、知识星球和小册内容的权限、每日简报的众包收集等。技术栈应该会用 https://next.umijs.org/docs/tutorials/blog 这里提的 api route + PlanetScale + Prisma + UpStash。

网站风格目前参考了 https://herman.bearblog.dev/blog/,极简风,都用不上 TailwindCSS,先把架子搭出来再说。网站信息架构中有个不太常见的「Now」页,原因是「About」页通常一成不变,而「Now」页可用来展示最近做的事。

进展是今天完成了静态站点的搭建,等这周完成内容补充之后,就会部署到 http://23.106.141.116:8080/ ,下周开始逐步增加动态能力。这个仓库不会开源,因为会涉及到把星球及其他不公开的内容也搬进去。