Creating a personal blog can be an exciting and fulfilling project, especially when you have the right tools at your disposal. In this post, I will walk you through the process I followed to build my personal blog website using Next.js, Contentlayer, Markdown, and Vercel. These technologies were chosen to ensure a seamless development experience and a beautiful end result. Let's dive in!

Why I Chose These Technologies

• Next.js: A powerful React framework that offers great performance and built-in features like server-side rendering and static site generation.
• Contentlayer: Simplifies content management by allowing me to work with Markdown files and transform them into a structured data format that Next.js can use.
• Markdown: An easy-to-write format that allows me to focus on content creation without worrying about complex HTML tags.
• Vercel: Provides a smooth deployment experience with seamless integration with Next.js, allowing me to deploy my site with ease.

Setting Up the Project

1. Initialize the Next.js Project

First, I created a new Next.js project using the following command:

npx create-next-app@latest my-blog
cd my-blog

2. Install Necessary Dependencies

I added Contentlayer and some essential packages to my project:

npm install contentlayer next-contentlayer

3. Configure Contentlayer

Next, I configured Contentlayer to work with Markdown files. I created a contentlayer.config.js file at the root of my project with the following content:

import { defineDocumentType, makeSource } from 'contentlayer/source-files'

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `posts/*.md`,
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
    description: { type: 'string', required: true },
  },
}))

export default makeSource({
  contentDirPath: 'content',
  documentTypes: [Post],
})

4. Create Markdown Files

I created a content/posts directory and added my blog posts in Markdown format. Here's an example of a Markdown file (hello-world.md):

---
title: "Hello World"
date: "2023-01-01"
description: "This is my first blog post."
---

Welcome to my blog! This is my first post.

5. Integrate Contentlayer with Next.js

I updated the next.config.js to use Contentlayer:

const { withContentlayer } = require('next-contentlayer')

module.exports = withContentlayer({
  // your Next.js config here
})

6. Display Posts in the Next.js Application

I created a page to list all blog posts and a template for individual posts. Here's how I set up the pages/index.js to list posts:

import { allPosts } from 'contentlayer/generated'
import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>My Blog</h1>
      <ul>
        {allPosts.map((post) => (
          <li key={post._id}>
            <Link href={`/posts/${post._id}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

And the dynamic route for individual posts in pages/posts/[id].js:

import { useRouter } from 'next/router'
import { allPosts } from 'contentlayer/generated'

export default function Post() {
  const router = useRouter()
  const { id } = router.query
  const post = allPosts.find((post) => post._id === id)

  if (!post) {
    return <div>Post not found</div>
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.date}</p>
      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
    </div>
  )
}

Deploying to Vercel

Deploying the site to Vercel was straightforward:

1. I connected my GitHub repository to Vercel.
2. Vercel automatically detected the Next.js project and configured the build settings.
3. I hit "Deploy," and within minutes, my blog was live.

Conclusion

Building a personal blog with Next.js, Contentlayer, Markdown, and Vercel was a rewarding experience. The combination of these tools allowed me to focus on writing content while providing a robust and performant platform. Whether you're looking to start a blog or build a content-driven site, I highly recommend giving this stack a try.

Feel free to explore my portfolio site and share your thoughts! Have a Nice Day!