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
Clean up default files, then install required libraries:
-
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:
✍️ Step 3: Write a Blog Post in Markdown
Create a posts
folder and add a .md
file:
posts/hello-world.md
⚛️ Step 4: Render Markdown in React
components/Post.js
pages/BlogPost.js
🔗 Step 5: Add Routing
App.js
🏠 Step 6: List All Blog Posts on Home Page
pages/Home.js
🚀 Step 7: Deploy to GitHub Pages
-
Add
homepage
inpackage.json
:
-
Install deployment package:
-
Add scripts to
package.json
:
-
Push your code to GitHub and run:
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 viarequire.context
-
Add styling with Tailwind CSS or Styled Components
-
Enable tags, categories, and search functionality
0 Comments