🚀 Hugo 博客本地完全体工作流与灾备恢复指南

本手册专为 Windows (Typora) + WSL2 (Ubuntu) + Hugo + GitHub + Cloudflare Pages 架构定制。全套流程采用纯本地物理复制流（零代理干扰、零网络图床依赖），实现本地 1 毫秒极速亮图、图片按文章名自动分拣归档，并具备完善的灾备恢复能力。

🛠️ 第一部分：全套工作流架构图解

整个博客系统的数据流向与编译部署逻辑如下：


【Windows 写作端】                   【WSL2 宿主端】                  【云端生产环境】
 Typora 编辑器                        Ubuntu 系统                      GitHub 仓库
      │                                    │                                │
      │ (Ctrl+V 粘贴图片)                  │                                │
      ├───────────────────────────────────>│                                │
      │ 自动存入 Z:\\...\\static\\images\\     │ (git push 源码与图片)          │
      │                                    ├───────────────────────────────>│
      │                                    │                                │ (自动触发 Webhook)
      │                                    │                                └──────────────┐
      │                                    │                                               ▼
  [1毫秒本地亮图]                     [本地 Markdown 源码]                        【Cloudflare Pages】
  (优先使用相对路径)                  (layouts/ 过滤器自动解析)                       (全球 CDN 免翻墙秒开)

⚙️ 第二部分：环境配置

1. Typora 图像引配置

打开 Typora 菜单栏：文件 -> 偏好设置 -> 图像，严格对照以下快照设置：

插入图片时…：下拉菜单选择 复制图片到文件夹
目标路径：
Plaintext
```
Z:\\home\\lhk\\my-blog\\static\\images\\${filename}
```
(注：${filename} 为自动变量，Typora 会自动为每篇文章创建同名图片文件夹)
规则复选框（关键）：
- 对本地位置的图片应用上述规则 (保持取消勾选)
- 对网络位置的图片应用上述规则 (保持取消勾选)
- [x] 优先使用相对路径 (必须狠狠勾选！确保源码写入为 ../../static/...)
- 允许根据 YAML 设置自动上传图片
复制图片到上述文件夹时…：下拉菜单选择 使用当前时间戳重命名 (消灭多余的时间套娃文件夹)
上传服务设定：选择 无 (彻底摆脱 PicGo 端口卡死及代理内讧问题)

2. WSL2 (Hugo) 路径过滤器

由于 Typora 写入的是基于 Windows 盘符映射的相对路径，为了让 Cloudflare 在 Linux 线上环境编译时完美解析，我们在 WSL2 中部署了路径清洗过滤器。

过滤器物理路径：/home/lhk/my-blog/layouts/_default/_markup/render-image.html
过滤器源码快照：

HTML

{{- $src := .Destination -}}
{{- /* 1. 将 Windows 式反斜杠统一替换为 Linux 标准正斜杠 */ -}}
{{- $src = replace $src "\\\\" "/" -}}
{{- /* 2. 移除可能残存的 Windows 虚拟盘符前缀 Z: */ -}}
{{- $src = replace $src "Z:" "" -}}
{{- /* 3. 核心切除：只要包含 static/images/，就将静态前缀切掉，转换为 Hugo 线上合法的相对根路径 */ -}}
{{- if strings.Contains $src "static/images/" -}}
  {{- $parts := split $src "static/images/" -}}
  {{- $src = printf "/images/%s" (index $parts 1) -}}
{{- end -}}
<img src="{{ $src | safeURL }}" alt="{{ .Text }}" />

✍️ 第三部分：日常写作与发布流水线

日常写文章时，只需机械化执行以下 3 步，绝不卡顿、绝不碎图：

写字与贴图：在 Typora 中无感码字，截图后直接 Ctrl + V。图片秒速亮起，且 Z 盘对应目录下会自动生成形如 static/images/文章名/image-202605221130.png 的结构。
批量洗牌（强迫症选做）：文章写完后，去 Windows 资源管理器打开该文章的图片目录，按 Ctrl + A 全选，按 F2 键盲打输入 图 回车。Windows 会自动洗成 图 (1).png、图 (2).png。回到 Typora 批量替换一下源码即可。
丝滑发布三连：打开 WSL2 终端，直接运行以下命令上云：
Bash
```
cd ~/my-blog
git add .
git commit -m "feat: 新增一篇高配物理流技术博客"
git push
```
此时，Markdown 源码与物理图片会一同打包作为资产推送到 GitHub，Cloudflare 接收到推送后会自动全量编译，并在 30 秒内推向全球 CDN。

🚨 第四部分：灾备恢复与重装系统满血复活指南

当电脑发生故障、需要重装 Windows 系统，或者更换全新的开发机时，请按照以下推演步骤执行，10-15 分钟即可完全复原整个系统。

🎒 第一阶段：重装系统前的“数据带走”

如果你还能进系统，或者能通过 PE 盘读取硬盘，请立刻抢救以下两道防线：

方案 A（最稳固）：直接拷贝 Z 盘根目录

将映射为 Z 盘的整个 my-blog 文件夹直接复制到你的 U 盘、移动硬盘或不限速网盘 中。

💡 定心丸：即便你这里忘记备份了，只要你平时坚持 git push，你所有的文章和所有图片也都在 GitHub 仓库里稳稳躺着，绝对丢不了！

