探索Hugo：从Hexo痛点出发，我如何找到理想的博客发布工具

LogicAi
455 阅读6分钟

公司同事用过hexo来搭博客， 我没找到我想要的主题。作为一个后端出身的程序员，hexo这种前端驱动的不太习惯。于是问下ChatGPT。

有哪些好用博客发布工具， 类似hexo这种的。

除了 Hexo，还有很多其他的静态博客生成器，以下是其中的一部分：

1.  Jekyll：是最早的静态博客生成器，由 Github 的创始人之一开发，被广泛应用在 Github Pages 上。
2.  Hugo：使用 Go 语言编写，编译速度非常快，适合需要管理大量文章的博客。
3.  Pelican：使用 Python 编写，支持 reStructuredText 和 Markdown 编写文章。
4.  Gatsby：使用 React.js 编写，可以生成高性能的静态网站，适合需要定制化开发的博客。
5.  Next.js：一款轻量级的框架，用于静态和服务器渲染的React.js应用。
6.  VuePress：由 Vue.js 团队开发，适合写文档和技术博客。
7.  Gridsome：这是 Vue.js 的一个静态网站生成器，灵感来自于 Gatsby。
8.  Eleventy：一个简单的静态网站生成器，用JavaScript编写，处理各种模板语言。
9.  Nuxt.js：一个基于 Vue.js 的通用应用框架，可以用来生成静态博客。

这些工具各有优缺点，你可以根据自己的需求和技术栈来选择。

果然ChatGPT见多识广，给出了一揽子解决方案。 钟意Go的我一眼看到第二个——Hugo， 我像看下Hugo生成的网站是什么样子。 再问ChatGPT

有哪些网站是用hugo写的

Hugo 是一个使用 Go 语言编写的静态网站生成器，被广泛用于博客、文档、个人网站等的构建。下面列出了一些使用 Hugo 构建的网站：

Let's Encrypt （letsencrypt.org）：一个公益性质的免费 SSL 证书发放机构，其官网就是使用 Hugo 构建的。

1Password Events （events.1password.com）：这是密码管理软件 1Password 的活动页，使用 Hugo 构建。

Kubernetes SIGs（kubernetes-sigs.github.io/）：这是 Kubernetes 特别兴趣小组（SIGs）的官方页面，使用 Hugo 构建。

Smashing Magazine （www.smashingmagazine.com）：知名的前端和设计相关的在线杂志，部分页面使用 Hugo 构建。

Azure Tips and Tricks（microsoft.github.io/AzureTipsAndTricks/）：这是微软 Azure 的官方教程网站，使用 Hugo 构建。

如果你想找更多的例子，可以访问 Hugo 官方网站 的展示页面，那里列出了很多使用 Hugo 构建的网站。

好家伙Let's Encrypt竟然是用Hugo生成的，厉害了。不过看了一下列出的网站，样式和内容组织方式不太符合我的要求。

怎么找到一个符合专栏内容的Hugo主题呢， 再问ChatGPT大哥

哪里找到hugo的主题，最好主题可以像专栏一样的形式的

Hugo的官方网站提供了一个专门的主题库，你可以在那里找到各种各样的Hugo主题。以下是链接：

