个人网站技术选型：使用 Hugo 快速搭建站点

自上次搭建个人网站快一年了，当时针对技术选型写了篇文章。今天略作修改，在公众号《高效开发》上分享，供有意搭建个人网站的朋友们参考。

自幼不喜欢文字和写作，但从接触互联网之日开始，便渴望在互联网上留下自己的足迹。大学时期，我便开始搭建个人网站；毕业后，偶尔撰写博客；微信兴起时，就注册了公众号。我的个人网站域名最初是 yanxi.com，后来有人看中了这个域名，我便将其出售。自那以后，总感觉生活中缺失了什么。几日前，我忍不住再次注册了新域名 yanxi123.com，准备重新搭建我的个人小站。

个人博客类网站在技术上并不复杂，其核心是一个内容管理系统：

• 功能上，它应包含文章发布、分类、标签和搜索。
• 用户体验上，它需要美观，并且要适配PC端和移动端。

为了快速搭建网站，我希望能使用一个现成的系统，它不仅要能快速搭建，还要具备强大的定制性和扩展性。

技术选型

Git vs 数据库

传统的CMS将文章存储在数据库中，但随着Git和GitHub的流行，越来越多的人选择将内容存储在Git仓库中。以下是两种存储模式的对比：

基于 Git 存储的优点

• 原生支持版本控制。
• 支持离线写作，速度更快。
• 免费托管服务选择多，而免费的长期数据库服务则较为罕见。

基于数据库存储的优点

• 适用于内容非常多的大型网站
• 适合不熟悉Git、Markdown等技术的非技术人员

由于我平时习惯使用Git和Markdown进行开发和文档编写，加之版本控制和成本的优势，我选择了使用Git来存储文章内容。

选择渲染类型

用户能够在浏览器中看到网页，是因为浏览器完成了页面内容的渲染。从页面内容的生成方式来看，可以将网页渲染分为以下几类：

1. SSR（服务端渲染）
2. CSR（客户端渲染）
3. SSG（静态站点生成）
4. ISR（增量静态生成）

服务端渲染（SSR）是历史最悠久的渲染方式，它通过服务端动态读取数据库获取内容，生成完整的HTML返回给浏览器，完成渲染。其优点是打开速度快，对搜索引擎友好（有利于SEO）；缺点是需要额外的服务器和数据库资源。

客户端渲染（CSR）起源于前后端分离，是单页面应用所使用的渲染方式。它通过在客户端使用JavaScript调用接口获取数据，并完成内容的渲染。其优点是前后端开发者分离，缺点是打开速度较慢，对搜索引擎不友好。

静态站点生成（SSG）是在站点发布前，在构建过程中生成所有页面。其优点是打开速度快，对搜索引擎友好，无需动态服务器；缺点是当内容较多时，构建过程相对较慢。

增量静态生成（ISR）是SSG的增强版，适用于网页内容更改频繁的场景，会动态更新页面内容，无需每次修改都重新构建站点再发布。它具有SSG的优点，缺点是需要额外的服务器和数据库资源。

对比以上四种渲染方式的优缺点：

• SSR和ISR需要额外的服务器资源，从维护成本的角度考虑，可以排除。
• CSR打开速度慢，且对搜索引擎不友好，也可以排除。
• SSG虽然构建慢，但个人站点内容较少，更新不频繁，影响不大。

因此，我选择了 SSG（静态站点生成） 作为渲染方式。

选择 SSG 开源方案

支持 SSG 的开源软件 很多，按照目前（2023 年 10 月底）的 Github 星级排序 Top 10 如下：

其中 Next.js、Nuxt、Astro，支持服务端逻辑和服务端渲染，需要动态服务器的支持。

其他都是以 SSG 为主：

• Hugo、Gatsby 是专业的静态网站生成器。
• Jekyll、Hexo 比较适用于博客类。
• Docusaurus、Slate、Gitbook主要用于文档类静态站。

综合考虑，我排除了需要服务端支持的选项。其他选项都有很高的人气和广泛的使用。对于我的个人小站来说，选择哪个都没问题。

最终，考虑到GitHub星标数量和构建速度，我选择了使用Go语言编写的 Hugo 项目。

模板选择

接下来是选择网站主题和配色。我直接在Hugo官方推荐的主题中挑选。经过功能性、美观度、GitHub星级的对比，我最终选择了Hugoplate 。最吸引我的是它的界面简洁性，以及全面支持CSS框架TailwindCSS 。

网站上线

定制完程序后，我将之前博客网站中的几篇文章迁移了过来。由于之前的文章也是Markdown格式，所以基本上复制粘贴就完成了迁移，更早的文章就懒得去找了。

由于Hugo生成的网站是纯静态的，因此可以部署在任何支持静态内容的地方。可以自己搭建静态服务器，或者使用免费的GitHub Pages空间。

为了在国内访问更加快捷，我使用了腾讯云对象存储COS来保存静态站点，并使用其CDN产品进行加速。

至此，我的新个人网站终于和大家见面了，欢迎访问 https://yanxi123.com/ 。