Simple Blog

A clean, minimal blog template built with React, TypeScript, and Tailwind CSS. Focus on writing content with Markdown while enjoying modern development tools and a responsive design.

Live Demo

✨ Features

• 📝 Markdown-based content - Write posts in Markdown with frontmatter
• 🎨 Clean, minimal design - Beautiful typography and spacing
• 🌙 Dark/light mode - Automatic theme detection with manual toggle
• 🔍 SEO optimized - Meta tags, Open Graph, and structured data
• 📱 Fully responsive - Works great on all devices
• 🚀 Fast performance - Built with Vite for quick load times
• 🧩 Component library - Built with shadcn/ui components
• 🔄 Auto-imports posts - No need to register new posts in code
• 📊 100% test coverage - Unit and integration tests with Vitest
• 🔧 Easy customization - Central config file for most settings

🚀 Quick Start

# Clone the repository
git clone https://github.com/chrismannina/simple-blog-template.git my-blog

# Navigate to project directory
cd my-blog

# Install dependencies
npm install

# Start the development server
npm run dev

Visit http://localhost:8080 in your browser to see your blog.

📝 Creating Blog Posts

1. Create a new Markdown file in the src/posts directory with a numbered prefix (e.g., 06-my-first-post.md)
2. Add frontmatter and content:

---
title: My First Blog Post
date: 2025-08-01
excerpt: A brief summary of what this post is about
tags: ['react', 'tutorial']
coverImage: https://images.unsplash.com/photo-example
---

# My First Blog Post

Write your content here using Markdown...

Your post will automatically appear in the blog!

🛠️ Customization

Configuration

Edit src/config/blog.config.ts to customize:

• Blog title, description, and author info
• Navigation links
• Theme colors and dark mode settings
• Date formats
• Footer content

Styling

This template uses Tailwind CSS for styling. Customize:

• Global styles in src/index.css
• Component-specific styles in their respective files
• Theme colors in tailwind.config.js

📋 Project Structure

simple-blog-template/
├── public/               # Static assets
├── src/
│   ├── components/       # React components
│   │   └── ui/           # UI components (shadcn/ui)
│   ├── config/           # Configuration files
│   ├── contexts/         # React contexts (theme, etc.)
│   ├── lib/              # Utility functions
│   ├── pages/            # Page components
│   ├── posts/            # Markdown blog posts
│   └── styles/           # CSS files
├── tests/                # Test files
│   ├── unit/             # Unit tests
│   └── integration/      # Integration tests
└── scripts/              # Utility scripts

📦 Deployment

Vercel (Recommended)

1. Push your repo to GitHub
2. Import it to Vercel
3. Deploy with one click

Or use the CLI:

npm install -g vercel
vercel

Netlify

1. Push your repo to GitHub
2. Import it to Netlify
3. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist

GitHub Pages

1. Update vite.config.ts with your repo name:

   base: '/your-repo-name/',

2. Add deployment script to package.json:

   "deploy": "gh-pages -d dist"

3. Install gh-pages: npm install --save-dev gh-pages
4. Build and deploy: npm run build && npm run deploy

📚 Documentation

The blog itself contains comprehensive documentation:

1. Welcome - Introduction
2. Getting Started - Setup guide
3. Writing Content - Creating posts
4. Customizing - Personalization
5. Deploying - Publishing your blog

Additional documentation in the USAGE.md file.

⚡ Performance

This template is optimized for performance:

• Fast build times with Vite
• Optimal bundle sizes
• Efficient image loading
• Minimal dependencies

🧪 Testing

Run tests with:

# Run all tests
npm test

# Watch mode
npm run test:watch

# With UI
npm run test:ui

# Coverage report
npm run test:coverage

📄 License

MIT License

🙏 Acknowledgements

• React
• TypeScript
• Tailwind CSS
• shadcn/ui
• Vite
• Vitest
• React Router
• gray-matter
• react-markdown

---

Built with ❤️ by Chris Mannina