
Astro Sphere 是一个源自作者个人网站的静态作品集与博客主题,强调极简和轻量。
它主要使用 Astro、Tailwind 和 TypeScript 构建,只在少量需要状态的组件里使用了 SolidJS。
🚀 自己部署
📋 特性
- ✅ 100 / 100 Lighthouse 性能评分
- ✅ 响应式布局
- ✅ 可访问性友好
- ✅ SEO 友好
- ✅ 完整类型安全
- ✅ 极简风格
- ✅ 浅色 / 深色主题
- ✅ 轻量动画
- ✅ Tailwind 样式体系
- ✅ 自动生成站点地图
- ✅ 自动生成 RSS
- ✅ 支持 Markdown
- ✅ 支持 MDX(可在内容中嵌入组件)
- ✅ 支持搜索文章和项目
💯 Lighthouse 评分

🕊️ 轻量
所有页面体积都控制在 100KB 以内(包含字体)
⚡︎ 快速
本地渲染大约 40ms
📄 配置方式
示例博客文章本身就承担了文档和配置说明的作用。
💻 常用命令
所有命令都在项目根目录执行:
你也可以把 npm 替换成自己习惯的包管理器,例如 pnpm、yarn 或 bun。
| 命令 | 作用 |
|---|---|
npm install | 安装依赖 |
npm run dev | 在 localhost:4321 启动本地开发环境 |
npm run sync | 生成 Astro 模块的 TypeScript 类型 |
npm run build | 构建生产版本到 ./dist/ |
npm run preview | 本地预览构建结果 |
npm run astro ... | 执行 astro add、astro check 等 CLI 命令 |
npm run astro -- --help | 查看 Astro CLI 帮助 |
npm run lint | 执行 ESLint |
npm run lint:fix | 自动修复 ESLint 问题 |
🏛️ 协议
MIT