Ameng's Blog - 个人技术博客

一个基于 Astro 构建的现代化静态博客系统，专注于技术分享和知识沉淀。

✨ 特性

🚀 现代技术栈

• Astro 4.x - 高性能静态站点生成器
• TypeScript - 类型安全的开发体验
• Tailwind CSS - 实用优先的 CSS 框架
• Svelte 5 - 交互式组件支持
• Biome - 快速的前端工具链

📝 内容管理

• Markdown 优先 - 专注于内容创作
• 内容集合 - 类型安全的文章管理
• 多语言支持 - 中英文内容展示
• 标签分类 - 灵活的内容组织
• 搜索功能 - 基于 Pagefind 的全文搜索

🎨 用户体验

• 暗色/亮色模式 - 自动跟随系统偏好
• 响应式设计 - 完美适配各种设备
• 快速加载 - 优化的性能表现
• 平滑过渡 - 页面切换动画
• 可访问性 - 符合 WCAG 标准

🔧 开发工具

• 自动部署 - GitHub Actions CI/CD
• 代码检查 - Biome 代码格式化
• 类型检查 - TypeScript 严格模式
• 构建优化 - 图片压缩、代码分割
• SEO 优化 - 自动生成 sitemap 和 RSS

📁 项目结构

mysite/
├── src/
│   ├── components/     # 可复用组件
│   │   ├── control/    # 控制组件
│   │   ├── misc/       # 杂项组件
│   │   └── widget/     # 侧边栏组件
│   ├── content/        # 博客内容
│   │   └── posts/      # 文章目录
│   │       ├── guide/  # 指南类文章
│   │       ├── javascript/ # JavaScript 文章
│   │       └── network/    # 网络技术文章
│   ├── layouts/        # 页面布局
│   ├── pages/          # 页面路由
│   ├── styles/         # 样式文件
│   └── utils/          # 工具函数
├── public/             # 静态资源
├── scripts/            # 构建脚本
└── config/             # 配置文件

🚀 快速开始

环境要求

• Node.js 18+
• pnpm 8+ (推荐) 或 npm 9+ / yarn 1.22+

安装依赖

# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

开发模式

# 启动开发服务器
pnpm run dev

# 访问 http://localhost:4321

构建项目

# 构建生产版本
pnpm run build

# 预览构建结果
pnpm run preview

创建新文章

# 使用脚本创建新文章
pnpm run new-post

# 或手动在 src/content/posts/ 目录创建

📚 内容管理

文章格式

每篇文章使用 Markdown 格式，包含必要的 frontmatter：

---
title: 文章标题
description: 文章描述
published: 2026-03-13  # 发布日期
updated: 2026-03-13   # 更新日期
tags: [标签1, 标签2]   # 文章标签
category: 分类名称     # 文章分类
draft: false          # 是否为草稿
lang: zh-CN           # 文章语言
---

内容分类

• JavaScript - ECMAScript 新特性、语言技巧
• 网络技术 - HTTP/HTTPS、WebSocket、API 设计、性能优化、网络安全
• 指南教程 - 使用指南、开发教程
• 其他 - 杂项、思考、生活

🛠️ 开发指南

添加新组件

1. 在 src/components/ 下创建组件文件
2. 使用 Astro、Svelte 或纯 HTML/CSS/JS
3. 在需要的地方导入使用

修改样式

• 全局样式：src/styles/main.css
• 组件样式：使用 Tailwind CSS 类名
• 自定义样式：src/styles/variables.styl

配置修改

• 博客配置：src/config.ts
• 构建配置：astro.config.mjs
• 主题配置：src/styles/variables.styl

📦 部署

自动部署

项目已配置 GitHub Actions，推送到 main 分支会自动部署：

1. Vercel - 自动部署到 Vercel
2. GitHub Pages - 可配置为 GitHub Pages
3. 自定义服务器 - 构建后上传到任何静态主机

手动部署

# 构建项目
pnpm run build

# dist/ 目录包含所有静态文件
# 上传到你的静态主机

🔧 技术栈详情

核心框架

• Astro - 静态站点生成器
• TypeScript - 类型系统
• Tailwind CSS - 样式框架

内容系统

• Pagefind - 静态搜索
• Remark - Markdown 处理
• Rehype - HTML 处理

交互组件

• Svelte - 组件框架
• Swup - 页面过渡
• PhotoSwipe - 图片查看器

开发工具

• Biome - 代码格式化
• PostCSS - CSS 处理
• Sharp - 图片优化

📄 许可证

本项目采用 MIT 许可证。

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建功能分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 开启 Pull Request

📞 联系

• GitHub: @ameng404
• 博客: 访问博客

🙏 致谢

感谢以下开源项目的贡献：

• Astro - 优秀的静态站点框架
• Tailwind CSS - 实用的 CSS 框架
• 所有依赖库的维护者

---

⭐ 如果这个项目对你有帮助，请给个 Star！