React Blog Boilerplate

A modern, customizable React blog with Markdown support, built with Vite, React, TypeScript, and Tailwind CSS.

Features

• Markdown Blog: Write your blog posts in Markdown with frontmatter support
• Search Functionality: Built-in search for blog posts
• SEO Optimized: Meta tags, canonical URLs, and auto-generated sitemap
• Responsive Design: Looks great on all devices with Tailwind CSS
• Fast Performance: Built with Vite for optimal development and production performance
• Image Handling: Automatic featured image extraction from blog posts
• YouTube Embed Support: Easily embed YouTube videos in your blog posts
• Zip File Support: Upload multiple blog posts at once via zip files

Installation

npm install react-blog-boilerplate
# or
yarn add react-blog-boilerplate

Usage

Basic Usage

import { BlogList, BlogPost, BlogPreview } from 'react-blog-boilerplate';
import 'react-blog-boilerplate/style.css'; // Import styles

// Use in your React Router setup
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/blog" element={<BlogList />} />
        <Route path="/blog/:slug" element={<BlogPost />} />
        <Route path="/" element={
          <div>
            <h1>Welcome to my blog</h1>
            <BlogPreview />
          </div>
        } />
      </Routes>
    </Router>
  );
}

Available Components

The library exports the following components:

• BlogList: Displays a paginated list of all blog posts
• BlogPost: Displays a single blog post
• BlogPreview: Shows a preview of the most recent blog posts
• SearchBar: Provides search functionality for blog posts
• ShareButtons: Social media sharing buttons for blog posts
• Sitemap: Generates a site map page
• Pagination: Reusable pagination component
• CTABlock: Call-to-action block for sidebar or footer
• RelatedBlogPosts: Shows related blog posts
• ScrollToTop: Utility component that scrolls to top on navigation

Utilities

• createSlug: Generate URL-friendly slugs from text
• extractFirstImage: Extract the first image from a blog post
• getDefaultFeaturedImage: Get a default image when no featured image is available

Types

• BlogPost: TypeScript interface for blog post structure
• SitemapUrl: TypeScript interface for sitemap URLs

Blog Content Structure

Blog content can be added in two ways:

1. Individual markdown files in the blog-content directory
2. Zip files containing markdown files in the blog-zips directory

When you run npm run build, the system will:

1. Extract any zip files from blog-zips into the blog-content directory
2. Include all markdown files in the build

Creating Blog Posts

Create a new Markdown file in the blog-content directory. Your blog post should include frontmatter at the beginning:

---
title: Your Blog Post Title
date: 2025-04-01
author: Your Name
excerpt: A brief summary of the blog post that will appear in listings
---

# Your Blog Post Title

Your content goes here...

Customization

Site Configuration

Configure your site by creating a site config file:

// src/config/mySiteConfig.js
import { siteConfig as defaultConfig } from 'react-blog-boilerplate';

const mySiteConfig = {
  ...defaultConfig,
  title: "Your Site Name",
  description: "Your site description",
  defaultAuthor: "Default Author Name",
  domain: "yoursitename.com",
};

export default mySiteConfig;

License

This project is MIT licensed.