在去年的某个时候,我将博客迁移到了 Hexo。当时第一次接触 Hexo,完全是被洪哥的 Heo 主题所吸引。之后我开始深入折腾:更换了不少主题、安装了各种插件,甚至配置了 Acticon 实现自动化部署。

那段时间的确很充实,每一次配置成功都像是在“点亮技能树”。但随着时间推移,我渐渐发现:最初的折腾乐趣,似乎在悄悄消失。

这次决定更换,是因为 Node 环境被我“手动折腾崩了”。面对Node一堆依赖、冲突和莫名其妙的错误,我忽然觉得:也许我只是想写点东西,而不是每次写作前还要 debug 半小时的构建工具。

于是,我转向了 Hugo试试。我也想不起来几次推倒重来,记不清楚了。

快速开始

安装Hugo

Hugo 官方官网

PLAINTEXT
https://gohugo.io/
点击展开查看更多

Hugo 下载地址

PLAINTEXT
https://github.com/gohugoio/hugo/releases
点击展开查看更多

Hugo Releases 页面当中下载相应的可执行文件,hugo_extended 的版本是hugo的可拓展版本,一般我们建议选这个。

Windows 安装和配置

下载好文件后,把hugo.exe 存放到你的文件目录中,例如 D:\Hugo\bin 最后需要配置环境变量,来全局调用 Hugo.exe

此电脑 – 属性 – 高级系统设置 – 高级 – 环境变量 – Path

Hugo Windows配置

验证安装

使用 CMD/Shell 或者 GIt Bash 执行

PLAINTEXT
$ hugo version

hugo v0.147.8-10da2bd765d227761641f94d713d094e88b920ae+extended windows/amd64 BuildDate=2025-06-07T12:59:52Z VendorInfo=gohugoio
点击展开查看更多

这里输出 hugo v0.147.8 前期的准备就弄好了,让我们愉快的开坑吧!!!

创建 Hugo 站点

在你想新创建Blog目录下,打开终端执行命令

PLAINTEXT
$ hugo new site Hugo-blog
点击展开查看更多

这样就会新创建一个 hugo-blog 的目录,当然你也可以自定义名称,生成包含了以下目录

BASH
├── archetypes       # 内容模板
├── hugo.toml        # 配置文件
├── content          # 文章页面
├── data             # 数据模板
├── layouts          # 页面布局
├── static           # 公共目录
└── themes           # 主题文件
点击展开查看更多

添加主题

添加主题的方法两种,使用Git子模块进行管理和直接下载 然后解压到 themes 目录,个人推荐子模块进行管理主题。

以我正在使用的主题为例子

BASH
$ cd Hugo-blog
$ git init
$ git submodule add https://github.com/tom2almighty/hugo-narrow.git themes/hugo-narrow
$ cp -r themes/hugo-narrow/exampleSite/hugo.yaml .
点击展开查看更多

然后打开 hugo.yaml 进行站点配置

YAML
theme: hugo-narrow
baseURL: 'https://example.com'  # 改为网站 URL
title: 'My Blog'  # 改为网站标题
.....更多.....
点击展开查看更多

写博文和页面

文章:

BASH
$ hugo new posts/name.md
点击展开查看更多

页面:

BASH
$ hugo new page.md
点击展开查看更多

文章 Front Matter

使用 markdown 语法进行编写文章,这里有两种格式 tomlyaml 个人推荐使用yaml语法,比较容易看得懂。

写博文我一般就两款软件 QexoVS Code ,前者支持在线管理。

YAML
---
title: hello Hugo
date: 2025-07-02
draft: false
categories: ["分类1", "分类2"]
tags: ["标签1", "标签2"]
slug: "post-url"  # 唯一URL
---


--- 这里写内容 ---
点击展开查看更多

预览和调试、生成、部署

YAML
$ hugo server
$ hugo server -D   #连带草稿也生成预览 
点击展开查看更多

浏览器打开 http://localhost:1313 就可以预览,也可以使用 VS code 一边编辑一边调试,实时生成预览。

生成页面

有两种生成模式,普通生成和压缩生成。压缩生成是 Hugo 对 CSS、JS、JSON、HTML、SVG或XML资源进行压缩,体积会小有点。

不带压缩生成:

YAML
hugo
点击展开查看更多

带资源压缩生成:

YAML
# 首先在 hugo.yaml 添加变量
minify:
  disableHTML: false
  disableCSS: false
  disableJS: false

# 输出
$ hugo --minify
点击展开查看更多

部署

在调试到一个满意的版本,想要发布了,怎么办?执行 hugo 命令后,在主目录下会生成 public 目录,该目录下包含站点的静态文件,包括 Html、Js、Img等等这些文件。这个时候就可以打包上传到自己的服务器或者Vercel、Github page这些在线托管平台。

总结

Hugo 的极致轻量与构建速度,让我重新找回了“写博客本身”的初心。没有了 Node 的依赖地狱,我反而更愿意动手更新内容。

有些时候,我们以为自己喜欢折腾,其实只是在寻找一种掌控感。而当系统真的稳定顺畅,我们会发现:写出有价值的内容、整理思绪、表达想法——这才是博客真正的意义所在。

版权声明

作者: JunYan`Blog

链接: https://www.jinjun.top/posts/hello-hugo/

许可证: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

评论

开始搜索

输入关键词搜索文章内容

↑↓
ESC
⌘K 快捷键