Blog

Vue 3 个人博客与文章管理套件。主站通过 GitHub Pages 提供内容，桌面端（Electron）“文章管理器”用来编辑 Markdown、维护元数据并一键提交、部署。

目录结构

├─ src/                     # 博客前端源码（Vue 3 + Vite）
├─ public/                  # 静态资源与 manifest
├─ dist/                    # 前端构建产物（CI 生成）
├─ article-manager/         # Electron 文章管理器源码
│  ├─ src/renderer          # 渲染进程（Vue 3）
│  ├─ electron/             # 主进程与 preload
│  └─ release/              # 打包输出（已加入 .gitignore）
├─ scripts/generate-404.js  # 构建后生成 404.html
├─ README_DEPLOY.md         # 部署手册
└─ vite.config.js           # 前端构建配置

功能亮点

• 🎨 Vue 3 博客前端：Markdown 渲染、代码高亮、响应式布局。
• ⚡ 自动部署：main 分支 push 触发 GitHub Actions，构建并发布至 gh-pages。
• 🖥️ 文章管理器：桌面端工具支持文章 CRUD、元数据管理、Git 提交与部署一键完成。
• 💾 博客路径缓存：Electron App 首次选择仓库目录后持久化保存，便携包开箱即用。
• 🔒 发布安全：自动生成提交信息（如“新建文章XXX”），并在删除文章时同步移除 metadata。

快速上手

环境需求

• Node.js 20.19+（或 22.12+）
• npm 10+
• Git

安装依赖

git clone https://github.com/whyself/Blog.git
cd Blog
npm ci

# 文章管理器依赖（首次使用时执行）
cd article-manager
npm install

本地开发

# 前端网站
cd Blog
npm run dev
# 浏览器访问 http://localhost:5173

# 文章管理器
cd article-manager
npm run dev
# Electron 启动后选择博客仓库目录

构建 & 部署

# 前端静态站点
npm run build                # 生成 dist/

# GitHub Pages（CI 已自动执行）
npm run deploy               # 可选：手动推送到 gh-pages

# 文章管理器打包（生成便携式 exe）
cd article-manager
npm run make
# 输出位于 article-manager/release/

更多部署细节参考 README_DEPLOY.md。

文章管理器使用说明

1. 启动应用后若未找到仓库，会提示选择博客根目录（含 src/articles）。
2. 侧栏可查看文章列表、创建/删除 Markdown 文件。
3. 编辑器区支持 Markdown 编写；保存后自动刷新 Git 状态。
4. 元数据面板维护 metadata.js，保存时会写入/更新对应条目。
5. “提交并部署”会：
   • 根据 git status 自动生成提交信息（新建/修改/删除文章）。
   • 执行 git add、git commit、git push。
   • 依次运行 npm run build 与 npm run deploy。
   • 在界面输出完整日志。
6. 删除文章时，会同步从 metadata.js 移除对应记录。

打包产物较大，已通过 .gitignore 排除 article-manager/release/，避免推送到仓库。若误提交，可使用 git filter-repo 清理历史。

技术栈

• 前端：Vue 3、Vue Router、Vite、Markdown-It、Highlight.js
• 部署：GitHub Actions + gh-pages
• 文章管理器：Electron 31、electron-vite、electron-builder、electron-store

常见问题

问题	排查建议
Electron 启动报错 Cannot find module 'electron-store'	重新安装依赖，确保 article-manager/package.json 中版本为 ^8.1.0 并运行 npm install
打包版执行 npm/ Git 命令失败 spawn EINVAL	Windows 下需使用最新代码（已改为 cmd.exe /c 执行 npm）
.exe 无法推送到 GitHub	GitHub 单文件限制 100 MB，已在 .gitignore 忽略；如已加入历史，用 git filter-repo --path ... --invert-paths 清理
部署后页面 404	检查 vite.config.js 中 base 是否为 /Blog/，并确认 gh-pages 分支存在最新构建

贡献 & 反馈

欢迎 Issue / PR，或直接联系仓库作者 whyself。也可通过文章管理器的日志、控制台等方式收集调试信息，提交反馈时附上。

---

Made with ❤️ by WhySelf