Astro作品集启动器

astro-starter-portfolio — Astro 作品集模板

作者 BracoZS

极简 Astro 作品集模板，Tailwind v4 与严格 TS，零 JS 默认，内容集合驱动。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

Astro 7 静态输出，默认零客户端 JavaScript

Tailwind CSS v4，CSS-first 配置，无需 tailwind.config.js

Content Collections 搭配 Zod schema，Markdown 文件驱动项目内容

类名切换的明暗模式，无样式闪烁

Astro Fonts API 自托管 Google Fonts，无第三方请求

严格 TypeScript，路径别名，Prettier 预配置

模板详细介绍

这是一款为 Astro 打造的极简作品集模板，适合希望快速上线且视觉上足够专业的个人开发者。它默认输出静态站点，不附带任何客户端 JavaScript，也没有引入组件库或状态管理，整体结构非常干净。模板的核心内容结构是首页、关于页、项目列表页与详情页，项目通过 Content Collections 管理，每篇 Markdown 文件对应一个作品，并配有 Zod 类型校验。

视觉与交互上，模板用五个 CSS 变量控制全部配色，两个字体变量统一样式，支持明暗模式切换，且通过 Astro Fonts API 自动托管 Google Fonts，避免第三方请求和布局偏移。SEO 方面预设了 canonical、Open Graph、Twitter Card 和 sitemap，适合对基础 SEO 有要求的项目。由于没有 CMS 或 UI 库，它更适合那些愿意自己维护内容、不希望被框架束缚的开发者。

需要注意的是，README 中明确说明不包含状态管理、UI kit 或 CMS 集成，这些需要按需自行添加。部署前务必修改 astro.config.mjs 中的 site 字段，以确保 sitemap 和 canonical 正确。模板的许可证为 MIT，可自由用于个人或商业项目。

Astro作品集启动器

适合你的项目吗？

适用场景

个人作品集网站
开发者个人主页
轻量级项目展示页
快速原型或启动器

适合人群

熟悉 Astro 或静态站点的开发者
需要快速部署且注重性能的独立开发者
希望完全控制内容结构，不依赖 CMS 的用户

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后使用 pnpm install 安装依赖，pnpm dev 启动开发服务器。
2
修改 src/site.config.ts 中的个人信息，编辑 src/styles/global.css 顶部的 CSS 变量调整配色，替换 public/og-image.png 为 1200×630 的图片。
3
在 src/content/work/ 中添加 Markdown 文件来新增项目，注意遵循 schema 要求的 frontmatter。
4
部署前更新 astro.config.mjs 中的 site 字段为真实域名。

查看仓库使用说明