Astro启动器

stargarden — Astro 启动器模板

作者 sustanza

StarGarden 是一个基于 Astro 的 Markdown 内容站点启动模板,包含博客文章与静态页面集合、主题切换、搜索、RSS 与 SEO 元信息等基础配置。

看看你的网站会是什么样

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

1 个预览视图
作者提供的预览
作者提供的预览首屏预览

来自项目 README 的原始预览。

目前有 1 张原始预览,可打开完整图片查看设计细节。

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-05查看来源

值得关注的模板亮点

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

01

内容以 Markdown 组织,文章与静态页面分别放在 src/content/posts/ 和 src/content/pages/,schema 定义在 src/content.config.ts

02

内置 Tailwind 与 DaisyUI 的浅色 corporate 与深色 business 主题,首次访问跟随系统偏好,切换结果保存在 localStorage

03

构建期生成 Pagefind 搜索索引,并提供移动端与桌面端搜索界面

04

BaseHead 组件统一输出 OpenGraph、Twitter Card、canonical 与 JSON-LD Organization 等 SEO 元信息

05

提供 sitemap、跟随 site 配置的动态 robots.txt,以及包含全文 HTML 和封面图 enclosure 的 /rss.xml

06

包含 Vitest 单元测试与 Playwright 端到端冒烟测试,以及 Prettier 格式化脚本

模板详细介绍

StarGarden 是 sustanza 在 GitHub 上以 MIT 许可发布的 Astro 启动模板,定位为用 Markdown 驱动内容、开箱即用的静态站点起点。仓库提供作者预览图,并在 Astro 官方主题页有展示与在线演示地址。

模板自带内容集合结构:src/content/posts/ 存放文章及其封面图,src/content/pages/ 以 <slug>/index.md 形式提供 About、Privacy、TOS、FAQ 等静态页面,集合 schema 定义在 src/content.config.ts。组件层包含 BaseHead、Navbar、Footer、ThemeToggle 与 Landing;页面层包含首页、文章列表、动态 slug 路由、404、robots.txt 与 rss.xml。样式使用 Tailwind 与 DaisyUI,提供 corporate 浅色与 business 深色两套主题,首次访问遵循 prefers-color-scheme,用户切换结果存入 localStorage。

功能面还包括通过 ClientRouter 实现的视图过渡、悬停预取的链接预加载、构建期生成的 Pagefind 搜索索引、手写的 BaseHead SEO 输出(OpenGraph、Twitter Card、canonical、JSON-LD Organization)、跟随 site 配置的 sitemap 与动态 robots.txt、输出全文 HTML 与封面图 enclosure 的 RSS 源、跟随 data-theme 的 Expressive-code 明暗语法高亮,以及阅读时长与标题锚点。工程侧配有 Vitest 单元测试与 Playwright 端到端冒烟测试,以及 Prettier 格式化脚本。

使用上有几处明确限制:Pagefind 索引的是构建后的 HTML,npm run dev 下搜索框可见但无结果,需先构建或使用 preview:search 脚本;自定义 404 页面依赖托管方自动以 404 状态返回 404.html,自托管 nginx 等静态服务器可能需要额外配置;RSS 中正文内联的本地 Markdown 图片路径无法在订阅端解析,需要改为 public/ 下的绝对路径或 https 地址。

Astro启动器

适合你的项目吗?

适用场景

  • 用 Markdown 写文章并需要文章列表、详情页与 RSS 输出的个人博客
  • 需要 About、Privacy、TOS、FAQ 等静态页面与文章共存的站点
  • 希望自带浅色/深色主题切换、站内搜索与基础 SEO 元信息的静态站点
  • 在 Cloudflare Pages、Netlify、Vercel 等能自动以 404 状态返回 404.html 的平台上部署

适合人群

  • 熟悉 Astro 与 Markdown 内容集合、希望从现成结构起步的开发者
  • 需要 MIT 许可下可自由修改与商用的模板代码的团队
  • 接受在构建产物上运行搜索索引、并愿意按脚本流程本地验证搜索的开发者

