几天前,我醒来时想到将我的网站flaviocopes.com从Hugo迁移到Astro。
我只花了一天的时间,还设计了一个全新的主题。
在这封邮件中,我将详细介绍这个过程和决策,希望对你有所帮助。
如果你不知道Astro,它是一个非常酷的网站构建工具。我最近创建的许多新网站都在使用它。我想这么做已经有几个月了,但我一直在抗拒,并且还有很多其他更重要的事情要做。
在处理我的网站时,最重要的指标对我来说是DX,即开发人员体验,也就是说我不想使用糟糕的工具。
Astro在这方面非常好,因为它允许我使用UI组件构建网站,我可以使用其类似JSX的组件语法创建,非常好用,甚至可以使用React组件,可以在构建时进行前端渲染或服务器渲染。或者可以使用任何其他前端框架。
我使用这个最后一个功能构建了一个非常酷的东西。
我很高兴在VS Code中调整我的页面,但有时候会感到厌烦,这个过程让我不想写新的文章。我知道我可以使用内容管理系统,但我就是不想用。我想自己构建一个适合我的系统。
我是一个狂热的Notion用户,我非常喜欢它的编写体验,以至于过去两年我一直在使用它创建所有的课程,包括Bootcamp。在我看来,没有其他工具可以与之相比。
这一次,我想看看是否可以使用Notion来驱动我的博客。不是全部,因为现在博客已经有超过1700个教程了,如果每次构建都需要向Notion API请求所有内容,那将会非常耗时,而且我还得处理速率限制的问题。
所以我建立了一个混合解决方案。
我在Notion中编写新文章,并且可以在电脑运行一个命令将它们获取并转换为我的网站上的Markdown文件。
最佳的双赢方式:快速编写和快速构建时间。
Hugo建站用了1分10秒,Astro用了2分43秒。
它的构建时间是原来的2倍多,但是嘿,1700篇博文。真的很多。实际上它比我听说的一些构建时间要快得多。
在看到我提交的更改之前,我有更多的时间喝咖啡,但现在我可以做更多的事情,因为Hugo很棒也很快,但Astro是JavaScript,我可以随心所欲地使用它。
我不止于此。
我还有这个想法:我想能够完全从Notion页面构建一个站点。将其作为首页,子页面作为站点上的页面。
我还希望可选择在Astro页面中通过代码编写主页,然后在Notion上有一个页面可以服务这些子页面。最佳组合。
所以当我想要添加一个页面到站点上时,我不需要打开电脑,打开VS Code,进入src/pages,创建一个新文件,编写HTML / JSX…我只需创建一个Notion页面,甚至可以在火车上使用我的智能手机,在那里编写内容,按下一个按钮来触发新的站点构建。
站点在构建时询问Notion它准备好发布的页面,获取它们,并构建一个带有该内容的静态站点。
我知道还有其他工具可以通过Notion创建站点,但与它们相比,这个方法完全可定制,对开发人员友好,并且Notion只是网站的一部分。
我有完全的控制权。网站的其余部分可以使用React、Svelte或其他任何技术构建。哦,我提到了React吗?在构建时进行服务器渲染是很棒的。我可以使用React的高级特性和JSX,生成HTML并将其传送给浏览器,而不是传送React本身并进行客户端渲染。
我对这个工作流程感到满意,使用这项技术构建了几个不同的站点。我喜欢它。它既简单,又不妨碍我想做的任何事情。
而且我认为这是一种新颖的网站发布方式。
我可以专注于内容而不是技术堆栈(讽刺的是,到现在我一直在和你谈论技术堆栈)。一旦构建完成,它就在幕后消失了。
网站构建工具很有趣。我喜欢构建网站,喜欢谈论构建网站。我已经使用它们工作了很长时间。
当我进行这个基础平台的重写时,我还必须从一个自定义的Hugo主题迁移,这个主题已经积累了多年的积尘、调整和条件语句。
我决定从零开始。我只有内容,没有其他东西。我添加了Tailwind CSS,这是我想做很久了,但是从来没有勇气迁移我那些成千上万行的自定义CSS。
简单开始,只是放置一些基本的CSS。我对之前的URL结构进行了复制,这样就不必处理可能让谷歌生气的URL更改。
界面看起来很清爽。我希望有一个简约的界面,没有花俏的东西。内容才是最重要的。我去掉了侧边栏。去掉了我积累的不重要的东西。我现在有一个包含所有文章的页面,而不是分页。对搜索来说非常好。我可以移除Algolia。代码更少。我有一种很好的方式来显示标签。
随便看看吧。
我还有深夜模式,因为我不希望你宝贵的眼睛在夜间受到伤害,你可以通过操作系统设置来打开它。
享受吧!