技术

·

6 min read

·

- Views

焕然一新!Next.js + Notion 搭建的全新主页

「千呼万唤始出来」,终于是上线了

Copied

焕然一新!Next.js + Notion 搭建的全新主页

This post was updated 628 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 大大总是先人一步,在恰到好处的时机,我惊喜地发现了他的这篇文章。

https://spencerwoo.com/blog/nextjs-blog-notion

这实在是太棒啦!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 的第二篇文章……

https://spencerwoo.com/blog/revisiting-blogging-with-notion-2022

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

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

https://github.com/MannyCooper/anzifan.com

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

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

一直在路上

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


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

🙏感谢阅读,生活愉快。


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

(「Copycat」机智君使用了「敲打」)

「那没事了(捂脸)」