一个基于 Astro 构建的现代化个人博客，注重性能、阅读体验和简洁设计。

在线预览: iwhy.dev

• 高性能 - Lighthouse 100 分，默认零 JavaScript
• 暗黑模式 - 自动跟随系统或手动切换，偏好持久化
• 响应式设计 - 完美适配桌面、平板、手机
• 内容管理 - 基于 Astro Content Collections，类型安全
• 分类与标签 - 灵活的内容组织方式
• 周刊功能 - 定期发布精选内容
• 评论系统 - 集成 Giscus，基于 GitHub Discussions
• SEO 优化 - 自动生成 Sitemap、RSS、OpenGraph
• 页面过渡 - View Transitions API 平滑动画
• 代码高亮 - 支持一键复制代码块
• 文章目录 - 自动生成侧边栏目录导航

• Node.js 18+
• pnpm (推荐) 或 npm

# 克隆项目
git clone git@github.com:iyhub/iwhy.dev.git
cd iwhy.dev

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

访问 http://localhost:4321 查看效果。

src/
├── assets/            # 图片等静态资源
├── components/        # 组件
│   ├── Header.astro   # 导航栏
│   ├── Footer.astro   # 页脚
│   ├── PostCard.astro # 文章卡片
│   ├── Comment.tsx    # 评论组件
│   ├── TOC.astro      # 文章目录
│   └── ...
├── content/           # 内容集合
│   ├── posts/         # 文章 (Markdown/MDX)
│   ├── weekly/        # 周刊
│   └── categories/    # 分类定义
├── layouts/           # 布局模板
│   ├── BaseLayout.astro
│   └── PostLayout.astro
├── pages/             # 页面路由
│   ├── index.astro    # 首页
│   ├── about.astro    # 关于
│   ├── projects.astro # 项目展示
│   ├── posts/         # 文章列表与详情
│   ├── categories/    # 分类页
│   ├── tags/          # 标签页
│   └── weekly/        # 周刊页
├── styles/
│   └── global.css     # 全局样式
├── consts.ts          # 站点配置
└── content.config.ts  # 内容集合配置

编辑 src/consts.ts：

export const SITE_TITLE = '你的博客名称';
export const SITE_DESCRIPTION = '博客描述';
export const SITE_AUTHOR = '作者名';

1. 在 giscus.app 配置你的仓库
2. 修改 src/consts.ts 中的 COMMENT_CONFIG：

export const COMMENT_CONFIG = {
  repo: 'your-username/your-repo',
  repoId: 'your-repo-id',
  category: 'Announcements',
  categoryId: 'your-category-id',
};

修改 astro.config.mjs：

export default defineConfig({
  site: 'https://your-domain.com',
  // ...
});

在 src/content/posts/ 下创建 .md 或 .mdx 文件：

---
title: '文章标题'
description: '文章描述'
pubDate: 2025-01-01
category: 'tech'
tags: ['tag1', 'tag2']
cover: './cover.png'  # 可选
draft: false          # 草稿不会发布
---

文章内容...

在 src/content/categories/ 下创建 JSON 文件：

{
  "name": "分类名称",
  "description": "分类描述"
}

文件名即为分类 ID，在文章中通过 category: 'filename' 引用。

1. Fork 本仓库
2. 在 Vercel 中导入项目
3. 自动检测 Astro 框架并部署

pnpm build

上传 dist/ 目录到 Cloudflare Pages。

pnpm build
# 将 dist/ 目录部署到任意静态服务器

主题颜色定义在 src/styles/global.css：

:root {
  --accent: #007AFF;      /* 主题色 */
  --black: rgb(28, 28, 30);
  --gray: rgb(142, 142, 147);
  /* ... */
}

项目使用 霞鹜文楷 作为中文字体。

/* global.css */
@import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/style.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

• Astro - 优秀的静态站点框架
• 霞鹜文楷 - 优雅的开源中文字体
• Giscus - 基于 GitHub Discussions 的评论系统

MIT

如果这个项目对你有帮助，欢迎 Star 支持！