今天是搭建博客的第五天,其实在两小时前,我已经完成了差不多90%的进度,只差把博客搭到网上,但是出现了一点小插曲,我又从头开始了。但是这次的进度更快了。这里先写个开头,现在要去测试一下主页呈现的效果,回头再继续写。


为什么搭这个博客?

说来话长,6月11号出了高英教资面试结果,意料之中没通过,经过总结复盘,一方面,我决定找一些练习英语写作的平台,在deepseek推荐的几个方案中,我选择了langcorrect平台,12号晚上我在上面写了一篇英文版上半年总结,第二天早上就收到一位外国英语母语者的反馈,帮我修正了错误表达,纠正了我的格式甚至标点,也针对性的举了地道表达的例子。另一方面,还是基于职业意愿,传统教培岗位令我毫无兴致,我脑海里浮现“技术文档工程师”这个以前就略有耳闻的词。我又找d老师请教关于“技术文档工程师” 从他那我第一次接触到“markdown语法”,“Git”,“VS Code”这些个新概念。用网页版stackedit练习了基本语法之后,我下了Obsidian,VS Code,也注册了Github。在我学习Obsidian功能的过程中,也了解到Obsidian可以用于沉浸式写个人博客,随后我去问了d老师很多关于“个人博客”的问题,比如最初的起源,于是就触发了“如何搭建个人博客”的好奇。d老师用表格列出了很多方案,最终推荐了比较适合我这种萌新的Hugo方案。

搭建过程主要参考内容:

哔哩哔哩Up主二叉树树视频教程==从零教你搭建Hugo静态博客,并解决存图难、没评论系统等难点==(我还没学会怎么插入视频,所以这里高光一下);Hugo博客搭建教程以及配置调优

漫长的搭建过程……

从16号下午开始,那个时候我还不知道命令符和Powershell的快捷键,更不知道怎么用它们。好在d老师一直都非常细致的引导我每一步的操作。

  1. 下载Hugo extend win.amd0.147.8压缩包解压到D盘Hugo文件夹,把exe放到bin文件夹。然后打开系统环境变量,新建Hugo和Git路径。验证运行环境,可以显示对应版本,一切正常。
  2. win+x打开powershell,cd到D盘,用git指令新建博客网页,出现congratulations。打开资源管理器也可以看到博客文件夹。
  3. 安装Papermod主题,Powershell用git指令从Github上克隆Papermod到博客文件夹。网络原因,这一步尝试了4次才成功。
  4. 用VS Code编辑hugo.yml等相关文件的配置。
  5. 打开VS Code终端,输入指令hugo server,Enter键,ctrl+左键本地网址,进入博客主页预览效果。
  6. 用Obsidian写第一篇博客并为其添加封面图,再次进入博客页面预览效果。
  7. 新建Github仓库,用于托管博客评论区。为其安装giscus并开启评论权限,来到giscus中文界面修改相关设置,最后复制代码粘贴到相应位置(这里具体是哪个文件我忘了,当时跟着教程操作的)。进入第一篇博客页面,预览评论区效果,登录Github账号,发送测试评论成功。
  8. 新建Github仓库,用于存放博客文件。在博客文件夹新增.gitignore文件,添加posts,.hugo_build.lock(这两个不需要传到仓库)。这里还会涉及到Papermod无法直接上传的问题,跟着UP教程操作,先关闭VS Code,把博客文件夹所有文件复制到新的文件夹,接着在旧的博客文件夹里打开themes文件夹,删除Git文件夹,将旧的博客文件夹里所有文件拖到VS Code,上传到仓库就可以了,网络原因,这一步也尝试了好几次才成功。(在theme/PaperMod这里卡了好久)
  9. 用Cloudflare部署博客。登录Cloudflare,输入域名,进入“计算”,“workers&pages”,选择刚刚创建的Github博客文件库并导入。新增环境变量,变量名称HUGO_VERSION,值0.147.8,点击保存并部署。最后设置自定义域名并激活,5分钟左右,DNS记录会更新,通过自定义域名访问博客页面。这里卡了很久,因为没有用Cloudflare的r2存储服务存储博客的图片,导致卡顿,进入主页后文章封面无法显示,点击文章后直接522,把封面图删了之后就可以正常查看文章了。

总结与感悟

今天下午半天的进度非常快,比前面的四天的思路更清晰了,所以从重新搭建到最后的部署,几乎是一气呵成。目前giscus评论系统还有点问题,在开头我用了markdown高光符号,最终呈现效果这些符号并没有隐藏。最后就是整体的格式排版以及写作框架和内容我还需要学习。前两天过于依赖deepseek,只在选主题这块就花了很多时间和精力,至少换了三个主题,只有PaperMod可以正常显示博客页面,但内容是深蓝色字体。d老师一通修改之后,博客主页变成代码开始报错,又开始让我更换主题版本,当时心态真有点崩,已经想放弃了。18号,一大早我还是不甘心,就去小破站找教程了。最后,还是选了PaperMod主题,主页预览效果也不再是压抑的深蓝色下划线字体界面了。中途结合deepseek和一些相关的技术博客,效率也更高了。对我来说搭建博客这种技术活还是蛮有挑战甚至有些折磨的,但感谢有那些出教程的技术大佬们,当然也有集人类智慧于一身的d老师。