Featured image of post 在 hugo 的第一篇文章

在 hugo 的第一篇文章

建站过程

好几 次阅读

141168133_p0.jpg

pid:141168133

首先是一个我必须马上宣布的消息,那就是我做好了我的第一个个人网站

网站做了两个镜像,分别用的 github pages 和 cf pages

(blog.)axiumyu.xyz

blog.sakuravalley.xyz

www.axiumyu.xyz

为什么突然就做好了,实际上我也早就说了我早就有这个想法了,于是才去学的前端,学的 vue,如果你们还记得我以前的文章里面是什么时候提到我在学这些的话,你就会知道我已经保持这个想法多久了

那为什么我突然就真的做出来了,其实很显然就是因为上一次的文章,我早就知道 github pages 这东西,实际上我也早就部署过了,但是那时候没有用自定义域名,也没后文了

可以看 github 仓库的提交记录

Pasted image 20260228160459.png

最早的提交是在一年多以前了

上一篇文章我提到了其实一直以来追求的完全掌控其实是一个彻头彻尾的谎言,不是说我对自己不诚实,好吧可能也有一点因为我有时候也会想是否真的有必要这么做,但是那时候我通常把这当作自己的自我破坏没有理会

而现在看来,不是我说谎了,而是我终于发现自己一直在追求的东西其实并不是什么多重要的东西,其实我自己也说过,我真的不太想写代码,我一直觉得掌握最少需要的内容然后依靠 ai 完成剩下的部分是最好的,因为我现在还没有能够真的让"Who"来参与的程度,不管是经济方面还是别的方面

那就来说说我是怎么折腾出来的吧

首先是选型,我早就了解过几个常见的博客框架例如 wordpress,例如 hugo,hexo 等等,以及之前提到的两个部署平台,在以前我的策略其实是通过 nuxt.js 手搓一个,然后自己买一个服务器在上面部署,现在看来那实在是多余了,花了太多时间和精力在不重要的部分

然后问了 gemini,gemini 给了 cf pages, vercel, netlify 三个托管平台,以及 hugo, hexo, vitepress 三个框架,然后让 ds 给这几个对比一下,我觉得可以放一下对比的表格,虽然我不太确定是否真实

Pasted image 20260228161611.png

然后让 ds 也对比了三个框架

Pasted image 20260228161739.png

这么一看其实就很明显了,所以最后用的是 hugo+gh pages

然后其实 ds 也提醒我了很明显的事情,托管平台不用唯一,可以在多个平台上同时部署,所以思考了一会,决定把另一个我原本就打算用来做网站的域名转移到了 cf 上,然后顺便查了下怎么搞 cf pages

这中间还有一个很有意思的事情,cf 的 pages 是和 worker 放一起的,就你点开 cf 的创建实际上有两个选项,我问了 gemini 怎么创建,但是没有找到 gemini 说的"框架预设",以为是 ai 出的幻觉就没理会,继续按照我的理解做下去

然后创建成功了,我推送更新,然后 cf 这里也部署成功了,但是我访问网站,没有东西,只有一个 hello world

这就奇怪了,于是我和 gemini 斗智斗勇了半天,还询问了一下别人,最后在仔细研究时发现我搞的是 Worker(写后端代码的),而非 pages

搞错了重来,然后发现 gemini 给的那些信息都是对的 (然后发现 ds 给的信息也是对的,难得),确实有框架预设,确实有根目录和输出目录两个配置,也不需要配置一个莫名其妙的,群友给的环境变量,只要指定版本就行

这个过程听我说着好像很简单,但实际上我花了好久,从 4 天前开始折腾到今天才算是勉强能看,然后现在才有了真正意义上的第一篇文章,也是从 demo 转变为一个真正的生产环境

接下来很显然的就是给网站做美化,首先我肯定要加一个背景图,以及背景图的毛玻璃效果,以及投降,网站的图标,标题

然后这些样式是用 scss 写的,我去看了一下,scss 就是一种 css 的改良版,加入了变量等好用的功能,可能类似于 c++ 和 c 的关系

这 fcitx5 的输入法不知道怎么回事好像有时候跳到别的应用再回来就会没法输入中文,得把 obsidian 关掉再打开

所以我昨天其实是先回顾了一下 css 的选择器,然后晚上一边看网站的结构,一边让 ai 写 css,然后我再看看有什么地方写错的我改,实现了背景图片根据浏览器深色/浅色模式切换,以及毛玻璃,鼠标放在文章列表和侧边栏列表时背景图片模糊并调低亮度

还有文章列表卡片的选中时浮现,目前就做了这些,太多的特效也不好,我现在都还记得那个图

Pasted image 20260228182550.png

我不敢说我以后会不会变成这其中的一员,但是,我觉得不能排除这样的可能性,至少暂时就让它保持现状好了,侧边栏的几个页面是我照着主题的使用例抄的,不知道为什么,因为我其实还没有彻底研究透这个东西,只知道在 content 下面加一个 page 页面里面加一个文件夹就会有一个侧边栏出现,再加一个 categories 会有一个分类

还有一个 link 页面,我之后打算是做成 About 页面,然后放一些相关链接等等


说点别的吧,前两天发现自己真的能慢慢把一个网站上线的时候很兴奋,能够体会到那种被目标拉着往前的感受,也算是对 dan koe 说的"运动员不需要强迫自己去运动,他们只是根本无法想象自己不每天运动的样子"这个例子有了切身体会,以至于晚上接近凌晨我还不想撒手睡觉

但是,嘛,也不用折腾那么多,有能看得就好了


对了,还把 cf 的 R2 存储也折腾了一下,类似于一个免费的文件存储,可以做图床,可以当网盘,不过空间只有 10G,存图片什么的还可以,别的东西可能就存不下了

因此我就想,要不把 obsidian 的图片也一并上传到这里面,因为实际上我存储 obsidian vault 的 git 仓库,大小已经接近 1000M 了,这是一个相当可怕的大小,我且不说 pull,就是 push 到 github 也要好久,因为里面.git 文件夹占了一半

虽然思索再三但还是决定把图片全部转换为云端读取,老样子让 ai 写转换工具,先批量上传到 r2,然后批量替换文章中的图片链接

然后我刚才还在奇怪为什么这图片链接没有用,结果,哦对了,我还因此让 ai 做了一个工具,在 zsh 里面写了一段脚本,就是将图片通过 rclone 上传到 r2,然后复制 md 的图片链接,但是这里面应该把空格替换为%20,我还在奇怪为什么图片链接没有正常加载,现在正常了

然后就在刚才我也去看了下把评论系统加上去如何,ai 给我的一个方案是直接利用 github 的 discussion,或者 issue,但是这些需要 github 账号,普通人的话可能还不太方便,我觉得看我文章的可能一半甚至更多的人是没有 github 账号的

那么就不可避免需要搞一点数据库,后端,目前打算是用 waline 做,这个就麻烦了,所以现在还没做,暂时还是以公众号为主,但以后应该会逐渐过渡到网站上了,毕竟公众号做得真的不是很好

很巧的是,前两天在做网站的时候,也看到了社群成员的个人网站上线,我觉得这是很好的,每个人都有一个自己的网站,虽说不能让互联网恢复到从前那样真正由网站组成,但至少让每个人都有更多表达自己的机会

不记得是在哪里看到这篇文章的了,找了一个多小时也没找到,但是找到了上面那个图,于是直接搬过来了 ()

就到这里,有多的可以之后补充