使用 Astro 作为站点框架,页面按 src/pages 文件路径自动生成路由
astro-landing-page — Astro 企业官网模板
作者 Jungley8
基于 Astro 与 Tailwind CSS 的落地页模板,包含首页、定价、博客、联系与登录等页面,采用 MIT 许可发布。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
样式由 Tailwind CSS 承担,配置文件为 tailwind.config.cjs
组件层同时包含 .astro 与 .tsx 文件,说明项目集成了 React 组件
页面覆盖首页、定价、博客列表与详情、联系、登录和 404
仓库采用 MIT 许可,附标准许可文本,可免费使用、修改与分发
README 提供 Vercel 一键部署入口与在线演示地址
模板详细介绍
该模板是一个用 Astro 构建、以 Tailwind CSS 负责样式的落地页项目,仓库描述为「A Tailwind CSS landing page built with Astro」。页面结构清晰:src/pages 下包含首页 index.astro、定价页 price.astro、联系页 contact.astro、登录页 signin.astro、404 页,以及 blog 目录下的列表页 index.astro 与动态详情页 [id].astro。组件层混合使用 Astro 与 React:Card.astro、Layout.astro 为 Astro 组件,BlogPostCard、CTA、Data、Feature、Newsletter、Price、Signin、Stats 以及 Header、Footer 为 .tsx 组件,说明项目同时依赖 React 集成。样式配置位于根目录 tailwind.config.cjs,静态资源放在 public/。README 给出的初始化命令为 yarn create astro --template jungley8/astro-landing-page,开发服务器默认运行在 localhost:3000,构建产物输出到 ./dist/。仓库提供 Vercel 一键部署入口,并附有在线演示地址。许可方面,仓库根目录包含标准 MIT 许可文本,允许免费使用、修改、商用与分发该版本代码,分发时需保留版权声明与许可声明;演示图片、字体、图标等第三方素材以及域名、托管等外部服务不在该许可覆盖范围内,需另行核对与承担费用。
适合你的项目吗?
适用场景
- 搭建产品落地页,并需要同时包含定价、博客与联系等常见子页面
- 以 Astro 为主、局部使用 React 组件的前端项目起步
- 需要博客列表与按 id 动态生成详情页的静态站点
- 希望直接部署到 Vercel 并保留在线演示参考的项目
适合人群
- 熟悉 Astro 与 Tailwind CSS、希望快速获得多页面落地页骨架的开发者
- 接受在 Astro 项目中混用 React 组件的团队
- 需要 MIT 许可、可自由修改与商用的项目
- 准备使用 Vercel 托管静态站点的个人或小型团队
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
使用 yarn create astro --template jungley8/astro-landing-page 初始化项目
- 2
依赖安装执行 yarn,本地开发执行 yarn dev,默认地址为 localhost:3000
- 3
构建执行 yarn build,产物输出到 ./dist/,可用 yarn preview 本地预览
- 4
可通过 yarn astro ... 运行 Astro CLI 命令,yarn prettier 格式化代码
- 5
部署前请自行核对演示图片、字体、图标等第三方素材的许可,并确认托管等外部服务费用
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
https://github.com/Jungley8/astro-landing-page/blob/main/LICENSEhttps://github.com/Jungley8/astro-landing-page/blob/main/README.mdPermission is hereby granted, free of charge
许可证原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 72 / 100
- 技术栈
- Astro
- 网站类型
- 企业官网
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2024-03-04
- 截图检查日期
- 2026-10-01
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 8370dad015bfe96b28f234d603dc82fadebf05eced550d47da69ff63f97e56bb
2026-10-01T02:02:04.282Z
来源文件 / 仓库# Astro landing-page ``` yarn create astro --template jungley8/astro-landing-page ``` ## 🚀 Project Structure Inside of your Astro project, you'll see the following folders and files: ``` / ├── public │ └── favicon.svg ├── src │ ├── components │ │ ├── BlogPostCard.tsx │ │ ├── CTA.tsx │ │ ├── Card.astro │ │ ├── Data.tsx │ │ ├── Feature.tsx │ │ ├── Newsletter.tsx │ │ ├── Price.tsx │ │ ├── Signin.tsx │ │ └── Stats.tsx │ ├── env.d.ts │ ├── layouts │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ └── Layout.astro │ └── pages │ ├── 404.astro │ ├── blog │ │ ├── [id].astro │ │ └── index.astro │ ├── contact.astro │ ├── index.astro │ ├── price.astro │ └── signin.astro ├── tailwind.config.cjs └── 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. There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. Any static assets, like images, can be placed in the `public/` directory. ## 🧞 Commands All commands are run from the root of the project, from a terminal: | Command | Action | | :------------------ | :----------------------------------------------- | | `yarn` | Installs dependencies | | `yarn dev` | Starts local dev server at `localhost:3000` | | `yarn build` | Build your production site to `./dist/` | | `yarn preview` | Preview your build locally, before deploying | | `yarn astro ...` | Run CLI commands like `astro add`, `astro check` | | `yarn astro --help` | Get help using the Astro CLI | | `yarn prettier` | Formate and beautify your code | ## 👀 Want to learn more? Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). ## Demo [astro-landing-page demo](https://astro-landing-page-jet.vercel.app) ## Deploy Host your own live version of Astro-landing-page with Vercel. [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FJungley8%2Fastro-landing-page)
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

astrowind
⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.
Astro · 博客

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

Tailcast
Dark-themed website template built on Astro and Tailwind CSS
Astro · 企业官网

Positivus
A stunning and versatile Astro theme designed for digital marketing agencies.
Astro · 企业官网

qwind
⭕️ Qwind: A template to make your website using Qwik + Tailwind CSS.
Astro · 工具站

agency-landing-page-Astrojs
A simple agency landing page made with astrojs and tailwindcss
Astro · 企业官网
