一、引言：为什么选择这套工作流？

  • 痛点分析：

    我之前使用的是wordpress + WampServer + 阿里云创建的网站，这个流程最大的缺点就是在编辑笔记时需要去wordpress后台，后台不仅慢，编辑起来还费劲，虽然也可以在Obsidian中配合wordpress插件，但总还是感觉wordpress臃肿，不仅如此，服务器使用的是轻量级的，只有2M的带宽，访问很慢，而且域名备案流程繁琐且缓慢。接下来我介绍的流程可以免费托管，只需要为域名付费即可，而且域名无需在国内备案。

  • 我的终极解法：

    一套本地丝滑写作、云端自动构建、且几乎零成本的现代化技术博客方案。

  • 核心技术栈预览：

    Obsidian (本地编辑) + PicGo (图床管理) + Hugo (静态生成) + GitHub (版本控制) + Vercel (全球部署)。

二、 构建本地终极写作环境 (Obsidian 篇)

  • 1. 认识 Obsidian

    为什么它是技术笔记的神器（Markdown 原生、双链、极速响应），在遇到Obsidian之前我使用的是有道云和xmind，随着笔记内容越来越多有道云启动都要半天，现在还有好多广告。Obsidian完全本地化管理，数据安全，社区插件生态丰富，可以创建白板，一定程度上可以取代xmind。下载链接：https://obsidian.md/zh/

  • 2. 图文分离：优雅的图片管理方案 (PicGo)

    （1）、本地图片的痛点（分享不便、打包体积大）。技术笔记里面通常有很多图片，当积累一定规模时，无论时分享还是传到Github上进行云端备份都是一个棘手的问题。如果将笔记部署到网站里，那么图片多的时候往往加载很慢，对服务器带宽是一个极大的考验。所以图文分离是一个很有必要的步骤。

    （2）、配置阿里云OSS对象存储。关于OSS不细述，只讲几个关键点。首先是关于AccessKey的，点击头像找到“权限与安全->AccessKey”，我这里使用RAM用户AccessKey，如图1所示。然后根据配置执行生成即可，保存好你的AccessID和Key，只显示一次。然后进入对象存储OSS控制页面，先创建一个bucket，点击创建的bucket，找到权限控制->阻止公共访问，点击关闭，如图2所示。在同一个页面，找到读写权限，将“Bucket ACL"设置为公共读。不然当你将图片链接放入笔记中时并不会正常显示图片。OSS有桌面版可视化管理工具，也可以下载使用。

    image.png

    image.png|830

    （3）、配置 PicGo 图床方案（搭配阿里云 OSS 云存储）。首先安装PicGo，Github下载链接：https://github.com/Molunerfinn/PicGo/releases。我下载的是2.5.2版本。如图2-2-2-1所示，我使用的是阿里云的OSS作为图床，填入相关配置后，保存即可。关于

    image.png|585

    （4）、在 Obsidian 中实现“复制粘贴，自动上传并返回图床链接”的丝滑体验。这一步可以实现在Obsidian笔记中直接粘贴图片（配合Snipaste截图软件更方便，F1直接截图，Ctrl + V直接复制），自动将图片传到图床，并返回图床的链接。在Obsidian中下载一个叫“Image auto upload”的第三方插件，启用插件后，进入插件设置，设置PicGOServer 上传接口：http://127.0.0.1:36677/upload，一般默认就是这个值，端口号和PicGo中设置的保持一致，如下图所示。

    image.png|617

    image.png|580

  • 3. 云端托管与版本控制 (Obsidian Git)

    • 安装与配置 Obsidian Git 插件。

      （1）、即使不准备搭建个人博客，只要你有记录笔记的习惯，这一部分对你也有很多帮助。Obsidian自带有云端同步功能，而且是端到端加密的，但是需要付费。另一个方案就是将Obsidian仓库上传到Github，这样可以实现在不同的工作地点对同一篇笔记进行无缝编辑。 （2）、首先创建一个Github仓库，然后将仓库克隆到本地，这一步可以参考笔记“Github配合Sourcetree管理UE4工程”（牵扯到SSH密钥）。在Obsidian中点击仓库管理，选择打开本地仓库，将刚才克隆的本地到仓库作为Obsidian的工作空间。在.gitignore文件中可以设置忽略的文件。

    image.png|763

    image.png|739

    （3）、在Obsidian中下载Git第三方插件，启用后会在右侧出现Git操作面板，如图所示。常用的流程如下，当修改文件后，点击加号（Stage All）暂存所有，然后在输入框（默认Update Bolg：）输入当前修改的内容，接着点击对号（Commit）提交，最后点击上传按钮（push）推送到GitHub仓库。如果是比较小的修改，可以直接点击第一个向上的箭头（Commit-And-Sync）一键提交和推送。

    image.png|735

    • 总结

      到这里已经实现了Obsidian + Picgo + Github的笔记托管方案。如果不考虑创建个人博客的话，这套流程用来写笔记也是非常舒服的，数据同步，免费托管，图文分离。

