本文根据 vesperloop.com 建立过程记录。这是一份剥离了所有复杂 CSS、完全零代码基础、专注于“跑通主干链路”的纯净版建站指南。

🛠️ 第一阶段：准备你的“数字施工箱” (Windows 平台适用)

建站就像盖房子，你需要先在电脑上装好三件基础工具。

1. Git（版本控制与上传工具）

  • 动作：去官网（搜索 Git for Windows）下载安装包。

  • 细节：双击运行后，**什么都不要管，一路疯狂点击“Next”**直到完成。它会在你电脑里装一个叫 Git Bash 的黑框框，这是我们用来传代码的通道。

2. VS Code（代码工作台）

  • 动作：去官网下载 Visual Studio Code 并安装。

  • 细节：安装完成后打开它。如果你看不懂英文，点击左侧边栏第五个图标（四个小方块那个，叫 Extensions），搜索 Chinese，安装中文语言包，重启软件就变成全中文了。

3. Hugo Extended（网页生成引擎）—— ⚠️ 这是新手最容易卡住的地方

  • 动作：去 Hugo 的 GitHub Releases 页面，找到名字类似于 hugo_extended_XXX_windows-amd64.zip 的压缩包下载。必须是带 extended 字样的！

  • 解压：在你的 C 盘根目录新建一个文件夹，命名为 Hugo。把压缩包里解压出来的 hugo.exe 文件放到 C:\Hugo 里。

  • 给系统指路（配置环境变量）：

    1. 按下电脑键盘上的 Win 键，直接打字搜索“环境变量”，点击“编辑系统环境变量”。

    2. 在弹出的窗口右下角，点击“环境变量”按钮。

    3. 在下方的“系统变量”列表里，找到一个叫 Path 的行，双击它。

    4. 点击右侧的“新建”，输入 C:\Hugo，然后一路点击“确定”关掉所有窗口。

  • 测试：按下 Win + R，输入 cmd 回车打开黑框。输入 hugo version 回车，如果出现了一长串包含 hugo v0.xxx extended 的英文字符，说明引擎安装成功！

🏗️ 第二阶段：在电脑里搭建网站骨架

1. 召唤终端

打开 VS Code。点击顶部菜单栏的“终端” -> “新建终端”。在屏幕下方会出现一个可以打字的控制台。

2. 生成网站文件夹

在终端里输入以下命令并回车：

hugo new site my-site

这行指令的意思是：“Hugo 引擎，请帮我生成一个名叫 my-site 的网站骨架”。

接着，我们要“进入”这个新文件夹，继续输入并回车：

cd my-site

cd 的意思是 Change Directory（切换目录）。

3. 穿上极简外衣 (下载 PaperMod 主题)

骨架有了，但现在是透明的。依次输入这两行代码，每输一行敲一次回车：

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

第一行是激活 Git 引擎；第二行是从别人那里把 PaperMod 这套衣服的图纸下载到你网站的 themes/ 文件夹里。

4. 绑定主题

在 VS Code 左侧的文件树里，找到 hugo.toml（或者 config.toml），双击打开它。在第一行下面，增加一行：

theme = "PaperMod"

按 Ctrl + S 保存。

✍️ 第三阶段：写下你的第一篇世界宣言

1. 创建一篇文章

在终端里输入并回车：

hugo new posts/hello-world.md

2. 填充内容

在 VS Code 左侧找到 content 文件夹 -> 展开 posts 文件夹 -> 点击 hello-world.md。

你会看到最上面有几行被 --- 包裹的代码，这叫“元数据”。

非常重要：把里面的 draft: true（意思是：这是草稿）改成 draft: false（意思是：可以发布了）。

然后在 --- 下方，随便敲两行字，比如：“你好，世界！这是我的第一篇测试文章。”

按 Ctrl + S 保存。

3. 本地预览

在终端输入启动指令并回车：

hugo server -D

你会看到终端里弹出一段提示，里面有一个网址：http://localhost:1313/。

