Building A Blog In My Personal Website

I recently implemented a blog and created a way to easily make a blog post by using markdown. Here's what I learned and why I chose these technologies.

Why Next.js?

Next.js has become my go-to framework for React applications because of its:

1. App Router - The new app directory structure makes routing intuitive
2. Server Components - Better performance and SEO out of the box
3. Static Generation - Perfect for a blog like this one
4. Built-in TypeScript Support - Type safety without extra configuration

Styling with Tailwind CSS

Tailwind CSS has revolutionized how I approach styling:

• Utility-First - No more context switching between files
• Dark Mode Support - Easy theme implementation
• Responsive Design - Built-in breakpoint utilities
• Custom Components - Building reusable UI patterns

Here's an example of a simple component with Tailwind:

function Card({ title, content }) {
  return (
    <div className="p-6 rounded-lg bg-neutral-800 shadow-lg">
      <h2 className="text-2xl font-bold text-white">{title}</h2>
      <p className="mt-2 text-stone-300">{content}</p>
    </div>
  );
}

Project Structure

Here's how I organized my project:

app/
├── blog/
│   ├── page.tsx
│   ├── [slug]/
│   │   └── page.tsx
│   └── posts/
│       └── *.mdx
├── components/
│   ├── Navbar.tsx
│   └── PageTitle.tsx
└── layout.tsx

Features I'm Proud Of

1. Markdown Blog Posts

I implemented a blog system that:

• Uses MDX for content
• Supports frontmatter
• Has syntax highlighting
• Renders math equations

2. Dark Mode by Default

Because who doesn't love dark mode? Plus, it's easier on the eyes when reading code snippets.

3. Responsive Design

The site works great on all devices:

What's Next?

I'm planning to add:

• Image optimization with next/image
• Search functionality
• RSS feed
• View counter for blog posts

Conclusion

Building this site has been a great learning experience. The combination of Next.js and Tailwind CSS made it enjoyable to develop and easy to maintain.

Feel free to check out the source code if you're interested in how it's built!