三、 引擎启动：搭建网站骨架 (Hugo 篇)

在拥有了 Obsidian 写作环境和 PicGo 图床后，我们需要一个“引擎”将这些 Markdown 文档转换成精美的网页。这个引擎就是 Hugo。

  • 1. 初识 Hugo

    （1）、什么是静态网站生成器？。传统的网站（如 WordPress）就像一家点餐制餐厅：每当有读者访问，服务器就要临时去数据库里“炒菜”（查询数据、渲染页面），这不仅慢，还容易被黑客通过数据库漏洞攻击。而Hugo这种静态网站生成器则是一家预制菜工厂：在你发布文章时，它会瞬间把你所有的 Markdown 文件“预制”成成千上万个标准的 HTML 网页。

    （2）、为什么它比 WordPress 更适合极客？ ·极速编译：Hugo 号称是世界上最快的 SSG。即使有几千篇文章，它也能在几秒钟内完成全站构建。 ·无数据库漏洞：网站只有 HTML/CSS/JS 静态文件，没有数据库。这意味着没有 SQL 注入风险，安全性极高。 ·版本控制友好：整个网站就是一个文件夹，可以完美配合 Git 进行版本管理 ·零成本/低成本托管：静态文件可以免费托管在 Vercel、GitHub Pages 等平台，不需要支付昂贵的服务器和数据库费用。

  • 2. 本地环境搭建

    （1）、安装 Hugo 程序。 ·Windows 用户打开 PowerShell，输入：scoop install hugo-extended（安装 extended 版本以支持高级 CSS 处理）。 ·手动安装，从 https://github.com/gohugoio/hugo/releases 下载对应的压缩包，解压到自定义目录（例如 D:\Software\hugo）。 ·验证：打开终端输入 hugo version。如果显示版本号，则配置成功。如图所示。

    image.png|689

    （2）、创建第一个 Hugo 站点，在你想存放博客的目录下打开终端，输入：hugo new site my-blog。这将自动生成 Hugo 的标准目录结构（content, layouts, static 等）。如图所示。

    image.png|681

  • 3. 下载与配置主题

    （1）、挑选并安装主题：PaperMod，PaperMod 是目前 Hugo 社区最受欢迎的极简风主题，非常适合技术博客。https://github.com/adityatelange/hugo-PaperMod 或者官网地址下载：https://themes.gohugo.io/themes/hugo-papermod/。下载后解压到项目的themes文件夹下，主题文件夹命名为PaperMod。

    （2）、配置 hugo.toml。打开根目录下的 hugo.toml，进行初步配置：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    baseURL = 'https://yourname.top/'
languageCode = 'zh-cn'
title = '我的技术笔记'
theme = 'PaperMod' # 必须与 themes 文件夹下的名字一致

# Hugo 原生格式的作者配置（一定要加入下面代码，不然本地服务器会启动失败）
[author]
  name = 'Imrcao1'
[params]
  author = 'Imrcao1'

    （3）、在本地启动服务器，cd 到项目目录，使用命令：hugo server -D启动，浏览器进入http://localhost:1313/就可以看到了。如图所示。

    image.png|852

    （4）、在项目根目录/content下创建posts文件夹，在此文件夹下可以创建first.md文件，来创建一个篇文章。保存后，使用hugo server -D启动服务，就可以看到文章了。如图所示。

    image.png|839

  • 4. 工作流大一统：Obsidian 变身控制台

    （1）、这是最精妙的一步，我们将把写作和网站管理合二为一。将刚才创建的hugo项目根目录设为 Obsidian 工作空间，打开 Obsidian，选择“打开本地库”，直接选择你的 Hugo 项目根目录。现在，你可以在 Obsidian 的侧边栏直接看到项目的文件夹结构。

    （2）、根据第二部分的内容，将该项目工作空间变成Git的本地仓库。

    （3）、也可以使用命令行将该工作空间变成Git的本地仓库。 ·首先打开power shell，cd到工作目录（cd F:\00_Imrcao\01_MyProject\my-site-test）； ·在根目录下创建.gitignore文件，加入以下内容：public/ resources/ .hugo_build.lock（注意换行），这一步很重要，在前面执行hugo server -D命令时会生成public文件夹，这个是本地网页相关的文件，不能上传，否则会影响后续网站构建。 ·然后根据如下指令开始执行。关联完远程仓库后，执行push，会跳出来一个界面，让你选择GitHub账户，如图所示。有可能push失败，此时可以使用obsidian推送，或者使用sourcetree可以。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 初始化全新的本地 Git 仓库
