基于 Hugo 搭建静态博客网站

BowenerChen的博客站

欢迎收藏：https://bowenerchen.com

网站架构

本站的网络架构示意图如下:

架构示意图

整个网站的搭建分为几部分：

• 腾讯云 DNS 域名：bowenerchen.com，在申请域名时同时也可以在腾讯云上生成 SSL 证书
• NGINX网络代理，主要用于卸载 HTTPS 请求，将卸载后的 HTTP 请求分发到后端服务
• 后端服务，这里主要分为两部分：
  • 根路径(/)下的静态网站页面
  • /hello 路径下的客户端信息捕捉服务

DNS 域名注册与管理

在腾讯云上可以注册域名，并生成域名对应的 SSL 证书。

注册完域名后，点击 DNS 条目进入域名管理页面，可以添加域名的后端服务地址：

在 DNS 的列表页可以点击 SSL 图标，为域名生成证书：

生成证书后可以在 SSL 证书管理页面找到对应的证书条目，并将证书下载下来：

NGINX 网络代理

由于本网站使用 HTTPS 对外提供服务，因此，NGINX 上需要配置好域名的证书，否则进行 HTTPS 卸载时会失败。

本网站在 NGINX 代理上做了两个路由分发，因此 NGINX 的监听转发配置了两条：

server {
    listen 443 ssl;
    server_name bowenerchen.com www.bowenerchen.com;

    ssl_certificate /xxxxx/bowenerchen.com_bundle.crt;  # 指向你的证书文件
    ssl_certificate_key /xxxxx/bowenerchen.com.key;  # 指向你的私钥文件

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384';
    # 启用 HSTS（HTTP Strict Transport Security）：这可以防止中间人攻击，强制客户端使用 HTTPS 连接
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    # 禁用 SSL 压缩：防止 CRIME 攻击
    ssl_prefer_server_ciphers on;
    # 设置合适的 SSL 会话缓存：提高性能同时保持安全
    ssl_session_timeout 1d;
    ssl_session_cache shared:SSL:10m;

    location = /hello {
        proxy_pass http://xxxxx; 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {
        root /xxxxx/public;
        index index.html;
        error_page 404 /404.html;
    }
}

后端服务效果

• 访问 https://bowenerchen.com/hello

• 访问 https://bowenerchen.com/

静态博客网站的搭建

本静态博客网站基于开源工具 Hugo 进行生成，网站的生成与部署过程流程为：

本地安装 hugo 客户端

hugo 的安装可以参考这里：安装指引。

总的来说：

• 在 mac 上可以使用 brew 进行安装：brew install hugo
• 在 Ubuntu/Debian Linux 上可以使用 apt 进行安装：sudo apt install hugo
• 在 CentOS/Fedora/Redhat Linux 上可以使用 yum/dnf 进行安装 sudo dnf install hugo
• 当然也可以基于 go 进行源码编译安装：CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest

安装完成后可以在本地查看 hugo 的版本：

注意这里需要安装 extended 的版本，Hugo Extended版本在基础版本上进行了功能扩展，具备以下特性：

支持SCSS和PostCSS

• 强大的样式处理能力：可以直接处理SCSS文件，将其编译为CSS，无需额外的工具。还支持PostCSS，能对CSS进行更高级的处理，如自动添加浏览器前缀、优化CSS代码等，使网站的样式兼容性更好，代码更高效。
• 便于样式定制和管理：开发者可以利用SCSS的嵌套、变量、混合等功能，更灵活地编写和组织样式代码，提高样式的可维护性和复用性，方便对网站的外观进行定制。

支持WebAssembly

• 拓展功能边界：允许在Hugo中使用WebAssembly，这意味着可以将用其他语言（如Rust、C++等）编写的高性能代码集成到Hugo项目中，为网站添加更多复杂的功能，如高性能的图像处理、数据加密等。
• 提升用户体验：通过WebAssembly，可以在客户端执行更高效的代码，减少服务器负载，提高网站的响应速度和交互性，为用户带来更好的浏览体验。

