🛠️ 技术栈

这里是构建和维护本博客使用的技术栈，涵盖框架、组件、构建工具与部署方案。

🌐 前端

框架与主题

• Hexo v8.1.x - 基于 Node.js 的静态博客框架
• hexo-theme-butterfly v4.3.1 - 博客主题，基于官方 Butterfly 深度魔改（首页轮播、公告卡片、侧边栏、页脚等大量自写样式与组件）

渲染

• Pug / EJS - 模板引擎
• Stylus - CSS 预处理器
• hexo-renderer-markdown-it v7.x - Markdown 解析器，配套 markdown-it-container / deflist / emoji / mark 扩展

组件与插件

• hexo-butterfly-swiper - 首页轮播图
• hexo-butterfly-tag-plugins-plus - 标签外挂插件
• hexo-tag-aplayer - 音乐播放器（八音盒页面）
• hexo-pdf / hexo-tag-map - PDF 与地图嵌入
• hexo-butterfly-wowjs - 滚动动画
• vanilla-lazyload - 图片懒加载
• hexo-butterfly-clock-anzhiyu - 侧边栏电子钟
• hexo-filter-gitcalendar - 贡献日历图
• Iconfont + Font Awesome - 图标与动画

⚙️ 构建与优化

• Gulp v4（hexo generate && gulp）
  • gulp-terser - JS 压缩
  • gulp-clean-css - CSS 压缩
  • gulp-htmlclean + gulp-html-minifier-terser - HTML 压缩与清理
• hexo-abbrlink - 文章短链接
• hexo-wordcount-fomal - 字数统计与阅读时长
• hexo-generator-search - 站内本地搜索（search.xml）
• hexo-generator-feed - RSS 订阅
• hexo-generator-sitemap - 站点地图

🚀 部署与运维

• Vercel - 主站构建与托管（推送 main 分支自动部署），cf3012.eu.org / www.cf3012.cn
• GitHub Actions + GitHub Pages - 镜像站 blog.cf3012.eu.org
• Cloudflare - DNS 与边缘加速
• 自建 Cloudflare Worker（wrangler 管理）- 原神官方壁纸同步接口，支持横/竖屏与 seed 选图，用作随机封面与公告背景
• Umami - 自建访问统计（三站数据独立）
• Waline - 留言板评论系统
• 自建 bbapi - 唠叨页面数据接口（ispeak.json）

📦 项目结构

├── scaffolds/          # 文章模板
├── source/             # 源文件目录
│   ├── _posts/         # 博客文章
│   ├── personal/       # 个人页面（关于/技术栈/唠叨）
│   └── ...
├── themes/butterfly/   # 主题源码
├── workers/            # Cloudflare Worker 源码与部署配置
├── scripts/            # 自定义脚本（IndexNow 提交等）
├── gulpfile.js         # Gulp 构建脚本
└── package.json        # 项目依赖

🎯 开发工作流

# 安装依赖
npm install

# 本地开发预览
npm run server

# 构建静态文件（hexo generate + gulp 压缩）
npm run build

# 清理缓存
npm run clean

# 部署壁纸 Worker
npm run worker:deploy

🔧 技术特点

• JAMstack 架构 - 纯静态站点，构建即发布
• 多线部署 - Vercel 主站 + GitHub Pages 镜像，域名统一走 Cloudflare
• 站点差异化 - 按访问域名隐藏部分文章，统计独立
• 构建管道 - Gulp 压缩 HTML/CSS/JS，产物开箱即用

---

💡 技术栈选择的目标：美观、功能丰富、易于维护。构建环境为 Node.js v20（Vercel / Actions），本地开发使用 Node v26。