- Published on
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
- A desire to blog and learn ❤️
- Basic programming skills and English reading ability
- An email account
- GitHub account
- Vercel account
Step 1: Sign Up for GitHub (Free Plan)
- Go to GitHub
- Click the "Sign up" button in the top right corner
- Fill in:
- Password
- Username
- Complete email verification
Step 2: Sign Up for Vercel (Free Plan)
- Go to Vercel
- Click "Sign Up" in the top right corner
- Choose "Continue with GitHub"
- Authorize Vercel to access your GitHub account
Step 3: Choose and Deploy a Blog Template
- Go to Vercel and log in
- Click "Add New..." → "Project" in the top right
- Browse blog templates in the "Clone Template" section



- After choosing your preferred template, click the "Deploy" button
- Vercel will automatically:
- Clone the template to your GitHub account
- Create a new project
- Start the deployment process
- 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)
Modify
data/siteMetadata.js
:- Website title
- Author information
- Social media links
Update your personal information in
data/authors/default.md
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
- Go to your GitHub project page
- Navigate to the
data/blog
folder - Click "Add file" → "Create new file" in the top right
- Use this filename format:
YYYY-MM-DD-article-title.mdx
- 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...
- Scroll to the bottom of the page
- Add a commit message (e.g., "Add new article: xxx")
- Click "Commit changes"
- Wait 1-2 minutes for Vercel to automatically update your site
To modify existing articles:
- Find the file you want to edit on GitHub
- Click the pencil icon (Edit this file) in the top right
- Make your changes
- Click "Commit changes"
Method 2: Using Git
If you're familiar with Git commands:
- Create a new
.mdx
file indata/blog
- Add the frontmatter (title, date, etc.)
- Write your content in Markdown format
- 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!