blog-site-post
从1搭建一个到2的博客
// 为什么要自己写博客
在看了我的学长yyh的博客之后,一直想自己搭建一个博客,我的第一代博客就是利用现成的框架和主题模板搭建的,虽然博客了提供了很多可修改的选项,但是只有我在刚刚搭建好的那一刻是兴奋的,在写了第一篇博客之后,就没再更新了,有一部分原因是“懒”,但是更多的还是与我心中的独属于我的博客的心理目标差距很大,在随着不断学习,了解的也越来越多,编写第二代博客的想法一直在我的Todo-list中,在这学期写了无数个报告之后,我终于开始实施了:
在这次开始之前,我没有直接套用现成的博客主题,而是完全按着我的想法走,我的风格一直是极简,但是其中又包含小巧思的风格,我先去浏览了现有的主题的界面,挖出我觉得想要的,然后又去看了其他人分享的博客,最后总结出自己想要的风格。
这个博客的搭建不光是分享我做的,我更想把他当作我情绪释放的一个小角落,我经常会有一些突发奇想和一些情绪,所以我在博客加了随笔和说说两个功能,可以让我随时在这里发表自己的想法,释放自己的情绪,这个博客可以匿名身份分享,也就没有了在朋友圈和抖音熟人面前的拘束。
我给它起名叫 petrichor.dev——petrichor 是雨后泥土的味道,我很喜欢这个词的意境:一种在混沌和安静之后留下的清晰感,恰好也是我写字的原始冲动。
// 设计理念:终端情绪
Claude code和codex(目前合并为gpt)的崛起,整个网站的设计灵感来自融合了Claude和**终端(Terminal)**的配色风格。不是那种花哨的赛博朋克终端,而是一个简洁、冷静、光线昏暗的控制台窗口。
最初只有一个模糊的想法:深色背景、代码风格、读起来像在 vim 里翻看笔记。在和Claude的不断对话中,我最终确定了具体的颜色方案。
点击彩蛋
页面上任何位置点击鼠标,会有一个彩色的词从鼠标位置向上飘浮并淡出——用彩虹的 12 种颜色循环显示 12 个词。这个效果的目的是让页面的每一次点击都有反馈,像终端里敲下一个键后屏幕的微闪。这个是我在第一代博客中就使用的,唯一感觉是属于我自己的地方,所以在第二代博客中也把他保留了。
// 页面结构
网站目前有六个页面:
| 页面 | 路由 | 说明 |
|---|---|---|
| 首页 | / | 打字动画 Hero + 三张精选卡片 |
| 项目列表 | /projects | 置顶项目 + 网格布局 |
| 随笔列表 | /essays | 置顶随笔 + 网格布局 |
| 说说动态 | /moments | 朋友圈式垂直时间线 |
| 文章详情 | /projects/[slug] | Markdown 渲染 + 评论区 |
| 登录 | /login | 邮箱密码登录/注册 |
| 管理后台 | /admin | 文章 CRUD + 说说管理 + 评论管理 |
第一代博客缺少了评论互动的功能(是因为需要魔法),这次我多加了登录功能,注册之后就可以发表评论和参与互动了,从嵌入式课设了解到数据库之后,到我在实践部期间做的实践成绩管理系统中初步使用,再到我的第二代博客中利用数据库实现登录个人账号和评论互动功能,这何尝不是一钟成长。
// 总结:这个东西的价值是什么
写博客不难,GitHub Pages 十分钟就能搭好。但我想做一个我愿意打开它写东西的地方。
这个网站从视觉到交互都是按照我自己喜欢的样子设计的。终端美学的核心不是装酷,而是一种明确的姿态:这里是我的工作环境,我不需要花花绿绿的装饰来吸引注意力,我想让你看的是文字本身。
这也就解释了为什么背景是暗的、为什么颜色是克制的、为什么字体就是系统默认——一切都是在给内容让路。
如果你也在考虑自己写博客,我建议你先别急着选主题,先想想:你愿意每天打开的那个写作工具,它应该长什么样?确定了自己的风格之后,就可以压力Claude code或者codex了。
另外提几个省钱的小妙招:
- Claude code和codex都可以接入deepseek v4,只要你的想法明确从搭建到完成,用不上10块
- 买域名可以去SpaceShip去买六位数字域名,最低 4元/年,在你的数字组合过于贵的时候可以试试将组合顺序换一下(这也是为什么实践成绩管理系统的网址是062020.xyz,但我用建院时间的时候是20美元/年,突然想到调换顺序,就变成0点几美元了,另外还可以去阿里云 腾讯元买,首年一元,续费一年也就30几,还是可以接受的)
2026 年 7 月 13 日,写于项目搭建完成当晚
// 评论
暂无评论,来抢沙发吧