BlogSite is a Next.js-based website built to explore how markdown files can be transformed into fully functional blog posts. The goal behind creating this project was to understand the process of working with static content, rendering markdown dynamically, and structuring a simple yet efficient blogging system using modern frontend tools.
The website is built with TypeScript and styled using Tailwind CSS, focusing on clean design, performance, and readability. Each post is generated from markdown files containing metadata like title, author, date, and categories. This setup makes it easy to create, organize, and manage blogs without the need for a database, keeping everything lightweight and developer-friendly.
- Next.js App Router with static generation
- Markdown-based posts using
gray-matterandremark - Optimized images with
next/image - Dynamic blogs listing with pagination
- Blog search feature - compatible with pagination
- Dark / Light Theme toggle for user comfort
https://markdown-blog-website.vercel.app
git clone https://github.com/Mcraze/Markdown-Blog-Website.git
git cd Markdown-Blog-Website
npm install
npm run dev
- All Markdown files in
/content/postsare parsed usinggray-matterandremark. - The parsed metadata (title, date, image, etc.) populates the blog listing page.
- Each post is statically generated using its slug at build time.
Frontend Developer with 2+ years of experience building responsive user interfaces using React JS, HTML, CSS and JavaScript. Skilled in translating Figma designs into functional layouts, optimizing performance, and writing clean, maintainable code. Experienced in team collaboration and leading frontend projects.
Let's connect on LinkedIn