阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处古时的风筝「风筝」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

前端时间放假的时候跟一个朋友聊天，他说就在年前两天还接了个私活，给一个小公司做了一个官网。我惊讶道，你前端已经这么厉害了吗（因为他跟我一样是后端）？对于自称全栈的我来说，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 驱动的静态网站生成器。

image.png

应该没有一个开发者没见过类似于下面这样的网站吧。能够流行起来的一大原因可能就是它的这个样式看上去很舒服，比较适合国人的审美。

上手简单，几乎不需要懂前端知识，照着文档来就行了，除非你要进行定制开发。

VitePress

VitePress 和 VuePress 有啥区别呢，看了官网介绍才知道，这俩都是 Vue 团队开发的，只不过 VuePress 比较早，而且是基于 Webpack 的，而 VitePress 是 VuePress 的兄弟版，基于 Vue 和更快的 Vite。而且官方之后会侧重 VitePress。

看一下它的样式，和 VuePress 差不多，也是一贯的 Vue 风格。

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 证书配置一下。

芋道源码 —— 纯源码解析博客

搭建静态网站竟然有这么多方案，而且还如此简单