方案 B（高级黑客流）：直接导出整个 WSL 虚拟硬盘

打开 Windows 的 PowerShell，运行一行命令，把包含所有环境、Hugo、博客的 Linux 整个系统打包：

PowerShell

wsl --export Ubuntu D:\\wsl-ubuntu-backup.tar

📥 第二阶段：重装系统后的“环境重建”

系统重装完成后（纯净的 Windows 环境），按照以下顺序恢复：

步骤 1：启用并安装 WSL2

以管理员身份打开 PowerShell，运行：
PowerShell
```
wsl --install
```
重启电脑，进入 Microsoft Store 下载最新的 Ubuntu。

步骤 2：恢复 Linux 环境与博客数据

如果你手头有方案 B 的 `.tar` 备份包：

直接一行命令倒回系统，连 Hugo 都不用重新配：

PowerShell

wsl --import Ubuntu D:\\WSL_Storage D:\\wsl-ubuntu-backup.tar

如果你只有 GitHub 云端仓库（最常见、最纯净的恢复方式）：

打开新装好的 WSL2 (Ubuntu) 终端，配置你的 Git 身份：

Bash

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的注册邮箱"

配置 SSH Key 或使用你的 Token，直接将云端博客项目克隆到 Linux 本地：

Bash

cd ~
git clone [https://github.com/hongkailiang49-byte/my-blog.git](https://github.com/hongkailiang49-byte/my-blog.git)

在 Ubuntu 里一键重新安装 Hugo（确保版本与之前一致）：
Bash
```
sudo apt update && sudo apt install hugo -y
```

步骤 3：重新绑定 Windows Z 盘映射

为了让 Windows 下的 Typora 能够顺畅读写 Linux 内部的文件，必须重新映射盘符：

在 WSL2 终端中确认路径存在：ls ~/my-blog
打开 Windows 的 此电脑 ➡️ 点击顶部工具栏的 ...（或网络） ➡️ 选择 映射网络驱动器。
驱动器选择：Z:
文件夹精准输入：
Plaintext
```
\\wsl$\\Ubuntu\\home\\lhk\\my-blog
```
勾选 登录时重新连接，点击完成。此时 Z 盘复活。

步骤 4：安装并锁定 Typora 配置

重新下载并安装 Typora。
打开偏好设置 ➡️ 图像，将目标路径和复选框完全依照本手册第二部分的快照重新配置一遍。
直接用 Typora 打开 Z 盘里的 .md 文章。

🏁 满血复活验收：随便截一张图按 Ctrl+V。你会发现，图片瞬间亮起，路径完美转换为相对路径，过滤器自动生效，git push 后 Cloudflare 正常编译。整套高配工作流再次完美运转！

文档中最关键的重装系统/故障恢复四步法提炼在下面

🛠️ 核心恢复四步法（推演快照）

第一步：重新启用 WSL2 重装 Windows 后，管理员身份打开 PowerShell 运行 wsl --install 重启，重新装上 Ubuntu。
第二步：从 GitHub 把项目拉回本地 因为我们开启了本地物理流，图片和文章是生死相依的。只要你在新 WSL2 终端里敲下：
```
git clone https://github.com/你的用户名/你的博客仓库名.git
```

你以前写的所有文章、static/images 里的所有照片都会一并、整整齐齐地被下载回来！ 随后用 sudo apt install hugo 把 Hugo 装回来。

\3. 第三步：重新网络映射 Z 盘

在 Windows 资源管理器里点击“映射网络驱动器”，将盘符锁死在 Z:，路径填入：\\wsl$\\Ubuntu\\home\\lhk\\my-blog。让 Windows 重新打通 Linux 的物理隧道。

\4. 第四步：Typora 快照还原

重新装上 Typora，图像设置里重新把路径锁死在：Z:\home\lhk\my-blog\static\images\${filename}，并唯一点亮“优先使用相对路径”。

有了这份本指南和本地 Git 资产捆绑策略，你的博客和照片就是 100% 绝对安全的。 无论 Windows 系统崩溃还是换新电脑，只要云端有 GitHub，本地有 Z 盘备份，10 分钟内就能无损满血复活！安心去休息吧，这套架构足够你稳稳当当地用上很多年了！

🚀 Hugo 博客本地完全体工作流与灾备恢复指南#

🛠️ 第一部分：全套工作流架构图解#

⚙️ 第二部分：环境配置#

1. Typora 图像引配置#

2. WSL2 (Hugo) 路径过滤器#

✍️ 第三部分：日常写作与发布流水线#

🚨 第四部分：灾备恢复与重装系统满血复活指南#

🎒 第一阶段：重装系统前的“数据带走”#

方案 A（最稳固）：直接拷贝 Z 盘根目录#

方案 B（高级黑客流）：直接导出整个 WSL 虚拟硬盘#

📥 第二阶段：重装系统后的“环境重建”#

步骤 1：启用并安装 WSL2#

步骤 2：恢复 Linux 环境与博客数据#

如果你手头有方案 B 的 .tar 备份包：#

如果你只有 GitHub 云端仓库（最常见、最纯净的恢复方式）：#

步骤 3：重新绑定 Windows Z 盘映射#

步骤 4：安装并锁定 Typora 配置#

🛠️ 核心恢复四步法（推演快照）#