支持更多的图像操作

• 丰富的图像处理能力：能够对图像进行多种操作，如调整大小、裁剪、添加滤镜等。可以根据不同的设备和屏幕尺寸，生成适配的图像，提高网站的性能和用户体验。
• 优化网站性能：通过在构建过程中对图像进行优化，如压缩图像文件大小，减少图像的加载时间，使网站加载速度更快，有助于提高网站的搜索引擎排名和用户满意度。

支持国际化（i18n）增强

• 多语言支持更便捷：提供了更强大的国际化支持，方便创建多语言网站。可以轻松地管理不同语言的内容、翻译和语言切换，为全球用户提供更好的服务。
• 灵活的语言配置：支持多种语言配置方式，开发者可以根据项目需求选择合适的语言策略，如按语言子目录组织内容、使用语言代码作为参数等，使多语言网站的开发和维护更加高效。

支持JavaScript模块导入

• 增强脚本功能：允许在Hugo模板中导入JavaScript模块，这使得开发者可以更方便地使用现代JavaScript的模块系统，将复杂的JavaScript代码拆分成多个模块，提高代码的可维护性和复用性。
• 更好的前端集成：能够与各种前端框架和库更好地集成，为网站添加更多交互性和动态功能，满足现代网站对前端功能的需求。

使用 hugo 创建新的博客站点

本地笔记本安装完 hugo 客户端后，就可以使用 hugo 在本地创建博客站点了：hugo new site local_blogs。

此时在 local_blog 目录下可以看到生成了文件，其中包括 hugo.toml 或者 hugo.yaml 文件：

hugo 的支持toml、yaml、json三种配置文件，具体的配置说明可以参考：Configure Hugo

配置 Hugo 站点的主题

Hugo 有很多主题可以选择，可以在这里查看 Hugo 主题的封面效果。

本站点使用的是下载量比较高的 PaperMod 主题。

下载 PaperMod 主题的方式为：

• 命令行进入 local_blog 目录：cd local_blog
• 使用 git 将 PaperMod 主题克隆或以子模块的方式添加到本地的 themes 目录下：
  • git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
  • git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

更多的安装配置可以参考：PaperMod 的安装指引。

配置 Hugo 站点页面样式

主体样式

baseURL: "https://bowenerchen.com/"
title: BowenerChen的博客站
pagination:
  pagerSize: 10
theme: PaperMod
languageCode: zh
defaultContentLanguage: zh
enableEmoji: true
enableGitInfo: true

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

minify:
  disableXML: true
  minifyOutput: true

permalinks:
  posts: "/posts/:slug/"

# 添加菜单
menu:
    main:
        - name: 所有文章
          url: archives/
          weight: 10
        - name: 搜索
          url: search/
          weight: 20
        - name: 系列
          url: series/
          weight: 30
        - name: 标签
          url: tags/
          weight: 40
        - name: 类别
          url: categories/
          weight: 50


outputs:
  home:
    - HTML
    - RSS
    - JSON # 添加此项以启用搜索

# 设置文章分类 https://gohugo.io/content-management/taxonomies
taxonomies:
    tag: tags
    series: series
    category: categories

params:
    ShowReadingTime: true
    showtoc: true
    tocopen: true
    enableInlineShortcodes: true
    ShowBreadCrumbs: true
    ShowPostNavLinks: true
    ShowCodeCopyButtons: true
    author: 'bowenerchen'
    title: '梵高先生'
    description: ''
    hidemeta: false
    hideSummary: false
    # 添加搜索参数，参考 https://fusejs.io/api/options.html
    fuseOpts:
        isCaseSensitive: false
        includeMatches: true
        shouldSort: true
        location: 0
        distance: 1000
        threshold: 0.4
        minMatchCharLength: 0
        keys: ["title", "permalink", "summary", "content"]
    profileMode:
        enabled: true
        title: "做一天和尚撞一天钟" # optional default will be site title
        subtitle: " 其实我不太懂编码，但也不是完全不懂，我稍微懂一点点。"
        imageUrl: "imgs/vango.jpeg" # optional
        imageTitle: "梵高先生" # optional
        imageWidth: 120 # custom size
        imageHeight: 120 # custom size
        buttons:
          - name: "xxxx"
            url: "xxxx"

    socialIcons:
        - name: xxx
          url: "xxxxx" # 个人Github地址

