Build Your Personal Blog in One Hour - A Vercel Setup Guide

This article will show you how to quickly build a personal blog using Vercel and Next.js templates. With basic programming knowledge, you can complete it in less than an hour!

Prerequisites

1. A desire to blog and learn ❤️
2. Basic programming skills and English reading ability
3. An email account
4. GitHub account
5. Vercel account

Step 1: Sign Up for GitHub (Free Plan)

1. Go to GitHub
2. Click the "Sign up" button in the top right corner
3. Fill in:
   • Email
   • Password
   • Username
4. Complete email verification

Step 2: Sign Up for Vercel (Free Plan)

1. Go to Vercel
2. Click "Sign Up" in the top right corner
3. Choose "Continue with GitHub"
4. Authorize Vercel to access your GitHub account

Step 3: Choose and Deploy a Blog Template

1. Go to Vercel and log in
2. Click "Add New..." → "Project" in the top right
3. Browse blog templates in the "Clone Template" section

4. After choosing your preferred template, click the "Deploy" button
5. Vercel will automatically:
   • Clone the template to your GitHub account
   • Create a new project
   • Start the deployment process
6. Wait for deployment to complete, which usually takes only 1-2 minutes

Step 4: Customize Your Blog (Using Tailwind Nextjs Starter Blog as an Example)

1. Modify data/siteMetadata.js:

   • Website title
   • Author information
   • Social media links

2. Update your personal information in data/authors/default.md

3. Add new articles in the data/blog folder

Start Writing!

Congratulations! You now have your own blog. Publishing new articles is simple, and here are two methods:

Method 1: Edit Directly on GitHub

1. Go to your GitHub project page
2. Navigate to the data/blog folder
3. Click "Add file" → "Create new file" in the top right
4. Use this filename format: YYYY-MM-DD-article-title.mdx
5. Copy this template into the editor:

   ---
   title: 'Article Title'
   date: '2024-03-01'
   tags: ['category-tags']
   draft: false
   summary: 'Article summary'
   ---
   
   Your article content goes here...
   

6. Scroll to the bottom of the page
7. Add a commit message (e.g., "Add new article: xxx")
8. Click "Commit changes"
9. Wait 1-2 minutes for Vercel to automatically update your site

To modify existing articles:

1. Find the file you want to edit on GitHub
2. Click the pencil icon (Edit this file) in the top right
3. Make your changes
4. Click "Commit changes"

Method 2: Using Git

If you're familiar with Git commands:

1. Create a new .mdx file in data/blog
2. Add the frontmatter (title, date, etc.)
3. Write your content in Markdown format
4. Push to GitHub using these commands:

   git add .
   git commit -m "Add new article: xxx"
   git push
   

With either method, Vercel will automatically detect changes and update your site.

Conclusion

After completing these steps, your blog will be deployed at xxx.vercel.app. If you want to use your own domain (e.g., www.myblog.com), check out the next article. Now that you have your own blog, start sharing your stories!