搭建静态网站竟然有这么多方案，而且还如此简单
我的个人博客：www.moonkite.cn
大家好，我是风筝
春节放假的时候跟一个朋友聊天，他说就在年前两天还接了个私活，给一个小公司做了一个官网。我惊讶道，你前端已经这么厉害了吗（因为他跟我一样是后端）？对于自称全栈的我来说，CSS 一直是我最大的噩梦。
他说，他找了一个开源静态网站框架，找一个好看的主题然后问对方：做成这样可以不。如果对方要不满意，这事儿也就没下文了。结果对方并没有过多的要求，表示可以。就这样，简单配置了一下，主要是配置官网上的一些信息以及部署到服务器，用了两天时间，几千块钱到手了。
人家赚钱咱是一点儿也不眼红啊，凭的就是本事和信息差。原来这玩意不仅能快速帮我们自己搭建网站，还能顺手赚点钱。
进入正题
接下来咱们就介绍一下搭建静态网站到底有多少种可选方案，每一种都高效、美观、简洁，都值得拥有。
以个人博客来说，大部分情况只是要界面简洁，有简单导航，有文章列表，能够清晰的阅读文章就好了，例如下图我的博客。
还有一类左侧是分级目录，右侧显示内容。这种比较适合那种结构清晰或者电子书、教程之类的。例如下面这样。
以公司官网或产品主页来说，也类似，就是落地页（首页）内容丰富一些，然后有一些特定的比如价格介绍、功能介绍的页面，就像下面这样。
为什么不用 WordPress
在以前搭建一个个人博客或者一个静态网站（例如公司官网、产品网站）还不是很方便，如果你不会自己写前端，那恐怕只有 WordPress 可选。但是用 WordPress 对服务器要求还是挺高的，因为 WordPress 不是纯前端的，它是 PHP 写的，需要配置 MySQL，成本一下就上去了。
WordPress 配置过多，以我们写技术博客为例，要支持 Markdown、要支持代码高亮，都要安装对应的插件。
对于我来讲，还有一个我坚决放弃它的原因，就是我懒啊。我平时写东西都是在客户端 Markdown 编辑器里，而如果我要发布到 WordPress 搭建的网站中，我还要打开WordPress 后台，然后在页面上填上标题、粘贴写好的 Markdown 内容，这跟要我命有什么区别。
而对于下面要介绍的这几种静态网站来说，直接把写好的 Markdown 文件放到特定目录中，然后编译就可以了。对于频繁更新的网站来说，这个编译的过程完全可以自动化进行。
Astro
官网：https://astro.build/
Astro 是这两年迅速发展的一款 CMS 框架，可以用来搭建博客、作品集、文档、落地页、SaaS、营销、电子商务等等。
Astro 相对于很多其他的静态框架更加复杂一点，它有一套自己的模板，类似于 Vue 和 React ，还有自己的约定路由等规则。而且它是与框架无关的，更像一个高级的、功能丰富的脚手架，你可以在它上面集成 Vue、React 进行定制开发。所以，你可以把它当作一个开发框架，类似于 Next.js 那样。
当然，如果你只想用它已有的功能和模板，也完全能够搭建个人博客、官网这些，一点问题没有。而且，官方有丰富的模板可供选择，什么文档类的、博客类的、产品介绍类的，应有仅有。
模板地址：https://astro.build/themes
如果不定制开发的话，上手比较简单，照着官网教程安装一下 NodeJS，找一个模板配置一下就可以了。
Hugo
官网：https://gohugo.io/
Hugo 是一个快速、现代且高度可配置的静态网站生成器。它是使用 Go 语言开发的，并以简单易用、高效构建和渲染静态网页而闻名。Hugo 的设计目标是提供一个简洁、高性能的工具，以便开发人员可以轻松创建和管理各种类型的静态网站。
Hugo 官网提供了几百种主题样式可供选择。https://themes.gohugo.io，到上面选一个你喜欢的风格。
我的博客就是用 Hugo + Pages 搭建的，具体的搭建教程在这里：https://www.moonkite.cn/category/other/Hugo-+-Github-Pages-%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/
Hexo
官网：https://hexo.io/zh-cn/index.html
和 Hugo 很类似，一共四个字母，俩字母都一样。Hexo 是用 NodeJS 写的，丰富的主题同样支持个人博客、文档、产品官网、落地页这些。
VuePress
官网：https://v2.vuepress.vuejs.org/zh/
VuePress 大概是下面这几个中最有名气也是用的最多的了，由名字就能看出来，它是 Vue 开发的，官方定位是 Vue 驱动的静态网站生成器。
应该没有一个开发者没见过类似于下面这样的网站吧。能够流行起来的一大原因可能就是它的这个样式看上去很舒服，比较适合国人的审美。
上手简单，几乎不需要懂前端知识，照着文档来就行了，除非你要进行定制开发。
VitePress
VitePress 和 VuePress 有啥区别呢，看了官网介绍才知道，这俩都是 Vue 团队开发的，只不过 VuePress 比较早，而且是基于 Webpack 的，而 VitePress 是 VuePress 的兄弟版，基于 Vue 和 更快的 Vite。而且官方之后会侧重 VitePress。
Docusaurus
官网：https://docusaurus.io/zh-CN
Docusaurus 是 FaceBook 开源的，用 React 实现。如果熟悉 React 技术栈的，可以用 Docusaurus 搭建博客，方便自己的一些个性化定制。
最终的文档结构是这样
说实话，这个效果感觉没有 VitePress 那么顺眼，可能是 VuePress 生成的网站太多了的缘故。
Nextra
官网：https://nextra.site/
Nextra 是基于 Next.js 的静态文档和博客框架，Next.js 是 React 官方首推的 React 脚手架项目。
docsify
官网：https://docsify.js.org/#/zh-cn/
这个框架更简洁了，什么多余的东西都没有，就是左侧导航，右侧内容，连上方导航条都没有。使用起来更是超级简单，应该是这几种里面最简单的了。
有时候本来也不需要那么多花里胡哨的东西，对于单纯某一知识库来说，已经足够了。
最后
以上是几个比较简单好用的 CMS 框架。到底用哪一个还要综合考虑，比如：
公司官网、落地页之类的就要考虑 Astro、Hugo、Hexo 这种带有丰富模板的，而知识、文档类的就随意了； 根据自己的需求，如果有定制化需求，那就要看你熟悉的领域了，比如你擅长 React，那就要用支持 React 的，比如Docusaurus、Nextra 或者 Astro，如果你熟悉 Vue，那就用 VitePress 或 VuePress；
大部分都可以使用 GitPages 或 Vercel 来免费部署，只要你准备一个域名就可以了。但是鉴于网络的问题，最好还是部署在国内的服务器上，这就需要掌握一点点运维知识了，例如 Nginx 简单配置一下，HTTPS 证书配置一下。
古时的风筝，一个程序员，一个写作者。