配置菜单

菜单配置中有几个功能需要特殊配置：

• 添加搜索功能，参考：为 Hugo 添加搜索能力
• 添加归档功能，参考：为 Hugo 添加归档能力
• 菜单栏汉化，参考：将 Hugo 菜单栏汉化

配置 profileMode

• 参数设置
  • 必填参数：enabled参数是必填的，用于开启或关闭profileMode，必须设置为布尔值true或false。
  • 还需设置title、subtitle、imageurl等参数，确保信息准确。
  • 图片尺寸参数：imagewidth和imageheight参数用于设置头像图片的宽度和高度，单位为像素。要根据实际需求和页面布局设置合适的尺寸，避免图片变形或显示不完整。
  • 社交图标参数：配置socialicons参数时，每个社交平台的name、title和url都要准确填写。name通常是社交平台的名称，title是鼠标悬停时显示的提示文本，url是社交账号的链接。
• 图片设置
  • 图片路径：imageurl参数指定的头像图片路径要准确。如果图片放在项目的static目录下，路径应相对于static目录。
  • 图片格式与优化：支持常见的图片格式，如 PNG、JPEG 等。为了提高网站加载速度，要对头像图片进行优化，减小文件大小。

创建文章

文章直接放在 content/posts 目录下

操作命令为：hugo new content/posts/my_article.md

文章直接存放在posts目录下，所有文章处于同一层级，便于对文章进行统一管理和批量操作，如批量修改文章的某些属性、进行全站搜索等。

但随着文章数量增多，可能会导致目录结构较为混乱，不便于按类别或主题对文章进行区分和查找。

每篇文章在 content/posts 下有单独的目录

操作命令为：hugo new content/posts/xxxx/index.md

直接在 index.md 中写文章内容，index.md中需要插入的图片等，直接使用相对路径的形式，放在 xxx 目录下。

比如写本篇博客时，目录结构为：

使用相对路径在文章目录下存放和链接图片：

渲染静态文件

Markdown 文件的 FrontMatter 设置

Hugo的Front Matter是位于文章顶部的一段元数据，用于定义文章的各种属性和配置。

它以特定的分隔符开始和结束，常见的格式有YAML、TOML和JSON，且必须放在文章的开头部分，以便Hugo能够正确解析。

以下是一些常见的Front Matter字段：

基本信息类

• title：文章的标题，是文章的重要标识，在网站的页面展示、标题栏等位置通常会显示该标题。
• date：文章的发布日期，格式通常为YYYY-MM-DD，可以精确到时分秒，如YYYY-MM-DDTHH:MM:SS±HH:MM。Hugo会根据这个日期对文章进行排序等操作，常用于文章列表按时间顺序展示。
• lastmod：文章的最后修改日期，格式与date类似。可以让读者了解文章的最新更新情况，对于一些时效性较强或需要经常更新的内容很重要。
• description：文章的简短描述，通常用于搜索引擎结果页面、文章摘要等地方，能帮助用户快速了解文章的主要内容，对SEO也有一定作用。
• keywords：文章的关键词，用于搜索引擎优化和文章分类等。多个关键词之间可以用逗号或空格分隔，方便搜索引擎根据这些关键词对文章进行索引和分类。

内容展示类

• draft：表示文章是否为草稿状态。值为true时，文章在正常生成静态文件时不会被包含在内，只有使用hugo -D命令时才会生成。
• hidden：如果设置为true，文章可能不会在正常的文章列表等位置显示，但可以通过直接访问URL等方式查看，常用于一些不希望公开展示但又需要保留的文章。
• toc：是否生成文章的目录。设置为true时，Hugo会根据文章的标题层级自动生成目录，方便读者快速浏览文章结构。
• images：用于指定文章的特色图片或相关图片列表，这些图片可能会在文章列表、文章详情页的特定位置展示，提升文章的视觉效果。

