Astro + Keystatic 入门模板

一个结合了 Astro 性能和 Keystatic 基于 git 的 CMS 的最小入门模板。非常适合需要速度和易于编辑的内容密集型网站。

技术栈: Astro, Keystatic, Tailwind CSS, TypeScript
查看代码

Astro + Keystatic 入门模板

我构建的一个入门模板，用于快速创建带有可视化编辑器的内容驱动网站。这为多个客户项目和我自己的作品集提供支持。

为什么选择这个技术栈

在尝试了各种 CMS 选项后，我选择了 Keystatic，因为：

  • 基于 Git：无需数据库，内容存储在仓库中
  • 可视化编辑：客户可以在不接触代码的情况下编辑
  • 本地优先：离线工作，准备好时同步
  • 类型安全：完整的 TypeScript 支持和内容模式

特性

内容集合

为常见内容类型预配置的集合：

  • 支持 MDX 的博客文章
  • 项目/作品集页面
  • 简单页面（关于、联系）

Tailwind 集成

  • 开箱即用的深色模式支持
  • 自定义设计令牌
  • 响应式工具类

开发者体验

  • 开发时热重载
  • 类型安全的内容查询
  • ESLint + Prettier 已配置

快速开始

# 克隆仓库
git clone https://github.com/jaimesolis/astro-keystatic-starter

# 安装依赖
npm install

# 启动开发
npm run dev

Keystatic 管理面板在 /keystatic 可用。

项目结构

├── src/
│   ├── content/
│   │   ├── blog/
│   │   └── pages/
│   ├── components/
│   ├── layouts/
│   └── pages/
├── keystatic.config.ts
└── astro.config.mjs

自定义

添加新集合

  1. 在 keystatic.config.ts 中定义模式
  2. 在 src/content/ 中创建内容文件夹
  3. 在 src/pages/ 中添加页面路由

样式

模板使用带有自定义颜色的 Tailwind：

// tailwind.config.js
colors: {
  brand: {
    green: '#14F195',
    purple: '#9945FF',
  }
}

部署

适用于任何静态托管：

  • Vercel（推荐）
  • Netlify
  • Cloudflare Pages

对于 Keystatic 的云同步功能，您需要配置 GitHub OAuth。

用例

我已将此入门模板用于：

  • 作品集网站（如这个）
  • 小型企业网站
  • 文档网站
  • 个人博客

创建时间：2025年10月 许可证：MIT 状态：积极维护中