个人技术博客 (Personal Tech Blog)

这是一个基于 Astro 构建的现代化个人技术博客。它结合了极简的设计美学和强大的开发者功能，旨在提供最佳的写作和阅读体验。

✨ 主要功能

⚡️ 极速性能: 基于 Astro 的静态站点生成 (SSG)，提供极致的加载速度和 Lighthouse 满分体验。
🎨 现代设计:
- 首页采用独特的极光背景效果 (Aurora Effect)。
- 完整支持 深色模式 (Dark Mode)，并在评论区自动适配。
- 响应式布局，完美适配移动端和桌面端。
📝 内容创作:
- 支持 Markdown 和 MDX 编写文章。
- 集成 Expressive Code，提供漂亮的语法高亮和代码块样式。
- 支持数学公式 (MathJax/KaTeX) 和图表。
💬 评论系统: 集成 Giscus，基于 GitHub Discussions 的评论系统，无需后端数据库，支持 GitHub 登录。
🏷️ 内容组织:
- 智能标签云 (Smart Tag Cloud): 可视化展示文章标签。
- 归档页 (Archives): 按时间线归档历史文章。
- 项目页 (Projects): 展示 GitHub 开源项目或个人作品。
🔍 SEO 优化: 自动生成 Sitemap 和 RSS 订阅源，内置规范的 OpenGraph 元数据。

📂 项目结构

├── public/              # 静态资源 (图片, favicon, 字体等)
├── src/
│   ├── assets/          # 博客文章使用的本地图片资源
│   ├── components/      # 通用组件 (Header, Footer, TagCloud 等)
│   ├── content/         # 博客文章内容 (Markdown/MDX 文件)
│   ├── layouts/         # 页面布局模板 (BaseLayout, BlogPost 等)
│   ├── pages/           # 页面路由
│   │   ├── index.astro      # 首页 (自定义设计)
│   │   ├── blog/            # 博客列表及文章页
│   │   ├── projects/        # 项目展示页
│   │   ├── archive/         # 归档页
│   │   └── tags/            # 标签聚合页
│   ├── styles/          # 全局样式 (CSS)
│   └── consts.ts        # 站点全局常量配置
├── astro.config.mjs     # Astro 配置文件
└── package.json         # 项目依赖管理

🚀 快速开始

前置要求

Node.js (推荐 v18 或更高版本)

安装依赖

npm install

本地开发

启动本地开发服务器，实时预览修改：

npm run dev

访问地址: http://localhost:4321

构建部署

构建生产环境静态文件：

npm run build

构建产物将输出到 dist/ 目录。

⚙️ 配置说明

基础信息

在 src/consts.ts 中修改站点标题、描述等基础信息。

评论系统 (Giscus)

给评论仓库安装 giscus GitHub App。
打开 giscus 配置页，填入仓库 demonerdpity/astro-blog-comments，选择一个 Discussion 分类，复制生成结果里的 4 个核心字段。
把配置写进 src/content/site/settings.yaml：

giscus:
  repo: "demonerdpity/astro-blog-comments"
  repoId: "R_kgDOS0_Qcw"
  category: "Announcements"
  categoryId: "DIC_kwDOS0_Qc84C-y-q"
  mapping: "pathname"
  strict: "0"
  reactionsEnabled: "1"
  emitMetadata: "0"
  inputPosition: "bottom"
  theme: "preferred_color_scheme"
  lang: "zh-CN"

这些字段会在构建时直接进入文章页，不需要再去 Vercel 配这组 Giscus 环境变量。配置完成后重新部署一次，评论区就会出现在每篇文章正文下方。

demonerdpity.github.io