Build a Personal Blog with Claude Code
Create a fast, beautiful blog with Next.js and Markdown. Deploy it to Vercel and have your own corner of the internet in under an hour.
What you are building
By the end of this guide, you will have a personal blog deployed to the internet. It will have a homepage listing your posts, individual post pages rendered from Markdown files, syntax highlighting for code snippets, an RSS feed, SEO metadata, and a clean responsive design. The tech stack is Next.js with Tailwind CSS, deployed on Vercel. You will write the blog posts in Markdown files — no database needed. Adding a new post means creating a new .md file and pushing to Git. The entire project will be generated and deployed with Claude Code. You will not write a single line of code by hand. Your job is to direct Claude Code: describe the design, specify the features, and review the output. This is what AI-assisted development looks like in practice — you are the architect, Claude Code is the builder.
Scaffolding the project
Create your project: mkdir ~/projects/my-blog && cd ~/projects/my-blog. Start Claude Code: claude. Say: "Create a new Next.js 14 project with TypeScript, Tailwind CSS, and App Router. Set up the project structure for a blog that reads Markdown files from a content/posts directory. Include frontmatter parsing with gray-matter and markdown rendering with next-mdx-remote. Set up a clean, minimal design with a serif font for article text." Claude Code will initialise the project, install dependencies, create the layout, and set up the content pipeline. Review the file structure before proceeding. You should see: app/page.tsx (homepage), app/blog/[slug]/page.tsx (individual posts), content/posts/ (where your markdown lives), and lib/posts.ts (the function that reads and parses your posts).
Creating your first posts
Ask Claude Code: "Create three sample blog posts in content/posts/. Each should have frontmatter with title, date, description, and tags. Make one about getting started with AI tools, one about productivity tips, and one about a technical topic. Write real, useful content — 300 to 500 words each, not lorem ipsum." Claude Code will create three well-structured Markdown files with genuine content. Check them in your editor. The frontmatter should look clean and the content should be readable. Now say: "Update the homepage to display all blog posts sorted by date, showing the title, date, description, and tags. Add a simple header with the blog name and a brief bio." Claude Code wires up the homepage to read from the posts directory. Run npm run dev and visit localhost:3000 to see your blog.
Polishing the design and adding features
Now refine: "Add syntax highlighting for code blocks using rehype-pretty-code. Add a table of contents sidebar on blog posts generated from the headings. Add a footer with social links. Add an RSS feed at /feed.xml. Add Open Graph meta tags for social sharing." Each feature request should be a separate prompt so you can review and approve each change. Claude Code will handle the technical implementation — installing packages, configuring plugins, creating components. Your job is quality control: does the syntax highlighting look good? Is the table of contents positioned correctly? Does the RSS feed validate? After each change, check the dev server. If something looks wrong, tell Claude Code: "The table of contents overlaps the content on mobile. Fix it so it is hidden on screens under 768px." Claude Code reads the component, identifies the responsive issue, and fixes it.
Deploying to Vercel
Time to ship. First, initialise Git if you have not: git init && git add . && git commit -m "Initial blog". Create a GitHub repository: go to github.com and create a new empty repo. Push your code: git remote add origin your-repo-url && git push -u origin main. Now deploy: go to vercel.com, sign in with GitHub, click "New Project", select your repository, and click Deploy. Vercel auto-detects Next.js and configures everything. In 60 seconds, your blog is live at a .vercel.app URL. To add a custom domain, go to your project settings on Vercel and add it. Ask Claude Code: "Add a CNAME file and update the next.config with the production domain for sitemap and Open Graph URLs." Your blog is now live on the internet. Adding new posts is as simple as: write a Markdown file, commit, push. Vercel rebuilds and deploys automatically. You just built and deployed a professional blog without writing code.
Building with AI Tools
This guide is hands-on and practical. The full curriculum covers the conceptual foundations in depth with structured lessons and quizzes.
Go to lesson