心雨的博客日记 - 2026年6月6日

今天是一个特别的日子,我完成了自己的个人博客从零到一的搭建过程。从最初的想法,到选择 Hexo 静态博客生成器,再到配置主题、撰写第一篇文章,每一步都充满了期待和成就感。这不仅是一个展示技术的平台,更是记录学习和成长的地方。

🎯 博客搭建历程

上午:确定方向和选择技术栈

09:00 - 确定目标

我决定搭建一个个人博客,主要目的是:

• 分享技术学习心得
• 记录开发过程中的问题和解决方案
• 作为个人作品集的一部分
• 与其他技术爱好者交流

09:30 - 技术选型

在选型过程中,我对比了多种博客方案:

最终选择 Hexo 的原因:

1. 快速: 基于 Node.js,生成速度快
2. 简洁: 配置简单,易于上手
3. 主题丰富: 有很多优秀的主题可供选择
4. 插件生态: 拥有丰富的插件和扩展
5. 中文友好: 文档和社区都很完善
6. 静态生成: 生成静态页面,部署简单,安全性高

中午:主题选择和配置

11:00 - 浏览主题

我花了很多时间浏览不同的主题,最终在 Hexo 官方主题 网站上发现了 hexo-theme-redefine。

这个主题的特点:

• 🎨 现代化设计: 响应式布局,支持桌面端和移动端
• 🌙 暗黑模式: 自动切换,保护视力
• ✨ 丰富的特效: 粒子背景、鼠标跟随效果、打字机动画
• 🤖 Live2D: 可爱的虚拟代言人,增加互动性
• 📝 优秀的阅读体验: 目录导航、代码高亮、字数统计、阅读时间
• 💬 评论系统: 支持 Waline、Gitalk、Twikoo、Giscus 等多种评论系统
• 🎯 SEO 优化: 内置 Open Graph、Twitter Cards 等社交分享标签
• 📱 移动端友好: 完美适配各种屏幕尺寸

12:00 - 开始配置

开始配置主题时,我按照官方文档一步步操作:

1. 下载主题
   将主题文件放置到 themes/defaultone/ 目录中

2. 配置主题
   在 _config.yml 中设置:

   1	theme: defaultone

3. 配置主题选项
   在 themes/defaultone/_config.yml 中进行详细配置:

   • 网站基本信息
   • 颜色主题
   • 字体设置
   • 导航栏配置
   • 文章设置
   • 评论系统配置

下午:Gitee Pages 部署

13:30 - 创建仓库

在 Gitee 上创建了仓库 anime-blog-demo1,用于托管博客源码和静态页面。

14:00 - 配置 Gitee Pages

按照 Gitee Pages 官方文档进行配置:

1. 进入仓库设置,开启 Gitee Pages 服务
2. 选择部署分支为 web
3. 填写项目地址,等待首次部署完成
4. 服务部署成功后的地址通过自定义域名访问为 https://demo-blog.qusite.cn

14:30 - Git 工作流配置

配置了本地 Git 工作流:

1. 使用私人令牌实现 Git 认证
2. 每次修改后推送到 web 分支
3. Gitee Pages 自动检测更新并重新部署

晚上:撰写第一篇文章

19:00 - 开始写作

我决定写一篇博客搭建历程的文章,记录今天发生的一切。文章结构如下:

1. 博客搭建历程: 从想法到实现的完整过程
2. 技术栈总结: 使用的所有技术和工具
3. 遇到的挑战: 遇到的问题和解决方案
4. 未来计划: 接下来的计划
5. 学习心得: 从中学到的东西
6. 总结: 对今天的总结和展望

20:00 - 完成初稿

文章初稿完成,包含了:

• 详细的技术说明
• 代码示例
• 配置截图
• 心得体会

21:00 - 优化和润色

对文章进行了多次优化:

• 添加了更多细节
• 优化了段落结构
• 添加了表情符号增强可读性
• 检查了错别字和语法

📝 第一篇文章

今天写下的第一篇日记,记录了博客搭建的整个过程。从选择技术栈,到配置环境,再到撰写内容,每一个细节都值得记录。

技术栈总结

通过这次博客搭建,我使用了以下技术:

后端技术

• Hexo 7.3.0: 博客框架
• Node.js: 运行环境
• npm: 包管理工具

主题和样式

• hexo-theme-redefine: 主题
• Tailwind CSS: 样式框架
• Stylus: CSS 预处理器
• EJS: 模板引擎

插件和扩展

• hexo-generator-index: 首页生成器
• hexo-generator-archive: 归档页面生成器
• hexo-generator-category: 分类页面生成器
• hexo-generator-tag: 标签页面生成器
• hexo-helper-live2d: Live2D 虚拟代言人
• hexo-renderer-marked: Markdown 解析器
• hexo-renderer-ejs: EJS 渲染器
• hexo-renderer-stylus: Stylus 渲染器
• hexo-server: 本地服务器
• particles.js: 粒子背景效果
• cursor-effects: 鼠标跟随效果

部署相关

• Git: 版本控制
• Gitee: 代码托管
• Gitee Pages: 静态页面托管

遇到的挑战

在博客搭建过程中,我遇到了一些技术难题:

1. Git 操作问题

问题: 不熟悉 Git 的基本操作,经常忘记命令

解决方案:

• 查阅 Git 官方文档
• 记录常用命令到笔记
• 在实践中不断练习

学到的东西:

