Build a Personal Blog with AI (No Coding Required)

Prerequisites Checklist

Before building the blog, check the following prerequisites. 1. A computer (Windows or Mac both work) 2. Claude Pro subscription ($20/month) - Sign up at claude.ai 3. Node.js installed - Go to nodejs.org and download the "LTS" version - Run the downloaded file and keep clicking "Next" to complete installation - If you do not know what Node.js is: think of it as a program needed to build the blog 4. Free GitHub account - Sign up at github.com 5. Text editor - Visual Studio Code recommended (free download at code.visualstudio.com) How to verify Node.js installation: - Windows: Search for "PowerShell" in the Start menu and open it - Mac: Open Spotlight (Cmd+Space) and search for "Terminal" - Type the command below in the black window that opens and press Enter You will see something like this if successful: a number like "v20.x.x" or "v22.x.x" appears If you see "command not found": Node.js is not installed. Download it again from nodejs.org.

node --version

Blog Planning - Topic, Categories, and Design

Before building the blog, plan it out first. Step 1: Ask Claude to help with planning. Go to claude.ai and copy/paste the prompt below. Only modify the parts in parentheses with your own details. Step 2: Review Claude's suggestions and decide on the structure you like. When Claude suggests multiple options, just pick the ones you prefer. Step 3: Decide on a domain (blog address) - Examples: myblog.com, myname-blog.com - Where to buy: Namecheap (namecheap.com) or Cloudflare (dash.cloudflare.com) for $10-15/year - You do not need to buy it right away. You can finish the blog first and connect it later. Cost breakdown: - Claude Pro: $20/month (can cancel after blog is finished; usually takes 1-2 days to complete) - Vercel hosting: Free - Domain: $10-15/year (optional; without one, you use an xxx.vercel.app address) - Total initial cost: approximately $25-35 You will see something like this if successful: Claude suggests a blog name, category structure, and design direction If you do not like Claude's suggestions: Ask for adjustments like "Change to 4 categories instead of 3" or "Make the design cleaner."

# Prompt to send to Claude (copy/paste and modify parts in parentheses):

"I want to create a personal blog. Help me plan it with the following criteria.

- Blog topic: (e.g., travel, cooking, tech reviews, daily life, etc.)
- Categories: (e.g., AI Tips, Productivity Tools, Tech Reviews)
- Design feel: (e.g., simple and clean, magazine-style, warm tones)
- Suggest 3 blog name candidates
- Also tell me the list of pages I need"

Create the Blog Project with Claude

Now let's actually build the blog. Do not worry -- all the code will be written by AI! Step 1: Open a terminal (the black window) - Windows: Search for "PowerShell" in the Start menu - Mac: Open Spotlight (Cmd+Space) and search for "Terminal" Step 2: Navigate to the folder where you want to create the blog project Type the commands below in the terminal. Step 3: Run the project creation commands Copy/paste the commands from the code block below one line at a time into the terminal. If any questions appear, just press Enter (select the default) for all of them. Step 4: Navigate to the blog project folder and ask Claude to build the entire blog Open the my-blog folder in Visual Studio Code, and send Claude the prompt below. You will see something like this if successful: - Commands execute without errors in the terminal - Multiple files and folders are created inside the my-blog folder If you see "npx: command not found": Node.js is not properly installed. Download the LTS version again from nodejs.org. If you see "npm ERR!": Check your internet connection. You need to be connected to Wi-Fi.

# 1. Navigate to Desktop (we will create the project on the Desktop)
# Windows:
cd ~/Desktop

# Mac:
cd ~/Desktop

# 2. Create a Next.js project (copy/paste the line below)
npx create-next-app@latest my-blog --typescript --tailwind --app --src-dir

# 3. Navigate to the project folder
cd my-blog

# 4. Install additional tools needed for the blog
npm install gray-matter remark remark-html reading-time

# 5. Start the development server (preview the blog)
npm run dev

# With the server running, open http://localhost:3000 in your browser
# and you will see the default Next.js page.
# Press Ctrl+C to stop the server.

Ask Claude to Build the Entire Blog

Once the project is created, ask Claude to build the entire blog. The key is describing "what kind of blog you want" in detail. You do not need to understand any code. Step 1: Go to claude.ai and send the prompt below. (Modify the parts in parentheses with the details you decided during planning) Step 2: Claude will generate code for multiple files. Save each piece of code to the file path that Claude specifies. - In Visual Studio Code, create a new file at the given path and paste the code. Step 3: Verify the result - Run npm run dev in the terminal - Open http://localhost:3000 in your browser - If you see the blog layout, it is a success! If you see errors: Copy the error message exactly and send it to Claude. "I got this error. Please fix it: (paste the error message)" If you do not like the design: Ask Claude for specific changes. Example: "Change the header color to blue" or "Show thumbnail images in the post list."