git init
			
# 把除了 .gitignore 黑名单之外的所有文件添加到暂存区
git add .
			
# 存档并写上备注
git commit -m "全新初始化博客，包含 PaperMod 主题与第一篇测试笔记"
			
# 将主分支命名为 main
git branch -M main
			
# 关联你的远程仓库
git remote add origin https://github.com/你的用户名/my-site-test.git
			
# 推送代码到 GitHub
git push -u origin main

image.png|879

四、 自动化部署上线 (GitHub & Vercel)

现在obsidian + GitHub已经打通了，hugo项目也创建完毕了，开始准备导入Vercel进行部署。

  • **1. 初识 Vercel

    （1）、Vercel前端开发者最爱的免费托管平台 https://vercel.com/。

  • **2. 导入GitHub项目，打开网站后使用Github登录，添加项目，导入Github仓库。在导入设置页面，需要做如下设置，如图所示。

    （1）、将Application Presset设置为hugo。 （2）、 Build and Output Settings（构建与输出设置）因为 Vercel 已经自动识别出你的 Framework Preset是 Hugo，所以这一块通常不需要手动修改。 （3）、 Environment Variables（环境变量）—— 这是重中之重！你必须在这里填写 Hugo 的版本号。Hugo 最新版本号是0.160.1，但最新版 Hugo（如 0.160.1）和 PaperMod 主题之间的有语法兼容性冲突，所以这里使用低版本的。 （4）、点击Deploy进行部署

    image.png|851

    （5）、在后台管理页面就可以看到一个网址：my-site-test-eight.vercel.app。Vercel 免费为你分配的 .vercel.app 默认域名，目前在大陆网络环境下处于被全线 DNS 污染和屏蔽的状态。因此，如果不开启梯子，国内网络是无法解析并访问这个地址的。

    image.png|1245

    （6）、彻底解决的完美方案：绑定自定义域名。想要让国内用户（包括没开梯子的你自己）顺利访问，唯一且最专业的方案就是：购买并绑定一个属于你自己的专属域名（例如 yourname.com 或 my-tech-blog.me）。一旦你使用了自定义域名，你的博客将具备以下绝佳优势：

    • 国内直连免梯子：只要你的自定义域名没有违规历史，国内网络可以直接顺利解析，无需代理即可访问。
    • 完全免备案：因为 Vercel 的服务器物理节点依然在海外，只要你不把域名解析到国内的云服务器，就不需要走繁琐的国内工信部备案流程。
    • Vercel 的大陆专属加速优化：Vercel 官方甚至专门为大陆网络环境提供了一个优化的 CNAME 解析节点（cname-china.vercel-dns.com）。当你绑定自定义域名时，使用这个特定的记录值，国内访问速度会得到显著提升。

五、 域名与上线

1.购买域名： 在阿里云或者腾讯云上选择一个自己喜欢的域名购买即可，等待注册局审核通过，一般几个小时就可以。

**2.解析域名

进入阿里云（或你购买域名的平台），找到“域名解析”，添加两条记录，如图所示。 添加第一条记录： 记录类型：A 主机记录：@ 记录值：76.76.21.21（这是 Vercel 的官方 IP）

添加第二条记录： 记录类型：CNAME 主机记录：www 记录值：cname-china.vercel-dns.com（注意：这里用了专为中国优化的地址）。

image.png|1263

3.为什么要用 cname-china？：默认的 cname.vercel-dns.com 走的是 Anycast 网络，在国内有时会被干扰或绕路美国；而 cname-china.vercel-dns.com 针对中国电信、联通、移动的线路做了更好的链路优化。

4.在Vercel后台添加域名：在网页控制台点击Domain，点击Add Existing添加域名（要等域名解析完成）。

5.修改你的hugo.toml文件：设置文件中的baseURL = https://imrcao.top

六、定制化：CSS与UI打磨

1.全局视觉 ：创建custom.css文件

在 项目根目录/assets/css/extended/custom.css， custom.css文件控制着全局的外观。

七、结语

到这里就个人博客就搭建完毕了。现在工作流程变成了：在Obsidian中编写笔记 ->粘贴图片（自动上传图床）->Git Push(一键提交)->Vercel会自动获取GitHub上的更改-> Vercel自动编译->网站自动刷新。