[Go] Hugo静态博客免费部署到Vercel保姆级教程

准备工作

在开始使用 Hugo 构建和部署博客之前，你需要准备以下几样工具：

• Git：这是实现版本控制和后续部署的核心工具。如果你还没有安装，请前往 Git 官网 下载并安装。
• GitHub 账户：我们将使用 GitHub 来托管你的博客源代码。
• Vercel 账户：我们将使用 Vercel 进行免费的博客部署。你可以直接使用 GitHub 账户快捷登录。

第一步：安装 Hugo

Hugo 提供了多种安装方式，你可以根据自己的操作系统选择最方便的一种。

macOS (使用 Homebrew):

brew install hugo

安装完成后，可以通过 hugo version 命令来验证是否安装成功。

Windows (使用 Chocolatey):

choco install hugo-extended

同样，使用 hugo version 来验证。

Linux (使用 Snap):

sudo snap install hugo

第二步：创建你的 Hugo 博客

1. 打开终端，切换到你希望存放博客项目的目录。
2. 执行以下命令来创建一个名为 myblog 的新站点：

   hugo new site myblog

   这会在当前目录下生成一个名为 myblog 的文件夹，里面包含了 Hugo 站点的基本结构。

3. 进入该目录：

   cd myblog

第三步：为博客安装主题

一个美观的主题是博客的门面。Hugo 拥有一个丰富的主题库。这里我们以经典的 Stack 主题为例。

1. 初始化 Git 仓库（主题通常作为 Git 子模块管理）：

   git init

2. 将 Stack 主题添加为子模块：

   git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/stack

3. 编辑博客根目录下的 hugo.toml（或 hugo.yaml / hugo.json）配置文件，指定使用的主题：

   baseURL = 'https://your-domain.vercel.app/'
   languageCode = 'en-us'
   title = '我的 Hugo 博客'
   theme = 'stack'

第四步：配置站点信息

大部分主题都有自己的配置方式。对于 Stack 主题，你需要在 config 文件夹下创建 _default 文件夹和配置文件。

1. 创建配置目录和文件：

   mkdir -p config/_default

2. 创建主配置文件 hugo.toml（位于 config/_default/ 目录下）：

   [author]
     name = "你的名字"
     image = "avatar.jpg"
     bio = "你的个人简介"
   
   [menu]
     [[menu.main]]
       identifier = "posts"
       name = "文章"
       url = "/posts/"
       weight = 1
     [[menu.main]]
       identifier = "tags"
       name = "标签"
       url = "/tags/"
       weight = 2
   
   [params]
     defaultTheme = "auto"
     subtitle = "这是一个副标题"

   请根据主题文档调整配置项，例如 Stack 主题有更详细的 params.toml 和 menu.toml 配置。

第五步：创建你的第一篇文章

使用 Hugo 命令可以快速创建一篇符合前端元数据格式的文章。

hugo new posts/my-first-post.md

这条命令会在 content/posts/ 目录下生成一个 Markdown 文件。用你喜欢的编辑器打开它，你会看到类似这样的前置元数据：

---
title: "My First Post"
date: 2023-10-27T15:20:00+08:00
draft: true
---

将 draft: true 改为 draft: false，然后在 --- 下方开始撰写你的博客正文。

第六步：本地预览博客

在部署之前，先在本地预览是个好习惯。在博客项目根目录下运行：

hugo server -D

-D 参数意味着同时渲染草稿（draft: true）文章。命令执行后，打开浏览器访问 http://localhost:1313，你就可以看到博客的实时预览效果了。修改任何内容，页面都会自动刷新。

第七步：部署到 Vercel

当你的博客在本地运行良好后，就可以将其部署到线上了。

1. 推送代码到 GitHub：

   • 在 GitHub 上创建一个新的仓库（例如命名为 myblog）。
   • 将你的本地代码推送到这个仓库。

     git add .
     git commit -m "Initial commit"
     git branch -M main
     git remote add origin https://github.com/你的用户名/myblog.git
     git push -u origin main

2. 在 Vercel 上导入项目：

   • 登录 Vercel。
   • 点击 “Add New…” -> “Project”。
   • 从你的 GitHub 账户中导入刚刚创建的 myblog 仓库。
   • Vercel 会自动检测到这是一个 Hugo 项目。通常你不需要修改任何构建设置，直接点击 “Deploy” 即可。

3. 等待部署完成：

   • 部署过程通常只需要一两分钟。完成后，Vercel 会为你分配一个 *.vercel.app 的免费域名。
   • 点击 “Visit” 即可查看你在线上的博客。

至此，你就拥有了一个完全免费、快速、由 Vercel 全球 CDN 加速的个人静态博客。后续你只需要在本地写好文章，推送到 GitHub，Vercel 就会自动触发重新构建和部署，实现持续集成和交付（CI/CD），这是现代高效 DevOps 工作流的一部分。别忘了，作为一款流行的静态网站生成器（SSG），Hugo 是当今 前端工程化 与高性能网站架构中的重要工具之一。