# Prompt to send to Claude (copy/paste and modify):

"A Next.js project has already been created.
Build a blog called (your blog name).

Requirements:
1. When I put .md (Markdown) files in the content/posts/ folder,
   the post listing and detail pages should be generated automatically
2. Categories: (categories you decided during planning)
3. Design: (design style you decided during planning)
4. Pages needed:
   - Home page (latest post list)
   - Post detail page
   - About page
   - Posts by category page
5. Already installed packages: gray-matter, remark, remark-html, reading-time
6. Auto-generate SEO meta tags
7. Responsive design (looks good on mobile too)

Give me the complete code and file path for each file.
Also create 2 sample Markdown post files."

Writing Blog Posts in Markdown

Once the blog code is complete, it is time to write posts. Markdown is an easy syntax that you can write in any simple text editor. Basic Markdown syntax (this is all you need to know): - # Heading (large text) - ## Subheading (medium text) - **bold** (wrap with double asterisks) - *italic* (wrap with single asterisks) - - List item (start with a hyphen) - [link text](URL) (create a link) -  (insert an image) How to write a post: 1. Create a new .md file in the content/posts/ folder 2. Use an English filename (e.g., my-first-post.md) 3. Write post metadata (frontmatter) at the top of the file 4. Write the body content below it The frontmatter is metadata written between --- markers. It is used for the title and description that appear in Google search results. You will see something like this if successful: After running npm run dev, the new post appears in the list in the browser If the post does not show up: - Check that the file extension is .md - Make sure the file is inside the content/posts/ folder - Verify the frontmatter (the part between ---) format is correct If you want AI to write the post content: Ask Claude. "Write a blog post about (topic) in Markdown format. Include the frontmatter too."

# Example content/posts/my-first-post.md file
# Copy the content below and save it as
# my-first-post.md in the content/posts/ folder.

---
title: "My Experience Building a Blog as a Non-Developer"
date: "2025-01-15"
description: "A marketer with zero coding experience shares the journey of building a blog with AI."
category: "AI Tips"
tags: ["AI", "blog", "non-developer"]
---

# My Experience Building a Blog as a Non-Developer

Hello! I am a marketer with absolutely no coding experience.

## Why I Decided to Build My Own Blog

I ran a blog on a platform for 3 years, but it never ranked well in Google search.
So I decided to **build my own blog with the help of AI**.

## What I Needed

- Claude AI (Pro subscription)
- A bit of courage (no coding skills required!)

## The Result

It turned out to be **not as difficult as I expected**.
Since AI writes all the code, I only needed to describe *what I wanted to build*.

SEO Optimization - Getting Your Blog to Show Up on Google

The biggest advantage of a self-hosted blog is full control over SEO (Search Engine Optimization). For your blog to appear in Google search, you need three things. What is SEO? It is the process of organizing information so search engines (Google) can find your blog easily. Think of it like adding a classification number to a book so it can be found in a library. Three things you need: 1. Meta tags - Information that tells Google the title and description of each post (already included in blog code) 2. sitemap.xml - A file that tells Google about all the posts on your blog 3. robots.txt - A file that gives Google permission to read your blog Ask Claude like this: "Add SEO optimization to my blog. 1. Auto-generate meta tags (title, description, OG image) for each post 2. Create a sitemap.xml auto-generation file 3. Create a robots.txt file too 4. My blog domain is (your domain or xxx.vercel.app)" What is an OG image? When you share a blog link on social media or messaging apps, a preview image appears -- that is called an OG image. Save a 1200x630px image as public/images/default-og.png. You will see something like this if successful: - Visiting http://localhost:3000/sitemap.xml shows an XML-formatted list of posts - Viewing page source (Ctrl+U) shows <title> and <meta description> tags If the sitemap does not show up: Show the error to Claude and ask for a fix.

Upload Code to GitHub

You need to upload your blog code to GitHub so Vercel can auto-deploy it. Think of GitHub as a "code storage locker." Step 1: Create a new repository on GitHub - Log in to github.com - Click the + button in the upper right > Select "New repository" - Repository name: my-blog - Select Public (free) - Click "Create repository" Step 2: Upload code to GitHub from the terminal Open a terminal in the my-blog folder and run the commands below one line at a time. (Only change the "yourusername" part to your own GitHub username) You will see something like this if successful: - Visiting github.com/yourusername/my-blog shows your files If you see "fatal: not a git repository": - Make sure you are running the commands inside the my-blog folder - Navigate with cd ~/Desktop/my-blog and try again If it asks for a password: - You need to generate a Personal Access Token on GitHub - Ask Claude "How do I create a GitHub Personal Access Token?"

