This post was updated 824 days ago and some of the ideas may be out of date

Hi，好久不见。

早在一年多前就萌生了重写博客的想法，原因无非是「对 UI 不够满意」、「在别人的结构下定制起来束手束脚」、「感觉实现不够『优雅』」……虽然博客的核心是内容，但毕竟生命在于折腾，说干就干，没想到一直磨到现在才完成……总之，这篇文章会记录下整个心路历程，顺便给这个网站一个崭新的开始。

完美主义受难记

回顾下历程：起初我基于 Hexo 又重新写了一个主题，毕竟一直接触的 Hexo，对它也比较熟悉；后来了解到一些主流 CMS，详细比较了它们和用 markdown/mdx 管理内容的异同，比如 Ghost 这种；再后来接触了一些主流 React 框架，如 Gatsby（顺便学习了下 GraphQL），毕竟之前用的 Candy 主题是基于 React 写的……苦于对横评、纵评有着很深的执念，这些反复横跳的过程异常耗时。

总之一番折腾后，我个人的需求也愈发明朗了——基于 React、友好易用的 CMS、高度自定义&可控……说来也巧，@spencerwoo 大大总是先人一步，在恰到好处的时机，我惊喜地发现了他的这篇文章。

这实在是太棒啦！Notion 是我最喜欢的文本编辑/管理软件之一，而 Next.js 又是基于 React 的主流框架之一，可以说完美地满足了我的需求。更棒的是 @spencerwoo 行文清晰流畅（幽默），让我很轻松地理解了整套机制。

搭建之路……

于是我就按照文中的逻辑开始搭建了，不出意外地出了些意外，遇到了两个小坑：

• 此方案基于 react-notion-x，在当时并没有支持 Notion 官方 API（因为才刚开放没多久），这就留下了个心结；期间碰到过一次爬取失效也让我觉得有点难受。

• Tailwind CSS。我本人对 CSS 本身还算比较熟悉的，但原子化的 Tailwind 带来了新概念，看起来也很方便。在研究了很多评价文章后，我本人并不排斥，但总归是新东西，想找到 Best Practice 需要磨合。

这两个小坑在后续的开发中愈演愈烈了——随着 Notion 官方 API 的发布，越来越多基于官方 API 的项目开始出现了，而 react-notion-x 因为各种原因迟迟没有适配（现在适配了），导致继续基于 react-notion-x 开发变得很尴尬；而 Tailwind CSS，我起初并不适应，导致了很多过度定义数值、CSS 混用等蠢问题。同时超长的 className 让用惯 CSS Module 的我十分难受（虽然现在习惯了）。

就在我缓慢前进的时候，迎来了 @spencerwoo 的第二篇文章……

没错，新的方案基于 Notion 官方 API，于是我果断重构了（🤡）。有了之前的经验，这次重构非常的顺利，最终呈现出你现在看到的这个网站。除了换成了官方 API，TailwindCSS 也换成了 WindiCSS（在前者的基础上加入了一些比较方便的特性）。

对了本网站也开源了，感觉没有太多值得说的，核心流程 @spencerwoo 的那篇文章也说的比较清楚了，对大佬们来说都是「看了就懂了」的那种代码👇。

虽然还有很多不足，但总归是「能看」了，到了我自己认为可以发布出来的程度了，还是蛮开心的🎉。你可以在 这篇文章 中看到所有 Block 的样式。

（话说因为拖了太久了，甚至已经有类似方案的「一键」解决方案了，感兴趣的可以看看 NotionNext。）

一直在路上

当然，我相信网站的迭代是永恒的，甚至就目前而言还有很多值得完善的地方：

嗯，差不多就是这样，相比于之前用的 Hexo，到现在「一砖一瓦」都是自己亲手搭建起来的，整个过程给了我极大的满足感，也学到了很多。虽然遇到了许多焦头烂额的时刻，很多地方实现也还不够「优雅」，但总之是做了些比较满意的东西出来。希望这份热情长存，不论是对编程、设计，亦或是其他。

🙏感谢阅读，生活愉快。

「这么短？这篇是不是有点水啊」

（「Copycat」机智君使用了「敲打」）

「那没事了（捂脸）」

Next

测试页面，这只是为了 Test