电子小站

一个可直接部署到 GitHub Pages 的现代化静态个人博客。站点采用桌面端双栏、移动端抽屉布局，支持浅色/深色主题、前端搜索、Markdown 文章、投稿反馈弹窗与 Giscus 评论区。

本地运行

npm install
npm run dev

静态构建：

npm run build:pages

构建结果位于 out/。

发布 Markdown 文章

在 posts/ 中新建 .md 文件，并添加 Front Matter：

---
title: "文章标题"
date: "2026-07-31"
categories:
  - "技术笔记"
tags:
  - "JavaScript"
summary: "显示在文章列表中的摘要。"
---

构建阶段会使用 gray-matter 读取 Front Matter，并使用 marked 将正文转换成 HTML。无需 Hexo、Hugo 或额外数据库。

示例文章位于 posts/test-post-2026.md。

GitHub Pages 自动部署

.github/workflows/deploy.yml 会在 main 分支中的文章、页面、样式或构建配置变化时运行。流程会：

1. 安装锁定版本的 Node.js 依赖。
2. 根据仓库类型计算 GitHub Pages 的 basePath。
3. 导出静态站点到 out/。
4. 上传并部署 GitHub Pages。

也可以在仓库 Actions 页面中手动运行工作流。

启用投稿表单

在 app/BlogApp.tsx 中找到：

https://formsubmit.co/your-token-here

将 your-token-here 替换为 FormSubmit 提供的邮箱或随机 token。表单包含提交类型、必填联系方式、详细描述、可选附件与 _honey 防垃圾字段。

启用 Giscus 评论

先在目标 GitHub 仓库中启用 Discussions，并访问 giscus.app 生成配置。然后在 app/posts/[slug]/GiscusComments.tsx 中替换：

YOUR_REPO_ID
YOUR_CATEGORY_ID

常用自定义位置

• 博客名称、简介、社交链接：app/BlogApp.tsx
• Markdown 文章：posts/
• 文章解析：lib/posts.ts
• 颜色、字体、间距与响应式断点：app/globals.css
• SEO 与社交分享信息：app/layout.tsx
• GitHub Pages 工作流：.github/workflows/deploy.yml

技术结构

• Next.js App Router
• React 客户端交互
• gray-matter + marked
• 静态导出，无数据库、无服务器运行时
• GitHub Actions + GitHub Pages
• FormSubmit + Giscus