2020年个人开发者博客的理想技术堆栈

我最近开始建立我的个人网站--你现在正在阅读的那个网站，恰好是这样！

令人惊讶的是，要把一个符合我标准的技术堆栈组合在一起，比预期的要难得多。我的标准非常简单；我希望大多数RESPECT开发人员都有一个类似的列表。然而，要将所有这些碎片放在一起却出人意料地困难。

鉴于缺乏像样的开箱即用解决方案，我担心许多开发人员(甚至可能是您，亲爱的读者)正满足于次优的、受限的静态站点生成器，这限制了您网站的交互性和灵活性。我们可以做得更好。

tl；dr i创建了一个名为Devii的个人开发博客启动者。在此处克隆存储库以开始此设置：https://github.com/vriad/devii.。

我想在反应和打字的网站建设。我全心全意地爱他们两个，我把它们用在我的日常工作中，而且它们将会存在很长一段时间。另外，编写非类型化的js让我感觉很脏。

我不希望我的个人网站受到限制。当然，我目前的网站由两篇简单的静态博客文章组成。但接下来，我可能希望构建一个包含交互式可视化、可筛选表或Reaction组件开源演示的页面。即使是一些简单的东西(如本页底部的电子邮件时事通讯注册表单)如果没有Reaction也很难实现；我真的对我们在Reaction之前是如何构建表单的完全没有记忆。

另外：我想访问NPM生态系统和所有我最喜欢的UI、动画和样式库。我真诚地希望我再也不要写一行原始的CSS；CSS-in-JS4LYFE宝贝。如果你想在推特上跟我吵架，那就来找我吧：@vriad。

如果写新的博客帖子令人厌恶，我不会这么做。这是一条令人遗憾的宇宙法则。即使用普通的HTML--只是一堆<；p>；标签放在一个div中--写博客帖子也够烦人的了。答案是：当然是降价！

像Hugo和Jekyll这样的静态站点生成器(SSG)提供了不可否认的美妙创作体验。您所要做的就是在正确的目录中触摸一个新的.md文件，然后开始编写。不幸的是，我所知道的所有基于降价的SSG都过于严格。在同一页上混用Reaction和Markdown要么是不可能的，要么就是很棘手。如果可能的话，它可能需要一些插件/模块/扩展、配置文件、BLOB样板或惊人的黑客攻击。对不起，雨果，我不会像2015年那样用React.createElement重写我的反应代码。

嗯，那对我不管用。我希望我的网站是反应优先的，当它让我的生活变得更容易的时候，会有一些降价。

虽然我非常喜欢Jamstack，但从搜索引擎优化的角度来看，它并没有削减它。许多由无头CMS提供支持的博客在呈现博客内容之前需要两次往返(一次是获取静态JS包，另一次是从CMS获取博客内容)。这会降低页面加载速度和用户体验，从而降低您在Google上的排名。

相反，我希望我的站点的每个页面都预先呈现为一组完全静态的资产，这样我就可以将它们部署到CDN，并在任何地方获得快速的页面加载。您可以通过服务器端呈现获得相同的好处，但这需要实际的服务器和全球负载平衡才能达到类似的页面加载速度。我和其他人一样喜欢过度设计东西，甚至我也有一句台词。😅。

我将在下面描述我最终的架构设计，以及每个选择的基本原理。我将此设置提炼成一个网站初学者/样板，可在此处找到：https://github.com/vriad/devii.。下面，我提到了我实现的某些文件/函数；要查看这些文件/函数的源代码，只需克隆repo git克隆[email protected]：vriad/devii.git。

我选择使用Next.js构建我的站点。这不会是一个令人惊讶的决定，任何人谁玩静态渲染或服务器端渲染的反应在最近几年。Next.js正在迅速吃掉这个市场上其他所有人的午餐，特别是盖茨比的(抱歉，盖茨比的粉丝们)。

到目前为止，Next.js是使用Reaction执行任何静态生成或服务器端呈现的最优雅的方式。早在3月份，他们刚刚在9.3版本中发布了他们的下一代(双关语)静态站点生成器。因此，本着在生命之春使用技术的精神，Next.js是一个不费吹灰之力的公司。