上手与定制指南

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

  1. 1

    可通过 npm create astro@latest -- --template sustanza/stargarden 创建,或 git clone 后执行 npm install 与 npm run dev,默认地址为 http://localhost:4321/

  2. 2

    fork 后优先修改 src/consts.ts 的 SITE_TITLE 与 SITE_DESCRIPTION、astro.config.mjs 的 site 字段、Footer.astro 中的联系方式与 public/favicon.svg

  3. 3

    Pagefind 搜索在 npm run dev 下无结果,需先 npm run build,或使用 npm run preview:search 一步完成构建与预览

  4. 4

    RSS 正文中的内联 Markdown 图片需改为 public/ 下的绝对路径或 https 地址,否则订阅端无法解析

  5. 5

    自定义 404 页面在自托管 nginx 等静态服务器上可能需要额外配置才能返回正确的 404 状态码

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • Pagefind 搜索索引的是构建后的 HTML,而非源 Markdown。开发模式(npm run dev)下搜索框虽会渲染,但在至少执行过一次 npm run build 之前不会返回任何结果。
  • 本地测试搜索需使用 npm run preview:search 脚本,它会一步完成构建与预览;直接使用开发服务器无法验证搜索功能。
  • 自定义 404 页面依赖托管方自动以 404 状态返回 404.html。Cloudflare Pages、Netlify、Vercel 开箱即用;自托管 nginx 等静态服务器可能需要显式配置才能返回正确的状态码。
  • RSS 正文中内联的本地 Markdown 图片路径无法在订阅端解析。若需在 feed 中显示正文图片,必须将其托管在 public/ 下并使用绝对路径,或改用 https 地址引用。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Pagefind indexes built HTML, not source markdown. The search input renders in dev mode but returns no results until you've run `npm run build` at least once.

README 原文

Use `npm run preview:search` to test search locally — it builds and previews in a single step.

README 原文

Hosts that auto-serve `404.html` with a 404 status (Cloudflare Pages, Netlify, Vercel) work out of the box. Self-hosted nginx or other static servers may need explicit configuration to return the right status code.

README 原文

**Inline markdown images in post bodies** (e.g. `![alt](./img.png)`) are local-only paths that won't resolve in subscribers' readers — host body images in `public/` with absolute paths or reference them by `https://` URL if you need them in the feed.

README 原文
https://github.com/sustanza/stargarden/blob/main/LICENSEhttps://github.com/sustanza/stargarden/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-05。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
Astro Themes
资料与维护参考分
资料较完整 · 79 / 100
技术栈
Astro
网站类型
启动器
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-10-05
截图检查日期
2026-10-05

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-06

查看当时使用的来源资料

SHA-256: 0fa6770df16005fddbe9b25ac8dfe4a6d61041eca33a248d7390a88a8793fa90

2026-10-05T15:19:38.806Z

来源文件 / 仓库
# 🚀 StarGarden Astro Theme

Welcome to the future, traveler — where the splendor of the Atomic Age meets modern Astro web development. **StarGarden** is your trusty rocket for launching simple, markdown-powered websites into cyberspace with unmatched style and efficiency.

![StarGarden Theme](./src/assets/landing-hero.png)

## 🌐 Live Demo

