Build a Blog with Markdown, React, and GitHub Pages

 


Build a Blog with Markdown, React, and GitHub Pages

In today’s fast-paced development world, having your own technical blog is a great way to share knowledge, grow your personal brand, and even attract job or freelance opportunities. But what if you could build and host your own blog for free, using just React, Markdown, and GitHub Pages?

In this tutorial-style article, we’ll walk through how to create a modern developer blog using:

  • 🟩 React for the frontend

  • 📝 Markdown for writing posts

  • 🌐 GitHub Pages for free hosting


Why This Stack?

  • React gives you full control over your UI and enables powerful interactivity.

  • Markdown keeps content authoring clean, readable, and version-controlled.

  • GitHub Pages lets you host static sites (like React apps) directly from your GitHub repo—completely free.


🔧 Prerequisites

Before we start, make sure you have:

  • Node.js and npm installed

  • GitHub account

  • Basic understanding of React and Markdown

  • Git CLI installed


🛠 Step 1: Set Up the React App

bash

npx create-react-app react-markdown-blog cd react-markdown-blog

Clean up default files, then install required libraries:

bash

npm install react-router-dom react-markdown gray-matter
  • react-router-dom: for routing between blog posts

  • react-markdown: to render Markdown content

  • gray-matter: to parse frontmatter (title, date, etc.)


📁 Step 2: Structure the Project

Organize your files like this:

bash

/src /posts ← Markdown blog files /components ← Reusable React components /pages ← Home, BlogPost pages App.js

✍️ Step 3: Write a Blog Post in Markdown

Create a posts folder and add a .md file:

posts/hello-world.md

markdown

--- title: "Hello World" date: "2025-06-13" --- Welcome to my first blog post! This is written in Markdown and rendered using React.

⚛️ Step 4: Render Markdown in React

components/Post.js

jsx

import React from "react"; import ReactMarkdown from "react-markdown"; const Post = ({ content }) => { return <ReactMarkdown>{content}</ReactMarkdown>; }; export default Post;

pages/BlogPost.js

jsx

import React, { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import Post from "../components/Post"; import matter from "gray-matter"; const BlogPost = () => { const { slug } = useParams(); const [post, setPost] = useState({ content: "", data: {} }); useEffect(() => { import(`../posts/${slug}.md`).then((res) => { fetch(res.default) .then((res) => res.text()) .then((text) => { const { data, content } = matter(text); setPost({ content, data }); }); }); }, [slug]); return ( <div className="post"> <h1>{post.data.title}</h1> <p>{post.data.date}</p> <Post content={post.content} /> </div> ); }; export default BlogPost;

🔗 Step 5: Add Routing

App.js

jsx

import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import BlogPost from "./pages/BlogPost"; import Home from "./pages/Home"; function App() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/post/:slug" element={<BlogPost />} /> </Routes> </Router> ); } export default App;

🏠 Step 6: List All Blog Posts on Home Page

pages/Home.js

jsx

import React from "react"; import { Link } from "react-router-dom"; const posts = [ { slug: "hello-world", title: "Hello World", date: "2025-06-13" }, // Add more posts here manually or via file system ]; const Home = () => { return ( <div className="home"> <h1>My Blog</h1> <ul> {posts.map((post) => ( <li key={post.slug}> <Link to={`/post/${post.slug}`}> {post.title} - {post.date} </Link> </li> ))} </ul> </div> ); }; export default Home;

🚀 Step 7: Deploy to GitHub Pages

  1. Add homepage in package.json:

json

"homepage": "https://<your-username>.github.io/react-markdown-blog"
  1. Install deployment package:

bash

npm install gh-pages --save-dev
  1. Add scripts to package.json:

json

"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }
  1. Push your code to GitHub and run:

bash

npm run deploy

That’s it—your blog is now live on GitHub Pages!


✅ Final Thoughts

By combining Markdown, React, and GitHub Pages, you’ve built a developer-friendly, customizable, and cost-effective blog. You now have full control over your content and layout without relying on third-party platforms.

Next steps:

  • Add a CMS like Netlify CMS or Contentlayer

  • Use dynamic import of .md files via require.context

  • Add styling with Tailwind CSS or Styled Components

  • Enable tags, categories, and search functionality

Post a Comment

0 Comments