There’s a strange paradox about building websites today. On the one hand, the tools are so powerful that you can spin up something in an afternoon that would have taken a whole team weeks a decade ago. On the other hand, the sheer abundance of options, frameworks, hosting providers, AI copilots, can paralyse beginners before they even write their first line of code. So let’s cut through the noise.
Today We will build a Personal Blog with AI as Your Programmer
There’s something timeless about a personal blog. It’s the digital equivalent of carving your name into a tree: “I was here. These are my thoughts.” And in 2025, building one is the perfect beginner project.
Our Blog will allow you to:
- Write posts in Markdown (a lightweight text format).
- Display them on your site with a clean design.
- Deploy it live so anyone can read it.
And we’ll do it all by talking to Cursor we wont write a single line of code.
The why (Skip this if you just want to get to building)
Your Editor is Your Tutor
We’ll be using Cursor as our code editor. Think of it less like a text editor and more like a tutor who sits beside you, nudging you forward. Cursor is free to start, $20/month if you want the pro plan, and free for students for a year (which is absurdly generous). The key here is not just that Cursor writes code for you, it’s that it explains, corrects, and remembers. You’ll make mistakes, and that’s the point. Take notes when you do. Write down what went wrong, how you fixed it, and what you learned. That’s how you build intuition.
The Framework That Won
We’ll use Next.js. Why? Because it’s the industry standard, it’s built on React (which AI models are best at), and it has first-class support for third-party tools. Even if you try to use something else, AI models often default back to React anyway. So you might as well lean into the current.
Hosting Without Tears
We’ll host on Vercel. It’s free for hobby projects, it’s fast (edge networks by default), and it was literally built by the same team that made Next.js. All you need is a GitHub account to store your code, and a Vercel account to deploy it. Push your code, and your site is live. That’s it.
The AI Workflow
Most of the time, you’ll use Cursor’s Auto model. It’s fast, it’s good, and it’ll get you 90% of the way. But when you hit a wall, when the AI keeps giving you broken code or you don’t understand why something isn’t working, switch gears.
- Gather context: read the docs, copy error messages, summarize what you’ve tried.
- Use gpt-5-high-fast with a context-7 MCP server. This is your “deep thinking” mode.
- Take notes on what worked. This is how you stop making the same mistake twice.
The how
Step 1: Create Your Project
Open Cursor and start a new project. Then, give Cursor this prompt:
Prompt 1: Initialize a Next.js Blog Project
Create a new Next.js project for a personal blog.
- Use TypeScript.
- Add Tailwind CSS for styling.
- Set up a clean, minimal layout with a header and footer.
- The homepage should say "Welcome to My Blog" for now.
Cursor will scaffold the project for you. Once it’s done, run it locally (Cursor will guide you through this). You should see your starter blog in the browser.
Step 2: Add Blog Posts
We want to write posts in Markdown files (because it’s simple and human-readable). Let’s ask Cursor to set that up.
Prompt 2: Add Markdown Blog Support
Set up a blog system where posts are written in Markdown files.
- Store the Markdown files in a `/posts` folder.
- Each post should have a title, date, and content.
- Use gray-matter to parse the frontmatter (title/date).
- Use remark/rehype to render Markdown into HTML.
- Create a blog index page that lists all posts with title and date.
- Each post should have its own page.
Now you’ll have a /posts folder where you can drop in files like hello-world.md. Cursor will wire everything up so they appear on your site.
Step 3: Style It Up
Right now, it’ll look plain. Let’s make it feel like a real blog.
Prompt 3: Style the Blog with Tailwind
Improve the blog design using Tailwind CSS.
- Add a simple navigation bar with "Home" and "Blog".
- Style the blog index page with a clean, modern look.
- Style individual blog posts with readable typography (use Tailwind’s prose class in tailwind v4).
- Make sure it looks good on mobile.
Cursor will generate the styles. You can tweak the prompt if you want a different vibe (e.g., “make it look like a minimalist tech blog” or “use a dark theme”), or if you are a visual person like I you can search for example of blogs you like online and provided cursor with a screenshot.
Step 4: Add a Personal Touch
This is your blog, so let’s make it feel like you.
Prompt 4: Add an About Page
Add an "About" page at `/about`.
- Include a placeholder photo.
- Add a short bio section.
- Link to the About page from the navigation bar.
Now you’ve got a homepage, a blog, and an about page. That’s a real website, so make it feel like one.
Step 5: Deploy to the World
This is the magic moment. You’re going to put your site online.
- Create a GitHub account (if you don’t already have one).
- Push your project to GitHub (Cursor can help you with this).
- Create a free account on Vercel.
- Connect your GitHub repo to Vercel.
Vercel will automatically build and deploy your site. Within minutes, you’ll have a live URL you can share with anyone.
Step 6: Write Your First Post
Go into the /posts folder and create a file called my-first-post.md. Inside, write something like:
---
title: "My First Post"
date: "2025-08-17"
---
This is my very first blog post. Built with AI, Next.js, and a little curiosity.
Push it to GitHub, and Vercel will redeploy your site. Refresh your blog, and there it is: your words, live on the internet.
Step 7: Keep Going
At this point, you’ve got the basics. But the beauty of working with AI is that you can keep extending it just by asking. Try prompts like:
- “Add a dark mode toggle to the site.”
- “Add tags to blog posts and a page to filter by tag.”
- “Add a contact form that sends me an email.”
Each one is a new lesson, a new door.
Closing Thought
The first time you see your blog live on the internet, it feels a little like magic. But the real magic is this: you didn’t just build a website, you learned how to work with AI as a collaborator.
That’s the skill that will carry you forward. Not memorising syntax, not grinding through tutorials, but learning how to ask, refine, and guide.
Because in 2025, building a website isn’t about knowing everything. The skill now is learning alongside AI, not trying to beat it.