🎟️ Guide: Deploying a Static or Next.js Site to Vercel

This guide shows how to deploy a simple static or Next.js site to Vercel. It also demonstrates all key Gutenberg formatting features — similar to Notion pages.

Table of Contents

• Requirements
• Connecting Your Repository
• Deploying to Vercel
• Adding a Custom Domain
• Next Steps

1. Requirements

• A GitHub, GitLab, or Bitbucket account
• A simple website or Next.js project
• A free account on Vercel.com

💡 Tip: Vercel works best with Next.js, but you can also deploy plain HTML, React, or Svelte apps.

2. Connect Your Repository

To deploy automatically, push your code to a GitHub repository and connect it to Vercel:

1. Go to Vercel Dashboard.
2. Click “Add New…” → “Project”.
3. Select your Git provider and authorize access.
4. Pick the repository you want to deploy.

Example Folder Structure

.
├── public/
│   ├── index.html
│   └── styles.css
├── package.json
└── vercel.json

3. Deploy to Vercel

Once connected, Vercel automatically builds and deploys your project.

Each time you push to main, a new deployment is created automatically.

Manual Deploy (optional)

vercel deploy --prod

4. Add a Custom Domain

After deployment, you can connect your own domain:

• Go to Settings → Domains in your Vercel dashboard.
• Add your domain name.
• Update your DNS records as instructed.

5. Next Steps

• [ ] Connect Analytics
• [ ] Enable Environment Variables
• [x] Set up GitHub Auto Deploys
• [ ] Invite Team Members

Useful Resources

✅ Success: You’ve now deployed your first website to Vercel! Each commit triggers a new build and preview automatically.