按住键盘的 Ctrl 键，用鼠标点击这个链接，浏览器会打开你的网站。看到你刚才写的字了吗？恭喜，本地测试完美跑通！

(在终端里按 Ctrl + C 可以关闭预览)

☁️ 第四阶段：把代码锁进云端保险箱 (GitHub)

1. 建立防污染黑名单

在 VS Code 左侧空白处右键 -> “新建文件”，命名为 .gitignore（注意最前面有个英文句号）。

在里面只写一行代码并保存：

public/

这告诉 Git：“等下打包上传的时候，不要带上这个垃圾文件夹”。

2. 在 GitHub 建库

打开网页 github.com 并登录。点击右上角的 + 号 -> New repository。

Repository name 随便填（比如 my-blog）。可见性选 Private（私有），然后直接拉到最下面点击绿色的 Create repository。

此时网页上会显示一堆代码，找到类似于 https://github.com/你的名字/my-blog.git 的链接，复制它。

3. 上传代码

回到 VS Code 的终端，依次输入这三行命令（每行输完敲回车）：

git add .
git commit -m "初始化我的网站代码"

这两行的意思是：把所有文件打包，并贴上一个叫“初始化”的标签。

接着，把你刚才在 GitHub 复制的链接替换到下面这条命令中：

git remote add origin 你的GitHub链接粘贴在这里
git branch -M main
git push -u origin main

如果弹出登录框，按提示登录 GitHub 账号即可。看到进度条跑到 100%，你的底稿就安全上云了！

🌍 第五阶段：接入 Cloudflare 开启全球广播

1. 授权读取

打开网页 dash.cloudflare.com 并登录。

点击左侧菜单的 Workers 和 Pages -> 点击右侧蓝色的 创建(Create) -> 选择顶部选项卡 Pages -> 点击 连接到 Git (Connect to Git)。

按提示绑定你的 GitHub 账号，并选中你刚才创建的 my-blog 仓库，点击“开始设置”。

2. 核心参数配置（唯一会报错的地方）

在设置页面向下滚动，找到 构建设置 (Build settings)：

  • 框架预设：选择 Hugo

  • 构建命令：填入 hugo --gc --minify

  • 构建输出目录：填入 public

接下来，点击下方的 环境变量 (Environment variables) 展开它：

  • 点击“添加变量”。

  • 变量名称（左框）必须大写：HUGO_VERSION

  • 值（右框）填入一个较新的版本号，比如：0.130.0 或你刚才本地安装的版本。

3. 部署上线

点击最下方的 保存并部署。

盯着屏幕上的进度条，大约 1 分钟后，出现绿色大字“Success”。点击页面上的链接（形如 xxx.pages.dev），你的网站就已经在全球互联网上存活了！

🏷️ 第六阶段：钉上你的专属门牌号 (域名绑定)

如果你觉得 pages.dev 的后缀太长或者在国内打不开，我们就花点小钱换个门牌号。

  1. 买地契：去阿里云（需实名备案）或者国外的 Spaceship、NameSilo（免实名，支持支付宝）买一个你名字拼音的域名（比如 .com 或 .me）。

  2. 移交主权：在 Cloudflare 左侧菜单点击 网站 (Websites) -> 添加站点，输入你刚买的域名，选择最下方的 Free 免费套餐。

  3. 改名片：Cloudflare 会扫描一阵子，然后给你两个 名称服务器 (Nameservers)（长得像 xxxx.ns.cloudflare.com）。复制这两个地址。

  4. 回到你买域名的网站后台，找到“DNS 设置”或“自定义 DNS”，把里面默认的地址删掉，替换成 Cloudflare 给你的这两个地址。保存。

  5. 正式挂牌：回到 Cloudflare 的 Workers 和 Pages，点开你的项目 -> 顶部选择 自定义域 (Custom Domains) -> 设置自定义域 -> 填入你的域名，一路点击继续。

等待几分钟让全球网络刷新。在浏览器地址栏敲下你的专属域名，敲击回车——这座完全由你掌控的数字花园，正式向世界敞开大门。