Building a Blog with React and Vite

Modern static blogging doesn't have to be complicated. With React, Vite, and plain markdown files, you can have a blog running in under an hour — no backend, no database, no CMS.

The Concept

The idea is simple:

A data.json file defines your posts (slug, title, date, excerpt, tags)
Each post is a .md file named after its slug
The React app fetches and renders them at runtime

This means publishing a new post is as simple as:

Writing a markdown file
Adding an entry to data.json
Deploying to any static host (Netlify, Vercel, GitHub Pages)

Project Structure

my-blog/
├── public/
│   └── data/
│       ├── data.json          ← Post index
│       ├── my-first-post.md   ← Post content
│       └── another-post.md
├── src/
│   ├── components/
│   └── App.jsx
└── package.json

Fetching Data

// Fetch the post index
const res = await fetch('/data/data.json');
const posts = await res.json();

// Fetch a specific post
const md = await fetch(`/data/${slug}.md`);
const text = await md.text();

Rendering Markdown

We use react-markdown with remark-gfm for GitHub-flavored markdown support (tables, strikethrough, etc.):

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

<ReactMarkdown remarkPlugins={[remarkGfm]}>
  {markdownText}
</ReactMarkdown>

Deploying

Since this is a pure static site, you can deploy to:

Netlify — drag and drop the dist/ folder
Vercel — connect your GitHub repo, zero config
GitHub Pages — use the gh-pages action

What's Next?

Once comfortable with this setup, you might consider:

Adding syntax highlighting with react-syntax-highlighter
RSS feed generation at build time
A reading time estimator
Tag filtering on the home page

The beauty is that each addition is optional. Start simple, grow as needed.