# Run in the my-blog folder (copy/paste one line at a time)

# 1. Initialize Git
git init

# 2. Add all files
git add .

# 3. Create the first commit
git commit -m "Initial blog deployment"

# 4. Set the branch name
git branch -M main

# 5. Connect to GitHub repository (change "yourusername" below!)
git remote add origin https://github.com/yourusername/my-blog.git

# 6. Upload to GitHub
git push -u origin main

Deploy on Vercel and Register with Google Search Console

Vercel is a service that puts your blog on the internet for free. When connected to GitHub, it automatically updates whenever you add new posts. Step 1: Sign up for Vercel - Go to vercel.com - Click "Sign Up" - Select "Continue with GitHub" (log in with your GitHub account) Step 2: Import project - Click "Add New..." > "Project" - Select the my-blog repository under "Import Git Repository" - Click "Import" Step 3: Configure and deploy - Framework Preset: "Next.js" (auto-detected) - No need to change other settings - Click "Deploy" - Wait 1-2 minutes and deployment is complete! Step 4: Verify deployment - After deployment, a URL in the format https://my-blog-xxxx.vercel.app is generated - Visit this URL and your blog appears! You will see something like this if successful: - Green checkmark on the Vercel dashboard - Blog displays correctly at the provided URL If deployment fails (red X): - Click "View Build Logs" to check the error log - Show the error log to Claude and ask "This is a Vercel deployment error, please fix it" Step 5: Connect a custom domain (optional) - Only proceed if you purchased a domain - Vercel Dashboard > Settings > Domains - Enter your purchased domain (e.g., myblog.com) - Apply the DNS settings Vercel provides at your domain registrar - If unsure, ask Claude "How do I connect a domain from (your registrar name) to Vercel?" Step 6: Register with Google Search Console - Go to search.google.com/search-console and log in with your Google account - Click "Add property" - Select "URL prefix" tab - Enter your blog URL (https://my-blog-xxxx.vercel.app or custom domain) - Choose the "HTML tag" verification method (easiest) - Copy the <meta> tag shown and ask Claude "Add this meta tag to my blog's head: (paste the tag)" - After updating the code, push to GitHub (git add . && git commit -m "Add Search Console tag" && git push) - After Vercel auto-deploys, click "Verify" in Search Console - Go to "Sitemaps" in the left menu and submit sitemap.xml Search indexing timeline: Can take a few days to 1-2 weeks. Use "URL Inspection" to request indexing for specific posts to speed things up.

# Push code changes to GitHub (repeat this process after adding new posts too)
# Run in the my-blog folder

git add .
git commit -m "Add Google Search Console integration"
git push

# Running these commands triggers Vercel to auto-redeploy.
# Changes will be live in 1-2 minutes.

Adding New Posts and Operations/Expansion Tips

Your blog is complete! From now on, it is just about adding posts and managing it. How to add a new post (the process you will repeat): 1. Write a new .md file in the content/posts/ folder 2. Run git add . && git commit -m "New post: Title" && git push in the terminal 3. Vercel auto-deploys (takes 1-2 minutes) 4. Done! Operations tips: - Posting 1-2 times per week consistently will rapidly increase Google search visibility - Posts of at least 1,000 words perform better for SEO - Write each post's description (summary) in an engaging way, around 150 characters - Save images in the public/images/ folder and reference them in Markdown Google AdSense monetization (optional): - You can apply once you have about 30+ quality posts - Apply at adsense.google.com - Approval usually takes 1-2 weeks - After approval, ask Claude "Add AdSense ad code to my blog" Expansion tips: - Dark mode: Ask Claude "Add a dark mode toggle button to my blog" - Comments: Ask Claude "Add comments using giscus" (free) - Newsletter: Ask Claude "Add an email subscription form" - Analytics: Ask Claude "Integrate Google Analytics into my blog" (free) If the blog does not load: Check the build status on the Vercel dashboard. If it is red, send the error log to Claude. If posts look broken: Check the frontmatter (the part between ---) format in the Markdown file. There must be a space after each colon (:).

# Full process for adding a new post (just repeat this every time)

# 1. Write a new .md file in the content/posts/ folder
#    (use English filenames, separated by hyphens)
#    Example: content/posts/second-post.md

# 2. Upload to GitHub from the terminal
cd ~/Desktop/my-blog
git add .
git commit -m "Add new post: second post"
git push

# 3. Auto-deployed in 1-2 minutes!
# Visit your blog URL in the browser to see the new post.

# === Useful Commands Reference ===

# Preview the blog (check before publishing)
npm run dev
# Open http://localhost:3000 in the browser

# Stop the preview
# Press Ctrl+C