使用 Hugo 重写我的个人网站

几个月前，我创建了自己的个人网站andrewdavis.me。我用 Go 语言编写了一个自定义的服务器端应用程序，内容存储在 MySQL 数据库中。我写了一篇文章《使用 Go 和 TailwindCSS 构建我的个人网站》来分享这段经历。我很喜欢这个项目，但是最近我想做一些 SEO 优化，却发现维护一个自定义应用程序的工作量太大了。于是我开始寻找不同的静态网站生成器，并发现了Hugo。Hugo是一款速度非常快的网站生成器，它使用 Go 模板生成 HTML，使用 Markdown 生成内容。Hugo 非常灵活，而且易于使用，所以我只用了一天就把网站迁移到了 Hugo 上！事实上，我已经开源了代码，你可以在 GitHub 上查看所有内容。现在，我的网站通过 GitHub Pages 上的 HTML 文件提供服务，渲染速度大大提升。以下是我如此喜欢 Hugo 的几个原因，以及为什么你可能也会喜欢在下一个项目中使用它。

易于安装和启动项目

Hugo 是一个简单的二进制文件，可以安装在任何操作系统上（我在 macOS 上使用 Homebrew 安装brew install hugo）。要创建一个新项目，请打开终端并运行 ` hugo build`。Hugohugo new site blog会创建一个名为 `<project_name>` 的文件夹blog，并生成一个项目框架，以便您可以开始添加内容。要开始构建模板，请_default在 ` layouts<project_name>` 目录中添加一个 `<template>` 文件夹。在该文件夹中，您可以创建一个名为 `<template>` 的新文件baseof.html，它将成为所有页面的基础模板。之后，您可以创建 `<index>` index.html、` <list> list.html` 和single.html`<content>` 模板。`<index>` 模板将用于首页，`<list>` 模板将用于所有列表页面，而 `<content>` 模板将用于内容页面。

接下来，你可以在内容文件夹中开始添加 Markdown 文件。你可以创建类似 `.markdown.js`post.md或 `.markdown.js` 这样post/index.md的 Markdown 文件，它们会分别创建不同的路径： `.markdown.js`/post.html和/post/`.markdown.js`。每个 Markdown 文件都必须包含 frontmatter，但 frontmatter 可以使用 YAML、TOML 或 JSON 编写。我使用 TOML 编写了我的文件，页面看起来像这样：

+++
title = "My Blog Post"
date = "2019-03-01"
+++
The content of my blog post goes here.

要构建页面，您可以hugo server在终端运行命令，它会启动一个服务器，供您访问网站localhost:1313。服务器也会在您更改内容时自动重新加载。Hugo 会获取 Markdown 页面的内容，并使用 Go 模板将其构建成独立的 HTML 页面。在模板中，Markdown 文件会通过预定义的变量注入，因此您可以使用 `<markdown>` 和 `<markdown>`{{ .Title}}来{{ .Content }}指定 Markdown 数据在模板中的显示位置。

当然，模板和内容方面还有很多内容，您可以在文档中找到。Hugo 的可配置性很强，可以根据您的需要进行各种程度的配置。

自动代码高亮显示

在我网站的前一个版本中，我使用了Prism.js JavaScript 库来实现代码高亮。它的效果不错，但所有样式都是在客户端添加的，这对浏览器来说是不必要的。Hugo 使用的是名为Chroma的 Go 语法高亮器，它会在构建过程中将 CSS 添加到 HTML 中。要让它在 Markdown 代码块中运行，只需在项目根目录下添加 `<filename>` 文件即可。该pygmentsCodefences = true文件是 Hugo 构建网站时使用的主要配置文件。config.tomlconfig.toml

集成 CSS 处理

我喜欢用 PostCSS 来编写样式表，Hugo 也很容易兼容它。我创建了一个已package.json安装postcss-cliPostCSS 插件的模板。然后，我创建了一个postcss.config.js文件（Hugo 不需要，只是 PostCSS 需要的）。之后，我在 assets 文件夹中创建了一个 CSS 文件，然后baseof.html使用以下命令将其导入到我的模板中：

{{ $css := resources.Get "site.v01.css" }}
{{ $style := $css | resources.PostCSS }}

<link rel="stylesheet" type="text/css" href="{{ $style.Permalink }}">

现在，当我使用 Hugo 构建时，它会自动编译我的样式表并在我的基础模板中链接到它。

易于部署

Hugo 提供了多种不同的网站部署方式。在hugo项目根目录下运行命令，它会构建一个public文件夹中的文件。我按照他们的指南部署到 GitHub，并创建了一个publish.sh脚本，该脚本会获取 public 文件夹的内容并将其提交到一个单独的 Git 分支。然后，GitHub Pages 会使用这个部署分支来提供这些文件。

结论

我非常喜欢 Hugo 的简洁易用，它不像其他许多网站生成器那样需要编写 JavaScript 代码来构建静态网站。此外，我现在可以轻松地使用 frontmatter 变量更新模板并添加更多功能，而无需编写大量代码。生成的 HTML 文件使我无需维护服务器，从而减少了网站维护所需的时间。总而言之，我认为这是一个成功的选择，并计划在未来继续使用Hugo ！