Introduction

The Astro CMS provides a powerful yet simple way to manage content on your website. Whether you’re building a blog, documentation site, or complex content hierarchy, this system adapts to your needs.

Creating Your First Content

Step 1: Create a Markdown File

Create a new markdown file in /src/content/cms/:

---
title: My First Post
description: This is my first CMS post
contentType: post
layout: standard
pubDate: 2025-01-19
author: Your Name
tags: [first-post, tutorial]
categories: [Blog]
---

Your content goes here...

Step 2: Choose Your Layout

Select from three single-page layouts in the frontmatter:

standard - Traditional blog layout with sidebar
magazine - Modern two-column editorial design
minimal - Clean, focused reading experience

Understanding Content Types

Post

Standard blog posts or articles:

contentType: post
layout: standard

Page

Static pages like About or Services:

contentType: page
layout: minimal

Hub

Parent pages that list child content:

contentType: hub
archiveLayout: grid

Frontmatter Options

Required Fields

Field	Description	Example
`title`	Page title	”My Blog Post”
`description`	Meta description	”A brief description”
`pubDate`	Publication date	2025-01-19

Optional Fields

Field	Description	Default
`parent`	Parent content slug	null
`contentType`	Type of content	”post”
`layout`	Single page layout	”standard”
`archiveLayout`	Archive page layout	”grid”
`author`	Author name	”Admin”
`tags`	Content tags	[]
`categories`	Content categories	[]
`featured`	Feature this content	false
`draft`	Hide from production	false
`heroImage`	Hero/featured image	null
`excerpt`	Custom excerpt	auto-generated
`showToc`	Show table of contents	true
`showAuthor`	Show author bio	true
`showRelated`	Show related posts	true
`showSharing`	Show social sharing	true

Creating Hierarchical Content

Parent-Child Relationships

Create nested content structures using the parent field:

# Parent page (hub)

---

title: Documentation
contentType: hub
archiveLayout: list

---

# Child page

---

title: Installation Guide
contentType: post

# Hierarchy via folder structure: src/content/cms/documentation/installation.md

---

Multi-level Hierarchies

Build complex structures:

/cms/                    # Root hub
├── /cms/tutorials/      # Sub-hub
│   ├── /cms/tutorials/basic/
│   └── /cms/tutorials/advanced/
└── /cms/guides/         # Another sub-hub
    └── /cms/guides/setup/

Configuring Archive Pages

Archive Layout Options

When a page has children, choose how to display them:

archiveLayout: grid    # Card-based grid
archiveLayout: list    # Traditional list
archiveLayout: masonry # Pinterest-style

Archive Settings

Configure in /src/config/cms.js:

archive: {
  showExcerpt: true,
  excerptLength: 150,
  showThumbnail: true,
  showAuthor: true,
  showDate: true,
  showTags: true,
  showReadingTime: true,
  sortBy: 'date',
  sortOrder: 'desc'
}

Adding Components to Content

FAQ Section

Add an FAQ accordion to your content:

## Frequently Asked Questions

{/_ faq
items: [
{
question: "How do I get started?",
answer: "Simply create a markdown file in the cms folder."
},
{
question: "Can I customize layouts?",
answer: "Yes! Choose from multiple pre-built layouts."
}
]
_/}

Call-to-Action

Include a CTA block:

{/_ cta
heading: "Ready to Start?"
description: "Create amazing content with our CMS"
buttonText: "Get Started"
buttonHref: "/cms/getting-started/"
variant: "primary"
_/}

Best Practices

1. Organize Content Logically

Use folders for major sections
Keep related content together
Use consistent naming conventions

2. Optimize for SEO

Write descriptive titles and descriptions
Use relevant tags and categories
Include custom excerpts for important posts

3. Leverage Features

Enable TOC for long content
Use featured flag for important posts
Add hero images for visual appeal

4. Performance Tips

Optimize images before uploading
Keep excerpts concise
Use lazy loading for images

Next Steps

Now that you understand the basics, explore:

Archive Layouts - Detailed layout options
Single Layouts - Page layout details
Advanced Features - Hierarchical content and more

Getting Started with Astro CMS