从0到1搭建个人hugo博客

契机

最近一两年 AI、超级个体、软件出海这些词都挺火的，也加入了一些社群学习，但说实话，很多时候光输入，自以为学会了，没有自己的总结、思考，可能也就学了个皮毛。

这两天在网上闲逛，看到 demochen 老板写的一篇博文：博客从 Hexo 迁移到 Hugo 的过程，说实话这个博客的皮肤惊艳到我了，简单、清爽，让我也有了搭建个人博客的冲动，说干就干。

本站使用的技术框架以及自定义内容方案基本上是参考 demochen 老板的博文，在此表示感谢。另外文章末尾画了一下本站使用到的技术框架图，有需要的朋友可以自取。

实践

hugo 框架

1、博客主要是采用 hugo 框架，使用的皮肤是 ladder，可以参考这篇文章：如何 30 分钟搭建一套完整独立博客

2、博客搭建完了之后，可以做一系列自定义操作，比如集成 Giscus 评论功能，当时参考了这篇博文：使用 giscus 为网站添加评论系统通用方法，还可以集成数据统计工具 umami，当时参考了这篇博文：如何零成本给博客集成 umami 数据统计分析功能

自动化部署

1、代码是通过 git 提交，并托管到 github，网站是部署到 CloudFlare，当 github 代码有变动时，会自动触发 CF 做 CICD。

2、域名是在 namecheap 上购买的，通过 CF 做解析，可以参考这篇博文：CloudFlare 添加域名解析。

3、图床最开始是采用 CF+telegraph 的方案，但用了一下感觉自动化程度不够，最终采用 picgo + CloudFlare R2 的方案，可以参考这篇博文：Picgo 对接 Cloudflare R2 的方法

自动化写作

1、写作主要使用 Obsidian，它可以构建一套完整的工作流，让你专注于写作本身，参考的文章：obsidian 让发博客简单到不可思议。

2、obsidian 一共集成了 4 个插件，这 4 个插件可以在插件社区下载。

• Git：自动化代码提交；
• quickAdd：通过一个简单的命令基于模版新建一篇文章；
• EditingToolbar：markdown 写作工具栏；
• image auto upload plugin：粘贴一张图片到文章中，会自动帮我们上传到图床。

感受

整个一套下来，差不多花了一个礼拜的时间，算是把网站折腾上线了。基本上把建站的 MVP 完整的跑了一遍，踩了不少坑，但收获也是满满的，后面就要多输出一些内容，不然对不起花的这些时间。

另外给我感触最深的是：国外做网站的生态真的是非常的成熟，很多轮子是拿来就能用，可以让你节省很多时间、金钱。整套下来除了域名花了不到 30 元，其他软件、服务器资源都是免费的，用的非常爽。