基于 Astro 构建,样式使用 Skeleton CSS
Astro-idol — Astro SaaS模板
作者 LaB-CH3
Astro Idol 是一个基于 Astro 与 Skeleton CSS 的微型 SaaS 产品落地页模板,采用 MIT 许可,包含首页所需的常见区块组件。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
提供 Header、Hero、Brief、Customer、Pricing、Footer 等首页区块组件
页面路由由 src/pages 下的 .astro 或 .md 文件决定,静态资源放在 public 目录
README 列出安装、开发、构建、预览及 Astro CLI 的 npm 命令
公开仓库版本采用 MIT 许可,可免费使用、修改、商用与分发
模板详细介绍
Astro Idol 是面向微型 SaaS 产品的落地页模板,使用 Astro 构建,样式基于 Skeleton CSS。项目结构清晰:src/components 下提供 Brief、Customer、Footer、Header、Hero、Pricing 六个区块组件,src/layouts/Layout.astro 提供页面布局,src/pages/index.astro 为首页入口;public 目录用于放置 favicon 等静态资源。README 给出的命令覆盖依赖安装、本地开发(默认 localhost:3000)、生产构建(输出到 ./dist/)、本地预览构建结果,以及通过 npm run astro 调用 Astro CLI。仓库公开版本采用 MIT 许可,允许使用、修改、商用与分发,但需保留版权与许可声明;README 同时提到存在付费的 Astrodol Pro 版本,本次收录不包含该付费内容。演示图片、字体、图标等第三方素材需单独核对其许可,域名、托管等外部服务可能另行收费。
适合你的项目吗?
适用场景
- 为微型 SaaS 产品搭建单页落地页
- 作为 Astro 项目起步模板,替换文案与区块内容
- 在已有 Astro 站点中参考其组件划分与布局方式
适合人群
- 需要快速搭建 SaaS 产品介绍页的开发者
- 使用 Astro 并希望以组件方式组织首页区块的团队
- 接受 MIT 许可条款、需自行核对第三方素材授权的使用者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
运行 npm install 安装依赖,npm run dev 启动本地开发服务器(默认 localhost:3000)
- 2
使用 npm run build 生成生产站点到 ./dist/,npm run preview 在部署前本地预览构建结果
- 3
可通过 npm run astro ... 执行 astro add、astro check 等 CLI 命令
- 4
README 提及付费的 Astrodol Pro 版本,本次收录的免费代码不包含该版本内容
- 5
演示图片、字体、图标等第三方素材需按各自许可单独核对,域名与托管等服务可能另外收费
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 项目资料提及可选付费版本或功能;本次仅收录公开免费代码,不包含付费升级。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- README 明确指向付费的 Astrodol Pro 版本;免费仓库不包含该 Pro 版本内容,Pro 功能需另行付费获取。
- 该链接指向作者的其他模板集合,属于外部资源,并非本模板的组成部分。
- README 请求用户自愿捐赠支持作者,属可选的赞助请求,不影响免费使用。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
### Upgrade to Astrodol Pro version
README 原文
Check out [LAB-CH3](https://github.com/LaB-CH3) for a growing collection of current and future templates.
README 原文
https://github.com/LaB-CH3/Astro-idol/blob/main/LICENSEhttps://github.com/LaB-CH3/Astro-idol/blob/main/README.mdIf you’ve found this helpful, consider fueling my creativity!
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-04。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- Astro Themes
- 资料与维护参考分
- 资料较完整 · 92 / 100
- 技术栈
- Astro
- 网站类型
- SaaS · 企业官网 · 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-01-28
- 截图检查日期
- 2026-10-04
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-05
查看当时使用的来源资料
SHA-256: 2574f09697092e82cdc511b97ed3abd5aa1dfe39a08b3bb2e200d58f15ac6957
2026-10-04T17:45:48.696Z
来源文件 / 仓库# Astro Idol
Landing page template for mirco SaaS products
### Live demo
(https://idol.indiebold.com/)
### Upgrade to Astrodol Pro version
(https://idolpro.indiebold.com/)
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```
/
├── public/
│ └── favicon.svg
├── src/
├── assets/
│ ├── components/
│ │ └── Brief.astro
└── Customer.astro
└── Footer.astro
└── Header.astro
└── Hero.astro
└── Pricing.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
Any static assets, like images, can be placed in the `public/` directory.
## Preview

## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Curious to Explore More?
Check out [LAB-CH3](https://github.com/LaB-CH3) for a growing collection of current and future templates.
If you’ve found this helpful, consider fueling my creativity!
[](https://ko-fi.com/indieteamofone)
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

astrowind
⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.
Astro · 博客
accessible-astro-starter
Accessible Astro Starter 是一个以无障碍为核心理念的 Astro 6 启动模板,由 incluud 团队维护。
Astro · 博客

astro-erudite
An opinionated, unstyled static blogging template built with Astro and native CSS.
Astro · 作品集

astro-landing-page
An Astro + Tailwind CSS Example/Template for Landing Pages
Astro · 企业官网

astro-shopify
astro-shopify 是一个面向开发者的轻量级电商启动模板,用于构建基于 Shopify 的无头店面。
Astro · 电商

brutal
A neobrutalism Astro starter theme
Astro · 启动器
