什么是静态网站

静态网站，顾名思义，是内容相对更新不是很快的网站。个人网站，公司网站，文档等由于更新不频率，都时候用静态网站。操作制作静态网站直接用 HTML + CSS + JavaScript，现在已经有了很多制作静态网站的工具。比如，本文要将的 Hugo，Astro，NextJS 都可以用来做静态网站，当然它们的功能不止是做静态网站。

使用静态网站工具设计网站，增加新的页面或者内容之后，需要将其编译成静态网站，部署到服务器上，可喜的是这几个工具都提供了非常友好的部署方式，并将与很多托管站点有很好的兼容性。

Hugo

Hugo 是用Go语言开发的一个开源的静态网站工具，它还提供了非常便捷的CLI工具用于管理项目、管理页面。

安装

Hugo 是用 Go 语言开发的，使用 Hugo 需要安装 Go 和 Git。Hugo 的安装也非常简单，一个命令就可以完成安装，或者你也可以像我一样，下载源码编译。详细步骤请参考官方安装说明。

模板

Hugo 社区成立的比较早，社区活跃目前 Github 上的 Star 数量已经达到64.9K，因此 Hugo 的模板也非常多。很容易找到自己喜欢的模板。

特性

使用 Hugo 新增页面非常容易，直接通过 hugo new 命令就可以新建一个 markdown 文件，你需要做的是把自己的内容按照 markdown 格式输入就好。

缺点

如果使用 markdown 就能满足你的需求，那么 Hugo 是一个完美的工具。但是，我觉得作为个人网站应该自己能够做一些独特的东西，当然也包括 UI，例如图片的位置，表格的样式等。如果使用 Hugo 达到这样的效果并不容易。

Astro

比起 Hugo Astro 非常年轻，它好像诞生与2021年6月。还不到2岁，最近刚刚发布2.0版本。但是它的社区也还是比较活跃的，目前 GitHub 上已经有25.4K Star。

Astro 是 **使用 JavaScript/TypeScript 开发的。就网站开发而言，JavaScript 比 Go 语言更具有优势，超级庞大的开发人员以及现成的海量工具可以直接使用。

安装

Astro 依赖于 NodeJS，因此你需要首先安装 NodeJS，然后使用包管理工具安装 Astro，不过也非常简单。

模板

与 Hugo 相比，Astro 的模板少很多，毕竟它还太年轻，不过也能找到很多不错的模板，但是很多需要付费购买。

特性

Astro 不但支持 markdown 而且还支持 react 和 mdx。因此，你可以向使用 **React**那样创建页面，每个元素的样式你都可以完全控制。mdx 则允许你将 markdown和 JS 嵌入使用。总之，给了你非常大的便利性。

缺点

我之所以要体验 Astro 是因为 Hugo 的灵活性不足，无法让我轻松美化 UI。Astro 确实提供了这个功能，但是一直没有找到满意的模板，自己从头开发又没有必要使用 Astro。

NextJS

NextJS 是功能比 Hugo 和 Astro 强大的多的工具，它是一个 React 的 Web 框架。生态也更多，GitHub 上已经有99.7K Star。使用它做静态网站确实是“杀鸡用牛刀”大材小用了。但是我比较喜欢折腾，玩玩挺好的。另外原因是区块链生态的很多工具都是采用 React 开发的，对自己的技术栈很有帮助。

我适用 NextJS 做静态完整是NextJS + ContentLayer 的组合，后者是 NextJS 生态的一个库，用于支持markdown、mdx。

安装

与其他 Web 框架类似，安装 NodeJS 之后，使用包管理工具可以一键安装 NextJS，并不复杂。

模板

虽然也有做静态网站的模板，但是使用NextJS的并不多。但是，我感觉做静态网站的代码量并不比不使用模板的 Astro 多。

特性

NextJS 的优势在于它拥有非常强大的功能，基本上做Web需要的所有的功能它都具备了，特别是与 React 生态的融合对我来说非常有吸引力。

缺点

如果单纯的做静态网站，NextJS 的缺点也是非常明显的，相对 Hugo 和 Astro 你需要自己动手完成大量的工作。

总结

如果你仅仅是一个内容创作者，对编程兴趣不大，那么我建议你使用 Hugo。但是，我比较看好 Astro，与 Hugo 相比，它的模板少了，但是假以时日我相信肯定会丰富起来的。如果你喜欢从头折腾，不妨试试 NextJS 或者 React！