1
2
3
4
5
6
7

# 常用 Git 命令
git status              # 查看状态
git add .               # 添加所有文件
git commit -m "消息"    # 提交
git push                # 推送
git checkout -b 分支名  # 创建并切换分支
git pull                # 拉取

2. 敏感信息管理

问题: 在脚本中不小心包含了私人访问令牌

解决方案:

• 立即删除包含敏感信息的文件
• 从 Git 历史中移除
• 重新生成访问令牌
• 使用环境变量存储敏感信息

学到的教训:

• 永远不要在代码中包含私人令牌
• 使用 .gitignore 忽略敏感文件
• 定期轮换访问令牌
• 使用环境变量存储配置

3. 图片链接失效

问题: 使用的外部图片链接过一段时间后失效

解决方案:

• 使用 Unsplash 等稳定图片源
• 添加 alt 属性描述图片
• 使用相对路径引用本地图片
• 定期检查图片链接

使用的图片源:

• Unsplash: 高质量免费图片库
• GitHub: 代码托管平台
• CDN: 内容分发网络

4. 主题配置复杂

问题: 主题配置选项很多,不知道从哪里开始

解决方案:

• 仔细阅读主题文档
• 从简单配置开始
• 逐步添加高级功能
• 参考其他用户的配置

配置优先级:

1. 网站基本信息
2. 颜色主题
3. 导航栏
4. 文章设置
5. 评论系统
6. 高级功能

🌟 未来计划

有了自己的博客,接下来我计划:

短期计划 (1-3个月)

1. 持续更新: 每周至少更新 2 篇技术文章
2. 丰富内容: 添加更多技术主题的文章
3. 优化性能: 优化博客加载速度和用户体验
4. SEO 优化: 提高博客在搜索引擎中的排名
5. 互动交流: 通过评论系统与读者互动

中期计划 (3-6个月)

1. 添加分类和标签: 更好的内容组织
2. 添加搜索功能: 方便读者查找文章
3. 添加归档页面: 按时间浏览文章
4. 添加友情链接: 与其他博主建立联系
5. 添加关于页面: 介绍自己

长期计划 (6-12个月)

1. 优化代码: 提高文章质量和可读性
2. 添加更多功能: 如文章推荐、相关文章等
3. 建立品牌: 打造个人技术品牌
4. 社区建设: 吸引读者关注和参与
5. 变现探索: 考虑合适的变现方式

💡 学习心得

通过这次博客搭建,我学到了很多:

技术能力提升

1. Git 操作能力

   • 掌握了 Git 的基本操作
   • 学会了分支管理
   • 理解了版本控制的重要性

2. 配置管理能力

   • 学会了阅读和理解配置文件
   • 理解了配置的优先级
   • 掌握了配置的最佳实践

3. 问题解决能力

   • 学会了排查和解决技术问题
   • 理解了文档的重要性
   • 提升了自主学习能力

软技能提升

1. 耐心和细致

   • 在配置过程中,细节决定成败
   • 需要仔细检查每一个配置项
   • 遇到问题要耐心排查

2. 文档阅读能力

   • 学会了快速阅读技术文档
   • 理解了文档的结构和逻辑
   • 提升了自主学习能力

3. 时间管理

   • 合理安排任务时间
   • 优先处理重要任务
   • 高效完成任务

4. 总结反思

   • 学会了总结经验教训
   • 能够反思自己的不足
   • 不断改进和提升

心态转变

1. 自信心的提升

   • 通过实践掌握了新技能
   • 完成了一个完整的项目
   • 增强了技术自信心

2. 持续学习的意识

   • 技术在不断更新
   • 需要持续学习新知识
   • 保持好奇心和求知欲

3. 分享的精神

   • 博客不仅是展示,更是分享
   • 分享自己的知识
   • 与他人共同成长

📸 图片说明

为了美化博客,我添加了一些高质量的图片:

头图

• 图片: https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1440&q=80
• 描述: 技术团队协作的场景
• 风格: 现代简约,符合博客主题

文章插图

• 学习笔记封面: https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1440&q=80
• 描述: 学习和思考的场景
• 风格: 温馨自然,适合内容主题

所有图片都来自 Unsplash 高质量免费图片库,风格统一,不会轻易失效。

🎉 总结

今天是一个值得纪念的日子,我成功搭建了自己的个人博客。

今天的成果

1. ✅ 完成了博客从零到一的搭建
2. ✅ 部署到了 Gitee Pages
3. ✅ 配置了 Git 自动部署流程
4. ✅ 撰写了第一篇详细的技术文章
5. ✅ 掌握了 Git 基本操作
6. ✅ 学会了主题配置
7. ✅ 解决了多个技术问题

感谢

• 感谢 Hexo 提供的强大功能
• 感谢主题作者的精心设计
• 感谢 Gitee 提供的托管服务
• 感谢所有帮助过我的人

展望未来

有了自己的博客,我有了记录和学习的地方。未来的日子里,我会:

• 持续更新博客,分享更多有价值的内容
• 不断学习新技术,提升自己的技术能力
• 与读者互动,建立技术社区
• 追求技术梦想,实现自我价值

今天是 2026年6月6日,心雨的博客日记记录的第一天。

博客地址: https://demo-blog.qusite.cn

Gitee: https://gitee.com/xinyucode

Gitee 仓库: https://gitee.com/xinyucode/anime-blog-demo1

让我们一起记录技术成长的每一天! 🚀