博客系统折腾了好几轮，从十多年前基于静态页面生成的 WordPress，到后来基于 Github 的内容站点，前几年接触后端开发，又把博客改成前后分离的架构，自己写 jwt 鉴权，做表设计，写增删改查接口。博客成了学习和实践一些技术的实验工具，内容反倒时常被丢弃。

这两年折腾了一些全栈项目，自己写起前后端代码，博客功能在我眼里也不在是实践和折腾，慢慢也想记录些有用的内容了。这样一来，SEO 的需求也要考虑进来，那么前后分离架构也就不再适合当前的需求了。

选型

基于以上 SEO 与搜索引擎考量，思考了以下几种架构：

传统静态页面或伪静态页面生成

传统的静态页面或伪静态生成页面，曾是网站 SEO 的不二选择。只要网站维护得当，原创度高，搜索引擎的爬虫定期收录、排名提升问题不大。当年风靡一时的框架 DeDeCMS / WordPress / Joomla! / Drupal 等属于此类。

这样一类网站框架一般除了集成一套渲染模板外，还会集成一个管理后台，一个富文本编辑器，用于添加和编辑文章，再生成静态页面供访问。一部分框架的“伪静态”生成，则本质上更像服务端渲染。总体而言，整站部署起来比较笨重，前台页面＋管理后台＋数据库的部署，虽然插件生态比较丰富，但是插件越多，需要的服务端资源就越多，对于一个 Blog 来说，既不经济，也不实用。

预渲染架构

预渲染是指在构建过程中，就调用或查询数据，并生成静态页面。最终部署时，直接部署静态页面即可。相当一部分前端框架提供预渲染功能，比如阿里团队的 Umi.js ，或者由 Vercel 开源的 next.js 等等。

预渲染本质上还是需要查询数据的，打包构建时，统一调用接口，收集数据，再生成页面。这样就需要额外开发数据查询部分，实质上也是需要准备数据库部署的。好处是打包的产物已经是静态页面，直接上传即可。用户访问量大时，占用一些服务器带宽，其他服务端资源占用较少。

服务端渲染

除了一些全栈开发框架外，一些基于 React / Vue 的开发框架也支持服务端渲染。如基于 Vue 的 Nuxt.js‌ 和基于 React的 Next.js ，国内优秀的全栈框架也有阿里系的 midway.js。

一些服务端渲染框架集成了直接进行数据库查询功能或 ORM 功能，可以在收到访问请求时，直接查询数据，再通过模板组织页面，返回给用户端。另外一些服务端渲染框架如 Gatsby.js ，支持 GraphQL 来进行查询并获取数据。

Markdown 生成

相比较前面几种架构，基于 Markdown 直接生成静态页面，要节约更多服务端资源和 Sql 查询资源，同时代码量要少得多。维护起来更加轻便、灵巧。维护工作量小了，维护意愿就大大增加了。

比较有代表性的框架有 Hugo / Hexo / Jekyll 等。另外一些前端框架如阿里云团队基于 Umi.js 推出的文档站点生成工具 dumi.js ，或者基于 Vue 的静态站点生成工具 VitePress 具有类似功能。

最终选择了基于 Hugo 的静态站点生成器，一方面，基于 Golang 开发的 Hugo 在开发端编译速度更快，尤其是在与一众基于 node.js 的编辑工具对比下来，速度是数倍的提升。

另一方面，在与 Hexo / Jekyll 等框架作对比后，Hugo 在安全性、配置性、插件可用性方面仍然评价较高。在同样支持部署到 Github 和自定义模板的情况下，Hugo 是最适当的选择。

Hugo 的安装与配置

Hugo 的官网：

gohugo.io

版本

Hugo 有两个版本：标准版和扩展版。

扩展版有两个好处，一是处理图片时编码为 WebP 格式。您可以使用任一版本解码 WebP 图片。 二是可以使用嵌入式 LibSass 转译器将 Sass 转译为 CSS。扩展版无需使用Dart Sass转译器。

准备

安装或使用 Hugo 需要用到 Git 。如果你需要从源码构建一个 Hugo，或者需要安装 Hugo 模板，或者你需要将静态网站托管在 Github 等地方，都需要用到 Git。

此外可能还需要用到 Go ——如果你需要从源码构建 Go 或者需要使用 Hugo Modules 功能。

本文主要安装扩展版 Hugo ，所以不必另外安装 Dart Sass 转译工具。

从 Homebrew 安装

brew install hugo

如果 brew 源较慢，请自行匹配寻找合适的 Homebrew 国内源。

验证安装情况：

hugo version

建立目录，进入目录，配置 git，从 git 设置 Hugo 的模板（theme）,启动本地服务：

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

创建文章：

hugo new content content/posts/my-first-post.md

如果你要在启动时包含草稿内容：

hugo server -D