新网站和重新设计

几天前，我醒来时想到将我的网站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。代码更少。我有一种很好的方式来显示标签。

随便看看吧。

我还有深夜模式，因为我不希望你宝贵的眼睛在夜间受到伤害，你可以通过操作系统设置来打开它。

享受吧！