个人博客

网站地址：

639246942.xyz

开发时间：

2022.11 - 至今（从原生 HTML 一路演进到现在）

个人博客 — 芯火Chipspark

写技术文章、竞赛笔记、像素画和随笔的地方。看着简单，背后是两套 Git 仓库、一条 Webhook 自动部署链路和一堆踩过的坑。

---

项目概述

芯火Chipspark 是我的个人技术博客，覆盖技术文章、竞赛笔记（蓝桥杯）、像素画、随笔、项目作品五个栏目，目前 30+ 篇文章，PC 与移动端适配，支持暗色模式。

它同时是我自己的实验场：主题定制、SEO、自动部署、评论系统、CI 式的发布流程都在这里试过，试砸了也不影响别人。

---

效果展示

首页

首页

文章页

文章页

简历页

简历页

暗色模式

暗色模式

---

核心功能

• 五大栏目 + 标签/分类/时间线三维索引，侧边栏可折叠分组
• Waline 自部署评论系统：邮箱登录、暗黑模式适配、表情包、被回复邮件提醒
• 暗色/浅色主题切换，全站跟随
• 文章元信息：作者、分类、标签、字数、阅读时间
• SEO 全套：sitemap.xml 自动生成、robots.txt、每页 og 标签（分享到社交平台有卡片预览）
• Gitee Webhook 自动部署：push 完不用登服务器
• 证书自动续期（acme.sh + Let's Encrypt + 阿里云 DNS API）

---

技术栈说明

框架：VuePress 2 + VuePress Theme Hope（基于 Vue 3 + Vite + TypeScript）
评论：Waline（自部署，独立子域 waline.639246942.xyz）
服务器：阿里云 ECS（Ubuntu 24.04）+ Nginx 1.24，SSL 终结 + 静态托管
部署：Gitee Webhook → fcgiwrap → deploy.sh → git pull
编辑器：Markdown，图片走 .vuepress/public/ 绝对路径

---

项目架构

源码（Markdown + 主题配置）      D:\PROJ\website\vuepress\src\
        │  ① 构建 npm run docs:build
        ▼
构建产物                        src\.vuepress\dist\
        │  ② 复制进产物仓库
        ▼
产物仓库 personal_website（git） → Gitee FSW_ei/personal-website
        │  ③ push 触发 Webhook
        ▼
服务器 /var/www/html  git pull   → Nginx 443 → 用户
        ▲
源码仓库 blog-source（私有）      Gitee FSW_ei/blog-source

双仓库设计：源码和构建产物分开——源码是私有的（含配置与素材），产物仓库是部署链路的一环，互不干扰。

---

踩过的坑（挑几个有代表性的）

• 不存在的路径返回 502：Nginx 原本把未知路径转发到 localhost:8080，但 8080 根本没服务。改成 try_files ... =404，SEO 才不会被死链拖垮
• 图片放错目录直接挂：VuePress 只拷贝 .vuepress/public/ 下的静态资源，Markdown 同级目录的图片不会进产物——线上图挂了半天才发现
• 正文在 JS chunk 里：内容被编译进 assets/xxx.html-<hash>.js，index.html 里只有标题和目录，用 grep 查不到正文不代表没发布
• 旧构建产物堆积：每次构建哈希都变，旧的 chunk 文件不会自动清理，仓库体积一路涨

---

开发历程

阶段	时间	技术
原生 HTML/CSS/JS + Flask 动态站	2022.11	手写模板
静态化改造	2024	HTML + 手动同步脚本
迁移到 VuePress 2	2025.07	Theme Hope + Waline + Webhook 自动部署
SEO 与工程化	2026.10	sitemap / og 标签 / 双仓库备份 / Nginx 404 修正

自动化程度：写完 Markdown → 一条命令构建 → push → 十秒内上线。全程不登服务器。