# Simple blog code starter for BCMS and Svelte.js

![Image](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/673dc29fc8abc5e921e4449a/bin2/simple-blog.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23)

## Minimal, Reactive, and Extensible Blog Boilerplate

The Svelte Simple Blog Starter is a clean, production-ready foundation for building content-driven sites with SvelteKit and BCMS. Designed for developers who want a minimal yet scalable starting point, this starter demonstrates best practices in file structure, server-side data loading, and component-driven development, without unnecessary complexity.

## Key Features and Structure

- Modern SvelteKit Setup: Uses SvelteKit’s file-based routing (/src/routes), server-side data loading (+page.server.ts), and reactive Svelte components for a fast, modern developer experience.

- BCMS Integration: Fetches content from BCMS using a lightweight client. Blog data is accessed via server-side load functions, keeping the frontend clean and decoupled from the CMS logic.

- Dynamic Routing: Blog posts are rendered using dynamic routes (/src/routes/blog/[slug]), with server-side fetching for SEO and performance.

- Component-Driven UI: The UI is composed of small, reusable Svelte components (blog-card.svelte, tag.svelte, content-manager.svelte, footer.svelte), making it easy to extend or customize. Layout and utility functions are separated for clarity.

- Minimal Styling, Easy Customization: Ships with a single CSS file and Tailwind CSS for rapid styling. The design is intentionally simple, so you can adapt it to your brand or project needs.

- TypeScript Support: The codebase is fully typed, providing type safety and a better developer experience.

## How It Works

1. Homepage: The main page (/src/routes/+page.svelte) fetches all blog posts from BCMS server-side and displays them using the BlogCard component. The structure is minimal, focusing on clarity and extensibility.

2. Blog Post Pages: Each blog post is rendered via a dynamic route (/src/routes/blog/[slug]/+page.svelte). The page fetches the post and related content server-side, displays categories, cover image, and rich content using the ContentManager component.

3. Server-Side Data Loading: All content fetching is abstracted into server-side load functions, which handle communication with BCMS and return typed responses to the frontend. This separation makes the codebase easy to maintain and scale.

## Why Choose This Starter?

- Perfect for Learning or Prototyping: See how to connect SvelteKit with a headless CMS using best practices, with a codebase that’s easy to read and extend.

- Production-Ready Foundation: The structure supports scaling up to more complex sites, with clear separation of concerns and robust data fetching.

- No Bloat, Just Essentials: Focus on your content and features, not on removing unnecessary code.

- Whether you’re building a personal blog, a documentation site, or a content-driven app, this starter gives you a solid, modern foundation with all the essentials, and nothing more.