以下是项目结构的快速细目。不需要理解它的每一部分；但在本文的其余部分中参考它可能会很有用。

。├──自述文件。MD├──PUBLIC//所有静态文件(图像等)都转到此处├──Pages//此目录中的每个.tsx组件都会成为最终站点|├──索引的一个页面。tsx//主页(可以访问所有博客文章列表)|├──博客|├──[博客]。md//呈现`/md/blog`├──md|├──博客|├──设备下的博客帖子的模板组件。MD//这一页！├──随便什么。MD//此目录中的每个MD文件都将成为博客帖子├──Components|├──。tsx|├──。tsx|├──<；各种其他>；├──加载机。ts//包含用于加载/解析Markdown├──节点模块├──tsconfig的实用函数。JSON├──包。下一位是JSON├──。配置。JS├──Next-env.。d.。TS├──.。吉蒂诺尔。

Reaction和TypeScript都包含在Next.js的DNA中，因此当您设置Next.js项目时，您可以免费获得它们。

另一方面，Gatsby有一个特殊的支持打字的插件，但它并没有得到官方的支持，而且似乎在他们的优先列表中排名较低。而且，在摆弄了它一个小时后，我无法让它在热重新加载的情况下玩得很好。

使用Next的特殊getStaticProps钩子和辉煌的动态导入，它对于Markdown文件来说是微不足道的，并将其内容作为道具传递到您的Reaction组件中。这实现了我一直在寻找的圣杯：轻松混合、反应和降价的能力。

每个Markdown文件都可以包括一个包含元数据的标题块。我实现了一个简单的实用函数(LoadPost)，该函数加载Markdown文件，解析其内容，并返回具有以下签名的TypeScript对象：

type={path：string；//该页面的相对URL，可以作为href content：string；//MD文件标题的正文？：string；subtitle？：string；date？：number；auth？：string；AuthPhoto？：string；tag？：string[]；bannerPhoto？：string；thhumnailPhoto？：string；}；

我实现了一个单独的函数loadPosts，该函数加载/md/blog下的所有Markdown文件，并将它们作为数组(PostData[])返回。我在这个网站的主页上使用loadPosts来呈现我写过的所有帖子的列表。

我使用了非常棒的Reaction-markdown包将Markdown呈现为一个Reaction组件。我的Markdown呈现组件(/Components/Markdown.tsx)提供了一些受Medium设计启发的默认样式。只需修改Markdown.tsx中的样式专业人员即可根据您的喜好定制设计。

您可以使用三重反引号语法轻松地将代码块拖放到博客帖子中。使用语言标签指定编程语言，就像GitHub一样！

为了实现这一点，我为Reaction-markdown实现了一个自定义代码呈现器(/Components/Code.tsx)，它使用REACTION-SYNTAX-FLIGHTTER来处理高亮显示。所以这就是：

您可以使用纱线构建&；&；纱线导出生成站点的完全静态版本。这一步完全由Next.js提供支持。静态站点将导出到OUT目录。

生成后，使用您选择的静态文件托管服务(Firebase托管、Vercel、Netlify)来部署您的站点。

这里的引擎盖下面什么都没有。您可以查看和修改提供上述功能的所有文件。DeviI只提供了一个项目脚手架、一些Markdown加载实用程序(在loader.ts中)和一些合理的样式默认值(特别是在Markdown.tsx中)。

要开始自定义，请修改index.tsx(主页)、BlogPost.tsx(博客帖子模板)和Markdown.tsx(Markdown渲染器)。

请访问giHub资源库开始使用：https://github.com/vriad/devii.。如果您喜欢这个项目，请留下一个⭐️STAR⭐️，帮助更多的人找到Devii！😎。

要直接跳到代码中，请克隆repo并启动开发服务器，如下所示：

当我发布新的博客帖子时，您将收到一封电子邮件--这就是🤙。

我目前正在开发一个打字库，用于在没有GraphQL的情况下构建端到端的类型安全API。当你的电子邮件准备好时(很快！)就会收到通知。