用 Hugo + Hextra 搭建个人博客

之前一直想找一个简单省心的博客方案：打开就能写 Markdown，生成速度快，部署成本几乎为零。最后选了 Hugo + Hextra 这套组合，本站就是用它搭起来的，把过程记录下来。

为什么选 Hugo + Hextra

• 快：Hugo 是纯二进制程序，几百篇文章全站构建只要几百毫秒
• 省：纯静态站点，2 核 2G 的服务器毫无压力，甚至可以白嫖静态托管
• 好看：Hextra 是现代设计的文档/博客主题，深色模式、代码高亮、搜索都内置

安装 Hugo

macOS 直接用 Homebrew：

brew install hugo

注意要装 extended 版本（brew 默认就是），Hextra 的样式处理依赖它。

创建站点并添加主题：

hugo new site my-blog
cd my-blog
git init
git clone --depth 1 https://github.com/imfing/hextra.git themes/hextra

基础配置

编辑 hugo.yaml，核心配置如下：

baseURL: https://yourdomain.com/
title: 你的站名
theme: hextra
languageCode: zh-cn

markup:
  goldmark:
    renderer:
      unsafe: true   # 允许文章中的原生 HTML

写第一篇文章

文章就是 Markdown 文件：

hugo new content tech/my-first-post.md

front matter 里写好标题、日期和描述，正文用 Markdown 写，保存即生效。

本地预览与构建

hugo server -D    # 本地预览，-D 包含草稿
hugo              # 构建静态文件到 public/

构建产物是一堆 HTML，扔到 nginx 或者任何静态托管上就能跑。

部署到自己的服务器

我部署在阿里云 ECS 上，nginx 配置非常简单：

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    root /var/www/blog;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

再把 hugo 构建出的 public/ 内容同步到 /var/www/blog，配上 HTTPS 证书就完成了。

一些踩坑记录

1. 中文文件名：文章文件名建议用英文或拼音，部分服务器配置下中文 URL 需要额外处理
2. 图片路径：放 static/ 目录下的图片，用 /图片路径 引用；放文章目录里则用相对路径
3. front matter 的 type 字段：Hextra 里普通文章设 type: blog 可以启用文章布局（日期、翻页）

总结

整套搭建下来不到半天，之后的日常就是纯写作：建一个 .md 文件，写完 hugo 一敲，同步上服务器。想要更省事的还可以配 GitHub Actions 自动构建部署，推个 commit 就自动发布。

有计划搭博客的朋友可以试试这套组合，遇到问题欢迎交流。