Experience StarGarden in orbit at [stargarden.pages.dev](https://stargarden.pages.dev/).

## 🛠️ Initiate Launch Sequence

Two launch paths. Pick whichever fits your mission profile.

### Option A — clone via Astro's official starter command

```bash
npm create astro@latest -- --template sustanza/stargarden
```

### Option B — fork or clone manually

```bash
git clone https://github.com/sustanza/stargarden.git my-site
cd my-site
npm install
npm run dev
```

Then open `http://localhost:4321/` in your favorite browser.

## 📁 Project Structure

```
.
├── astro.config.mjs        # Astro config: integrations, markdown plugins, site URL
├── src/
│   ├── consts.ts           # SITE_TITLE + SITE_DESCRIPTION — edit when forking
│   ├── components/         # BaseHead, Navbar, Footer, ThemeToggle, Landing
│   ├── layouts/Layout.astro
│   ├── pages/              # index.astro, posts/, [...slug].astro, robots.txt.ts, rss.xml.ts, 404.astro
│   ├── content.config.ts   # Collection schemas (posts + pages)
│   ├── content/
│   │   ├── posts/          # Co-located markdown + cover images
│   │   └── pages/          # About, Privacy, TOS, FAQ (and your own)
│   ├── assets/             # Logo, hero, icons (inline SVG)
│   ├── plugins/            # remark-reading-time
│   ├── scripts/            # Theme controller
│   └── styles/global.css   # Tailwind + DaisyUI imports, Pagefind overrides
├── public/                 # favicon
├── e2e/                    # Playwright smoke tests
└── __tests__/              # Vitest unit tests
```

## 🛰️ Customization Checklist

When you fork this template, the handful of files you'll edit first:

1. **`src/consts.ts`** — set `SITE_TITLE` and `SITE_DESCRIPTION`.
2. **`astro.config.mjs`** — change `site:` to your deployed URL (drives canonical, RSS, sitemap, robots).
3. **`src/components/Footer.astro`** — swap the placeholder email, YouTube handle, and GitHub link for your own.
4. **`public/favicon.svg`** — replace with your favicon.
5. **`src/content/posts/`** — replace or supplement the demo astronomy posts with your own. Frontmatter schema lives in `src/content.config.ts`.
6. **`src/content/pages/`** — edit `about`, `privacy`, `tos`, `faq`, or add new pages following the same `<slug>/index.md` pattern.

## 🌌 Feature Control Panel

- **Astro 6** with content collections + `astro:assets` image optimization.
- **Tailwind CSS v4 + DaisyUI v5** — light (`corporate`) + dark (`business`) themes, honors `prefers-color-scheme` on first visit, persists user toggle in localStorage.
- **View Transitions** via `<ClientRouter />` for SPA-style navigation.
- **Link prefetch** (hover strategy) for snappy clicks.
- **Pagefind search** indexed at build time; integrated mobile + desktop UI.
- **SEO** via a hand-rolled `BaseHead.astro`: OpenGraph, Twitter Card, canonical, JSON-LD Organization — all emitted on every page.
- **Sitemap + dynamic `robots.txt`** that auto-tracks your `site:` config.
- **RSS feed** at `/rss.xml` with full post HTML and cover-image enclosures.
- **Expressive-code** syntax highlighting with paired light/dark themes that follow DaisyUI's `data-theme`.
- **Reading time** + clickable heading anchors on every post.
- **Vitest** unit tests + **Playwright** end-to-end smoke tests.

## 📜 Available Scripts

| Script                   | What it does                                                                             |
| ------------------------ | ---------------------------------------------------------------------------------------- |
| `npm run dev`            | Astro dev server on `http://localhost:4321/` (Pagefind search will be empty — see below) |
| `npm run build`          | Production build into `dist/`, including Pagefind index                                  |
| `npm run preview`        | Serve the built `dist/`                                                                  |
| `npm run preview:search` | Build + preview in one step — use this to test Pagefind search locally                   |
| `npm run test`           | Run Vitest unit tests                                                                    |
| `npm run test:e2e`       | Run Playwright end-to-end tests (boots dev server)                                       |
| `npm run test:ci`        | Build then run Playwright against the production preview                                 |
| `npm run format`         | Format the repo with Prettier                                                            |
| `npm run format:check`   | Verify formatting without writing — CI gate                                              |

## ⚠️ Known Caveats

### Pagefind search is empty under `npm run dev`

Pagefind indexes built HTML, not source markdown. The search input renders in dev mode but returns no results until you've run `npm run build` at least once. Use `npm run preview:search` to test search locally — it builds and previews in a single step.

### Custom 404 page depends on your host

`src/pages/404.astro` builds to `dist/404.html`. Hosts that auto-serve `404.html` with a 404 status (Cloudflare Pages, Netlify, Vercel) work out of the box. Self-hosted nginx or other static servers may need explicit configuration to return the right status code.

### RSS body images won't resolve in feed readers

The RSS feed at `/rss.xml` ships each post's full rendered HTML in `<content:encoded>` plus an `<enclosure>` for the cover image. The cover image enclosure uses absolute URLs and resolves correctly. **Inline markdown images in post bodies** (e.g. `![alt](./img.png)`) are local-only paths that won't resolve in subscribers' readers — host body images in `public/` with absolute paths or reference them by `https://` URL if you need them in the feed.

## 📡 License

StarGarden flies under the [MIT License](LICENSE). Freedom to innovate, explore, and customize — fully endorsed by your friendly local space authority.

## 🤝 Contributing

See [CONTRIBUTORS.md](./CONTRIBUTORS.md). Issues and PRs welcome.

---

Godspeed, future-makers, and happy exploring!
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。