tina-cms
Tina CMS configuration with GitHub backend. Use when setting up or configuring Tina CMS.
When & Why to Use This Skill
This Claude skill streamlines the setup and configuration of Tina CMS using a GitHub backend. It provides automated templates for configuration files, schema definitions, and environment variable setups, specifically optimized for developers building headless CMS solutions with frameworks like Astro. By automating the boilerplate code for 'tina/config.ts' and content collections, it ensures a faster, error-free integration process.
Use Cases
- Initial CMS Setup: Rapidly generate the core configuration files required to initialize Tina CMS within a web project.
- GitHub Backend Integration: Configuring seamless synchronization between the CMS interface and a GitHub repository for version-controlled content.
- Content Modeling: Defining structured schemas for blog posts, documentation, or landing pages to ensure data consistency across the application.
- Deployment Configuration: Setting up essential environment variables and build settings for deploying the Tina CMS admin dashboard to production environments.
| name | tina-cms |
|---|---|
| description | Tina CMS configuration with GitHub backend. Use when setting up or configuring Tina CMS. |
Tina CMS Skill
Installation
npm install tinacms @tinacms/cli
GitHub Backend Configuration
File: tina/config.ts
import { defineConfig } from 'tinacms';
export default defineConfig({
branch: process.env.GITHUB_BRANCH || 'main',
clientId: process.env.TINA_CLIENT_ID,
token: process.env.TINA_TOKEN,
build: {
outputFolder: 'admin',
publicFolder: 'public',
},
media: {
tina: {
mediaRoot: 'uploads',
publicFolder: 'public',
},
},
schema: {
collections: [
// Define collections here
],
},
});
Schema Pattern
{
name: 'blog',
label: 'Blog Posts',
path: 'src/content/blog',
format: 'mdx',
fields: [
{
type: 'string',
name: 'title',
label: 'Title',
isTitle: true,
required: true,
},
{
type: 'rich-text',
name: 'body',
label: 'Body',
isBody: true,
},
],
}
Critical Requirements
- Use GitHub backend (not local)
- Store media in
/public/uploads/ - Admin accessible at
/admin - Schemas must match Astro content collections
Environment Variables
GITHUB_OWNER=username
GITHUB_REPO=repo-name
GITHUB_BRANCH=main
GITHUB_PERSONAL_ACCESS_TOKEN=ghp_xxx