分类与标签类

• categories：文章所属的类别，用于对文章进行分类组织。可以是单个类别，也可以是多个类别组成的列表，方便用户按类别浏览文章，也有助于网站的内容管理和SEO。
• tags：文章的标签，与关键词类似，但更侧重于对文章内容的细化描述和分类。用户可以通过点击标签查看相关主题的文章集合，增加文章的关联性和可发现性。

其他类

• weight：用于指定文章的权重，在一些排序或展示规则中，权重较高的文章可能会优先展示或排在更靠前的位置，可用于调整文章在列表中的顺序等。
• series：表示文章所属的系列，用于将多篇相关的文章归为一个系列，方便读者按系列阅读相关文章，增强文章之间的关联性和系统性。
• aliases：文章的别名，可用于设置多个URL指向同一篇文章，常用于网站改版、URL调整等情况，避免旧的链接失效，同时也可以方便用户通过不同的URL访问文章。

执行 hugo 命令进行渲染

在项目根目录下执行 hugo 命令，Hugo 会读取文章内容和配置信息，将其转换为静态文件，并输出到public目录中。

根目录下会生成 public 目录，里面会存放渲染好的静态文件：

如果是要发布到生产环境的文章，在渲染前需要将这篇文章的 FrontMatter 中的 draft 字段设置为 false。

将静态文件发布到服务器上

将Hugo渲染后的静态文件发布到服务器上，有多种方式可供选择，以下是几种常见的方法：

FTP/SFTP上传

• 适用场景：适用于各种类型的服务器，尤其是对服务器操作权限有限，只提供FTP或SFTP访问的情况。
• 操作步骤：使用FileZilla等FTP或SFTP客户端软件，配置服务器的FTP或SFTP连接信息，包括服务器地址、端口、用户名、密码等。连接成功后，将本地Hugo生成的public目录下的所有静态文件上传到服务器指定的网站根目录或相应的发布目录中。

Rsync同步

• 适用场景：常用于Linux服务器之间的文件同步，需要在本地和服务器端都有相应的权限来执行Rsync命令。
• 操作步骤：在本地安装Rsync工具，通过Rsync命令将本地public目录下的文件同步到服务器上的指定目录。如rsync -avz --delete public/ user@server:/var/www/html，其中-avz表示以归档模式、详细输出、压缩传输，--delete表示删除目标目录中不存在于源目录的文件。

使用CI/CI工具自动部署

• 适用场景：适合追求高效、自动化部署流程，且有一定技术能力来配置和管理CI/CD管道的团队或个人项目。
• 操作步骤：以使用Travis CI为例，在项目根目录下创建.travis.yml文件，配置Hugo的安装、构建和部署脚本。当代码有更新推送到代码仓库时，Travis CI会自动触发构建流程，生成静态文件，并通过配置好的部署脚本将文件上传到服务器。

云存储服务与CDN

• 适用场景：对于需要高可用性、全球快速访问的网站，且对云服务有一定预算和技术能力的用户。
• 操作步骤：以AWS为例，将Hugo生成的静态文件上传到Amazon S3存储桶，配置S3存储桶为静态网站托管。然后可以结合Amazon CloudFront等CDN服务，将静态文件分发到全球多个节点，加速用户访问速度。

SSH直接传输与部署

• 适用场景：适用于对服务器有SSH访问权限，且熟悉服务器操作的用户。
• 操作步骤：通过SSH连接到服务器，在本地使用scp命令将public目录下的文件传输到服务器上的指定目录，如scp -r public/ user@server:/var/www/html。传输完成后，在服务器上根据需要进行一些文件权限设置等操作，确保网站能够正常访问。

文章效果展示

文章列表效果：

文章内容展示效果：