4.4 KiB
4.4 KiB
Astro Tina Starter - Agent Knowledge Base
Generated: 2026-04-17 Version: 2.0.0 Type: Astro 6 + Tina CMS Starter Template
OVERVIEW
Starter template for building websites with Astro 6, Tina CMS, and Tailwind CSS 4.x.
Tech Stack
| Component | Technology | Version |
|---|---|---|
| Framework | Astro | 6.1.7 |
| CMS | Tina CMS | 2.x |
| Styling | Tailwind CSS | 4.x |
Key Features
- Self-hosted Tina CMS with schema-based content
- Tailwind CSS 4.x using
@tailwindcss/viteplugin - External consent system integration
- Thai language support with Noto Sans Thai
- Docker-ready with nginx
PROJECT STRUCTURE
astro-tina-starter/
├── .tina/
│ ├── config.ts # Tina CMS configuration
│ └── schema.ts # Content schema definitions
├── src/
│ ├── styles/
│ │ └── global.css # Tailwind v4 styles + @theme
│ ├── layouts/
│ │ └── Layout.astro
│ ├── pages/
│ │ └── index.astro
│ ├── components/
│ │ ├── Header.astro
│ │ └── TrackingScripts.astro # Tracking scripts (GA4, FB Pixel, etc.)
│ └── content/
│ ├── config.ts # Astro content collections
│ ├── posts/ # Blog posts (MDX)
│ ├── pages/ # Static pages (MDX)
│ └── settings/ # Site settings (JSON)
├── public/
│ └── favicon.svg
├── Dockerfile
├── nginx.conf
├── astro.config.mjs
├── tsconfig.json
└── package.json
IMPORTANT CONVENTIONS
Tailwind CSS 4.x Setup
CRITICAL: This template uses @tailwindcss/vite plugin, NOT @astrojs/tailwind.
// astro.config.mjs
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
})
/* src/styles/global.css */
@import "tailwindcss";
@theme {
--color-primary: #1a1a1a;
--color-accent: #3b82f6;
}
Tina CMS Content
Tina CMS manages content in src/content/:
posts/- Blog posts (MDX format)pages/- Static pages (MDX format)settings/- Site settings (JSON format)
Schema defined in .tina/schema.ts.
ConsentOS + Tracking System
ConsentOS (consent.moreminimore.com) manages consent and blocking:
# ConsentOS
PUBLIC_CONSENT_SITE_ID=your-site-id
PUBLIC_CONSENT_API_BASE=https://consent.moreminimore.com
# Analytics
PUBLIC_GA4_ID=G-XXXXXXXXXX
PUBLIC_GTM_ID=GTM-XXXXXXX
PUBLIC_UMAMI_URL=https://umami.example.com
PUBLIC_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
PUBLIC_CLARITY_ID=xxxxxxxxxx
# Marketing
PUBLIC_FB_PIXEL_ID=123456789
PUBLIC_GOOGLE_ADS_ID=AW-123456789
PUBLIC_TIKTOK_PIXEL_ID=XXXXXXXX
PUBLIC_LINE_CHANNEL_ID=1234567890
Tracking Scripts:
TrackingScripts.astro- contains all tracking scripts- Scripts are auto-blocked by ConsentOS until user consent
- Categories:
analytics,marketing
CREDENTIALS
No external API credentials required for this template.
Optional Environment Variables
| Variable | Description |
|---|---|
TINA_TOKEN |
Tina CMS production authentication |
TINA_CLIENT_ID |
Tina CMS client ID |
PUBLIC_CONSENT_SITE_ID |
ConsentOS site ID |
PUBLIC_CONSENT_API_BASE |
ConsentOS API base URL |
PUBLIC_GA4_ID |
Google Analytics 4 |
PUBLIC_GTM_ID |
Google Tag Manager |
PUBLIC_UMAMI_URL |
Umami analytics URL |
PUBLIC_UMAMI_WEBSITE_ID |
Umami website ID |
PUBLIC_CLARITY_ID |
Microsoft Clarity |
PUBLIC_FB_PIXEL_ID |
Facebook Pixel |
PUBLIC_GOOGLE_ADS_ID |
Google Ads conversion ID |
PUBLIC_TIKTOK_PIXEL_ID |
TikTok Pixel |
PUBLIC_LINE_CHANNEL_ID |
LINE Channel Tag |
COMMANDS
# Install dependencies
npm install
# Development
npm run dev
# Build
npm run build
# Preview
npm run preview
ANTI-PATTERNS
- NEVER use
@astrojs/tailwind(deprecated) - ALWAYS use
@tailwindcss/vitefor Tailwind v4 - NEVER commit environment files (.env)
DEPLOYMENT
Docker
docker build -t astro-tina-starter .
docker run -p 8080:80 astro-tina-starter
Easypanel
Static hosting - no persistent volume needed.
Manual
npm install
npm run build
# Serve dist/ folder with any static server
NOTES
- Tina CMS admin: http://localhost:4321/admin
- Astro default port: 4321
- Tina dev server: 3001