Theater Ziefen Website

Official website for Theater Ziefen - Coming 2029

🎭 Overview

This is a modern, easy-to-maintain website built for Theater Ziefen. The site features:

• Static pages for general information
• Blog for news and updates
• Visual CMS (TinaCMS) for non-technical content editing
• Future-ready for ticket shop integration
• Zero-cost hosting on Netlify

🚀 Tech Stack

• Framework: Astro - Fast, modern static site generator
• CMS: TinaCMS - Git-based visual content management
• Content: MDX (Markdown + JSX) for blog posts and pages
• Styling: Scoped CSS with responsive design
• Hosting: Netlify (free tier)
• Language: TypeScript

📁 Project Structure

/
├── content/                 # Content files (edited via TinaCMS)
│   ├── blog/               # Blog posts in MDX format
│   └── pages/              # Static pages in MDX format
├── public/                 # Static assets (images, favicon, etc.)
│   └── images/            # Image uploads
├── src/
│   ├── layouts/           # Page layouts
│   │   └── BaseLayout.astro
│   ├── pages/             # Route pages
│   │   ├── index.astro    # Homepage
│   │   ├── about.astro    # About page
│   │   ├── contact.astro  # Contact page
│   │   └── blog/          # Blog pages
│   │       ├── index.astro      # Blog listing
│   │       └── [slug].astro     # Individual blog posts
│   └── components/        # Reusable components (future)
├── tina/                  # TinaCMS configuration
│   └── config.ts          # CMS schema and settings
├── .env                   # Environment variables (not in git)
├── .env.example           # Environment variables template
├── netlify.toml           # Netlify deployment config
└── package.json           # Dependencies and scripts

🛠️ Development Setup

Prerequisites

• Node.js 20 or higher
• npm or yarn
• Git

Installation

1. Clone the repository:

git clone <repository-url>
cd website-theater-ziefen

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The site will be available at http://localhost:4321

The TinaCMS admin panel will be available at http://localhost:4321/admin

📝 Content Management with TinaCMS

For Non-Technical Content Editors

1. Start the development server (ask your developer if you need help)
2. Navigate to http://localhost:4321/admin
3. Click "Edit" on any page to start editing
4. Make your changes using the visual editor
5. Save your changes - they'll be committed to Git automatically

Editing Blog Posts

1. Go to /admin in your browser
2. Click on "Blog Posts" in the sidebar
3. To create a new post:
   • Click "Add New"
   • Fill in the title, date, excerpt
   • Write your content in the editor
   • Add a cover image (optional)
   • Click "Save"
4. To edit an existing post:
   • Click on the post in the list
   • Make your changes
   • Click "Save"

Editing Pages

1. Go to /admin in your browser
2. Click on "Pages" in the sidebar
3. Select the page you want to edit
4. Make your changes using the visual editor
5. Click "Save"

🧞 Commands

All commands are run from the root of the project:

Command	Action
npm install	Installs dependencies
npm run dev	Starts dev server with TinaCMS at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check

🌐 Deployment to Netlify

Initial Setup

1. Push your code to GitHub:

git add .
git commit -m "Initial commit"
git push origin main

2. Go to Netlify and sign in

3. Click "Add new site" → "Import an existing project"

4. Select your GitHub repository

5. Configure build settings:

   • Build command: npm run build
   • Publish directory: dist
   • Click "Deploy site"

Automatic Deployments

Once set up, Netlify will automatically deploy your site whenever you push changes to GitHub. This includes content changes made through TinaCMS!

Custom Domain

To use your own domain:

1. In Netlify, go to "Domain settings"
2. Click "Add custom domain"
3. Follow the instructions to configure your DNS

🎨 Customization

Changing Colors

Edit the CSS variables in src/layouts/BaseLayout.astro:

:root {
  --color-primary: #8b0000;      /* Main brand color */
  --color-secondary: #2c3e50;    /* Secondary color */
  --color-accent: #c0392b;       /* Accent color */
  /* ... more colors */
}

Adding New Pages

1. Create a new MDX file in content/pages/
2. Create a corresponding .astro file in src/pages/
3. Add a link to the navigation in src/layouts/BaseLayout.astro

Modifying the Homepage

Edit src/pages/index.astro to change the homepage content and layout.

🔮 Future: Adding Ticket Shop

When you're ready to add ticketing (planned for ~3 years):

Option 1: Third-Party Integration (Easiest)

• Use services like Stripe, Eventbrite, or Ticketor
• Add embedded widgets to your pages
• No major code changes required

Option 2: Custom Solution

• Build custom ticketing forms
• Integrate with Stripe for payments
• Add customer accounts and order management
• Requires developer assistance

📚 Additional Resources

• Astro Documentation
• TinaCMS Documentation
• Netlify Documentation
• MDX Documentation

🤝 Support

For technical issues or questions:

• Check the documentation links above
• Contact your developer
• Open an issue in the GitHub repository

📄 License

Copyright © 2026 Theater Ziefen. All rights reserved.