[Hugo Themes](https://themes.gohugo.io/)

在这个页面，你可以根据主题的不同特性（比如布局、颜色方案、响应式设计等）进行筛选，找到符合你需求的主题。

如果你希望找到像专栏一样的主题，可能需要寻找那些针对长篇文章、教程或者教育内容优化的主题。例如，"Learn" 和 "Docsy" 这两个主题都是专为文档或教程内容设计的，可能会符合你的需求。

建议你浏览一下Hugo的主题库，看看哪些主题最符合你的需求，然后你可以下载并在你的Hugo网站上使用它们。

于是根据给出的链接去搜索官网的主题库，不错，挺全面的。挑中了一个Book主题， 就这个了。

安装Hugo

去到Hugo官网， 查看文档 gohugo.io/installatio… mac下安装非常简单

brew install hugo

1分钟就安装好了

(base) MacBook-Pro-6:code hugoversionhugov0.111.3+extendeddarwin/amd64BuildDate=unknown(base)MacBook−Pro−6:codehugo version hugo v0.111.3+extended darwin/amd64 BuildDate=unknown (base) MacBook-Pro-6:code

看了一下版本 v0.111.3 ，是2023年6月以前的版本。

image.png Hugo的更新还挺频繁的。6月到11月更新了20多个版本。 image.png

注：上面是阿里源，所以是相对旧的版本。

(base) MacBook-Pro-6:book1 $brew config HOMEBREW_VERSION: 4.0.15 ORIGIN: mirrors.aliyun.com/homebrew/br… HEAD: 763c41f006ab9b44261e313b0aaa24a047431b06

换官方源试试

(base) MacBook-Pro-6:Homebrew $git remote set-url origin https://github.com/Homebrew/brew.git
(base) MacBook-Pro-6:Homebrew $
(base) MacBook-Pro-6:Homebrew $
(base) MacBook-Pro-6:Homebrew $cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
(base) MacBook-Pro-6:homebrew-core $git remote set-url origin https://github.com/Homebrew/homebrew-core.git
(base) MacBook-Pro-6:homebrew-core $brew update

这下更新为v0.120.3最版本了，2023年11月1日的版本。真香

(base) MacBook-Pro-6:homebrew-core $brew install hugo
==> Downloading https://formulae.brew.sh/api/formula.jws.json
######################################################################################################################################################### 100.0%
==> Downloading https://formulae.brew.sh/api/cask.jws.json
######################################################################################################################################################### 100.0%
hugo 0.111.3 is already installed but outdated (so it will be upgraded).
==> Fetching hugo
==> Downloading https://mirrors.aliyun.com/homebrew/homebrew-bottles/hugo-0.120.3.ventura.bottle.tar.gz
######################################################################################################################################################### 100.0%
==> Upgrading hugo
  0.111.3 -> 0.120.3

创建博客

创建博客项目命令

hugo new site 博客项目名

(base) MacBook-Pro-6:code $hugo new site learnworld
Congratulations! Your new Hugo site is created in /Users/code/learnworld.
Just a few more steps and you're ready to go:
  
1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.

创建好的目录

(base) MacBook-Pro-6:learnworld $tree
.
|____archetypes
| |____default.md
|____content
|____public
|____layouts
|____static
|____config.toml
|____data
|____assets
|____themes

themes.gohugo.io/themes/hugo…

hugo-book的主题基本布局

我们可以看到，这个主题分了左侧菜单栏，右侧内容， 再右侧有Toc（即内容目录），它其实是由hugo的布局模板layout/_default/baseof.html定义，这个baseof.html可以自己组织，hugo-book就组织成了下面这个样子，可以看到跟页面的布局是一一对应的。

<!DOCTYPE html>
<html lang="{{ default .Site.Language.Lang .Site.LanguageCode  }}" dir="{{ default "ltr" .Site.Language.LanguageDirection }}">
<head>
  {{ partial "docs/html-head" . }}
  {{ partial "docs/inject/head" . }}
</head>
<body dir="{{ default "ltr" .Site.Language.LanguageDirection }}">
  <input type="checkbox" class="hidden toggle" id="menu-control" />
  <input type="checkbox" class="hidden toggle" id="toc-control" />
  <main class="container flex">
    <aside class="book-menu">
      <div class="book-menu-content">
        {{ template "menu" . }} <!-- Left menu Content -->
      </div>
    </aside>

    <div class="book-page">
      <header class="book-header">
        {{ template "header" . }} <!-- Mobile layout header -->
      </header>

      {{ partial "docs/inject/content-before" . }}
      {{ template "main" . }} <!-- Page Content -->
      {{ partial "docs/inject/content-after" . }}

      <footer class="book-footer">
        {{ template "footer" . }} <!-- Footer under page content -->
        {{ partial "docs/inject/footer" . }}
      </footer>

      {{ template "comments" . }} <!-- Comments block -->

      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
    <aside class="book-toc">
      <div class="book-toc-content">
        {{ template "toc" . }} <!-- Table of Contents -->
      </div>
    </aside>
    {{ end }}
  </main>

  {{ partial "docs/inject/body" . }}
</body>
</html>

{{ define "menu" }}
  {{ partial "docs/menu" . }}
{{ end }}

{{ define "header" }}
  {{ partial "docs/header" . }}

  {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
  <aside class="hidden clearfix">
    {{ template "toc" . }}
  </aside>
  {{ end }}
{{ end }}

{{ define "footer" }}
  {{ partial "docs/footer" . }}
{{ end }}

{{ define "comments" }}
  {{ if and .Content (default true (default .Site.Params.BookComments .Params.BookComments)) }}
  <div class="book-comments">
    {{- partial "docs/comments" . -}}
  </div>
  {{ end }}
{{ end }}

{{ define "main" }}
  <article class="markdown">
    {{- .Content -}}
  </article>
{{ end }}

{{ define "toc" }}
  {{ partial "docs/toc" . }}
{{ end }}

然后上面提到的左侧菜单栏，用define "menu"定义了一个模板

{{ define "menu" }}
  {{ partial "docs/menu" . }}
{{ end }}

这个模板的内容通过partial在layouts/partial/docs/menu.html里引用进来，partial就是引用一个片段进来的意思。 定义的模板在baseof.html里用{{template "menu"}}来引用。（看了下hugo的文档，应该不用这么麻烦，可以直接用partial的，见gohugo.io/templates/i… 和 gohugo.io/templates/i… 的描述，template是老的引用方式） image.png

发布

hugo --minify --theme hugo-book

注意点

1.生成静态网站文件后目录变深

这个会导致的问题是，md文件里引用当前md同目录下的图片， 例如[图片名](./11.png)路径发生改变。要改成引用上一层的路径[图片名](../11.png)

例如原始的目录层级 image.png

生成的静态网站，md文件被拆成两层：

image.png

2.Book主题的通过文件配置菜单已经被弃用

在看网站左侧菜单栏的逻辑时，发现无论怎么配置content/menu/index.md这个文件都不起作用， 原来是弃用了。 image.png 目录树的菜单显示，在对应目录的_index.md里通过修改front matter的方式修改菜单名、是否折叠等。例如下面的这个

image.png

avatar
文章
阅读
粉丝