Documentation Blogging System
Blogging System
SprintKit includes a powerful, extensible blogging system built with Nuxt Content. This guide covers how the blog works, how to add new posts, and best practices for customization.
Overview
- Markdown-based: Write posts in Markdown with frontmatter for metadata.
- Dynamic Routing: Blog posts are rendered using dynamic routes (
pages/blog/[...slug].vue
). - Categories & Tags: Organize posts by category and tag for easy filtering.
- Featured Posts: Highlight important posts on the blog homepage.
- SEO & Sharing: Automatic meta tags, Open Graph, and Twitter card support.
- Custom Components: Use Vue components directly in Markdown for rich content.
Content Structure
Blog posts live in content/blog/
:
content/
blog/
2024-01-01-welcome.md
2024-01-15-tutorial.md
Each post uses frontmatter for metadata:
---
title: "Your Article Title"
description: "A compelling description for SEO"
author: "Author Name"
publishedAt: "2024-01-25"
updatedAt: "2024-01-26"
tags: ["tag1", "tag2"]
category: "Category Name"
featured: true
draft: false
coverImage: "https://..."
readingTime: 5
---
Adding a New Post
- Create a new
.md
file incontent/blog/
. - Fill out the frontmatter fields (see above).
- Write your content in Markdown. You can use custom Vue components (e.g.,
::code-block{}
) for advanced formatting. - Save and commit your changes. The post will appear automatically in the blog UI.
Dynamic Routing & Layouts
- All blog posts are rendered via
pages/blog/[...slug].vue
. - The blog homepage is at
pages/blog/index.vue
and lists posts, categories, tags, and supports search/filtering. - The
layouts/blog.vue
provides a sidebar with categories, recent posts, and blog stats.
Queries & Composables
Use the useBlog
composable for advanced queries:
- Fetch all posts, by category, tag, featured, or paginated
- Search posts by title, description, author, tags, or category
- Get related posts, categories, and tags with counts
Nuxt Studio
Nuxt studio ready you can just plug-n-play the deploy URL.
Best Practices
- Use consistent frontmatter for all posts.
- Use categories and tags for better organization.
- Mark important posts as
featured: true
. - Use the
draft: true
field to hide posts from public view. - Add a
coverImage
for visual appeal. - Use custom components for rich content.
SEO & Sharing
- Meta tags and Open Graph data are set automatically from frontmatter.
- Social sharing is supported via the Share button on each post.
Extending the Blog
- Add new fields to the frontmatter as needed (update
content.config.ts
schema). - Customize layouts and components for your needs.
- Use the
useBlog
composable for custom queries and features.
For more details, see the Nuxt Content documentation and explore the blog source code in this project.