AstroSvelte启动器

astro-firebase-svelte-tailwind-starter — Astro 启动器模板

作者 Porter-smith

基于 Astro、Svelte、Tailwind 与 Firebase 的最小启动模板，包含登录页与 Firebase 认证配置流程。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图

作者提供的预览

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

作者提供的预览

来自项目 README 的原始预览。

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

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

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

值得关注的模板亮点

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

Astro 与 Svelte 组合的项目骨架

集成 Tailwind 样式方案

提供 Firebase 认证接入说明与配置步骤

附带从 service-account.json 生成 .env 的辅助脚本

演示站点展示简洁的登录界面

代码采用 MIT 许可

模板详细介绍

这是一个用于起步的启动器模板，把 Astro、Svelte、Tailwind 和 Firebase 组合在一起。README 说明其定位是「minimal and accessible」，演示站点展示了一个简洁的登录界面。

模板本身不包含业务页面，主要提供项目骨架与 Firebase 接入路径：需要在 Firebase 控制台生成服务账号私钥、创建 Web 应用并复制配置对象，然后分别写入 .env 与 src/firebase/client.ts；仓库还附带 scripts/createEnvFromServiceAccount.js，可根据根目录下的 service-account.json 自动生成 .env。认证部分需要在 Firebase 控制台启用所需的登录方式。

使用前需注意：Firebase 相关动态功能要自行配置，并核对 Firebase 的额度与收费；演示图片、字体、图标等第三方素材需按各自许可核对。代码采用 MIT 许可，可免费使用、修改、商用和分发，但分发时需保留版权与许可声明。

AstroSvelte启动器

适合你的项目吗？

适用场景

需要快速搭建 Astro + Svelte + Tailwind 项目基础结构
准备在项目中接入 Firebase 身份认证
希望用脚本批量生成 Firebase 环境变量

适合人群

熟悉 Astro 或 Svelte 的前端开发者
需要 Firebase 认证起步模板的团队
想参考最小化登录页实现的项目

上手与定制指南

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

1
克隆仓库后进入目录，使用 pnpm install 安装依赖，pnpm run dev 启动开发服务器
2
在 Firebase 控制台生成服务账号私钥，并将值写入 .env
3
将 Web 应用配置对象填入 src/firebase/client.ts
4
可在根目录放置 service-account.json 后运行 node scripts/createEnvFromServiceAccount.js 生成 .env，完成后删除该文件
5
在 Firebase 控制台启用所需的登录方式

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

使用该模板的认证功能需自行注册并登录 Firebase 控制台，创建项目并获取服务账号私钥与 Web 应用配置，属于外部服务依赖。
登录方式需在 Firebase 控制台手动启用并按其提示配置，模板本身不提供可直接使用的认证后端。
生成 .env 后必须删除根目录下的 service-account.json，否则私钥凭据可能泄露。
README 提及 Firebase 集成；启用相关动态功能前需自行配置，并核对 Firebase 的额度与收费。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Go to the [Firebase Console](https://console.firebase.google.com/).
README 原文

Enable your desired sign-in methods and configure each according to Firebase's prompts.
README 原文

remember to remove the service-account.json from your project's root directory to protect your credentials
README 原文

https://github.com/Porter-smith/astro-firebase-svelte-tailwind-starter/blob/main/LICENSE.txt https://github.com/Porter-smith/astro-firebase-svelte-tailwind-starter/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 77 / 100
技术栈: Astro · Svelte
网站类型: 启动器

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2023-12-26
截图检查日期: 2026-10-02

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: ff4d3986cd73c95a50dccf05f7a5d71ddd992ec3a3b56033eefbb5462f63bd04

2026-10-02T10:35:34.372Z

来源文件 / 仓库

<a href="https://astro-firebase-svelte-starter.vercel.app/">
<img alt="Screenshot of the Astro Firebase Svelte Tailwind starter's Banner showing a clean and responsive design sign in and a perfect google lighthouse scores with 100% in Performance, Accessibility, Best Practices, and SEO" src="./.github/assets/firebase-starter-banner.png">
</a>
<h1 align="center">Astro Firebase Starter</h1>

<p align="center">
 A starter pack for getting started with Tailwind, Astro, Firebase, and Svelte.
</p>

<p align="center">
  <a href="https://astro-firebase-svelte-starter.vercel.app/"><strong>Try me!</strong></a>
</p>

## Getting Started

To use this starter pack, follow these steps:

1. **Clone the repository:**

   ```bash
   git clone https://github.com/Porter-smith/astro-firebase-svelte-tailwind-starter.git
   ```

2. **Navigate to the project directory:**

   ```bash
   cd astro-firebase-svelte-tailwind-starter
   ```

3. **Install the dependencies:**

   ```bash
   pnpm install
   ```

4. **Start the development server:**

   ```bash
   pnpm run dev
   ```

# Quickstart

Follow this guide to quickly set up Firebase for your project. For more in-depth instructions, see [FIREBASE_SETUP.md](./docs/FIREBASE_SETUP.md).

## Obtain Firebase Keys

### Service Account Key

1. Go to the [Firebase Console](https://console.firebase.google.com/).
2. Navigate to `Project settings` > `Service accounts`.
3. Click `Generate new private key`, then download and secure the JSON file.

### Web App Configuration

1. If you haven't added a web app to [Firebase](https://console.firebase.google.com/), click the web icon (`</>`) in `Project settings` > `Your apps` to create one.
2. Find your web app and you should see your `configuration`
3. Copy the configuration object.

## Update Configuration Files

Place your keys in the appropriate files:

- `.env`: Add service account key values from the downloaded JSON.
- `src/firebase/client.ts`: Insert the web app configuration object.

### Set up .env with Helper Script

To configure your environment variables quickly:

Save your service account creds as `service-account.json` in the project's root.
Run

```bash
 node scripts/createEnvFromServiceAccount.js
```

A .env file with all Firebase variables will be generated. So you don't have to copy and paste one by one each key.

**Note:** After setting up the .env file, remember to remove the service-account.json from your project's root directory to protect your credentials.

## Enable Authentication

### Configure Auth Methods

1. In [Firebase Console](https://console.firebase.google.com/), go to `Authentication`.
2. Click `Get started`.
3. Enable your desired sign-in methods and configure each according to Firebase's prompts.

## Ready to Go

You should now be able to run your application and use Firebase's authentication services.

🚀 Happy coding!

反馈内容错误