Deploy Your Site on Vercel

Follow these steps in order.

Step 1. Install Git

Git is required so you can push your project to GitHub and connect it to Vercel.

1. 1.a.i.

   Go to the official Git website

   https://git-scm.com/downloads

2. 2.b.ii.

   Download the installer for your system Windows or Mac.
3. 3.c.iii.

   Install using default recommended settings.
4. 4.d.iv.

   After installation open your terminal and confirm Git is installed:

git --version

If you see a version number then Git is installed correctly.

Step 2. Create a GitHub Account

GitHub stores your project online and connects with Vercel.

1. 1.a.i.

   Go to https://github.com
2. 2.b.ii.

   Create an account and verify your email.
3. 3.c.iii.

   Keep GitHub signed in.

Step 3. Open Your Project Folder in VS Code

If you have not already done this, follow the guide here:

/notion-cms/docs/setup/open-in-vscode

Make sure Node.js is installed and the project opens correctly in VS Code.

Step 4. Turn the project into a Git repository

In VS Code open the terminal and run:

git init
git add .
git commit -m "Initial project"

This saves your current files as the first snapshot.

Step 5. Create a repository on GitHub

1. 1.a.i.

   Go to GitHub and click New Repository.
2. 2.b.ii.

   Name it something simple like website, portfolio, or your project name.
3. 3.c.iii.

   Leave it empty. Do not add a README or license because you already committed locally.
4. 4.d.iv.

   Create the repo.

GitHub will show instructions to connect your local code. Use these commands:

git remote add origin https://github.com/your-username/your-repo-name.git
git branch -M main
git push -u origin main

Once done check GitHub. You should see all files uploaded.

Step 6. Create a Vercel account

1. 1.a.i.

   Go to https://vercel.com
2. 2.b.ii.

   Sign up using your GitHub account.
3. 3.c.iii.

   Allow access when Vercel asks for repository permission.

Step 7. Import your GitHub project to Vercel

1. 1.a.i.

   In Vercel click New Project.
2. 2.b.ii.

   Select your repository.
3. 3.c.iii.

   Vercel will detect that it is a Next.js project.
4. 4.d.iv.

   Continue to the project setup screen.

Step 8. Add required environment variables

Open the .env.example file in your project. You will see the required environment keys.

Add these on Vercel in Project Settings → Environment Variables.

Example values:

NOTION_API_KEY=
NOTION_DATABASE_ID=
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=

Only add the values you use. Keep them private.

Save the variables.

Step 9. Deploy the site

After you save your environment variables click Deploy or push another commit to GitHub.

Vercel will build the project and give you a live URL.

You can now preview your website online.

Step 10. Test everything

Check:

• Home page loads
• Internal links work
• Blog or project pages load
• Icons thumbnails and images load
• Metadata looks correct
• No missing environment variables

If something is broken check Vercel build logs.

Step 11. Connect your custom domain (optional)

If you have a domain:

1. 1.a.i.

   Go to Vercel → Project → Domains
2. 2.b.ii.

   Add your domain
3. 3.c.iii.

   Follow DNS instructions
4. 4.d.iv.

   Wait for DNS to update

Your website will start loading on your domain when DNS finishes.

Final Tips

• Every time you push code to the main branch the site redeploys automatically.
• Keep file names clean and unique especially for images and PDF files.
• If you add new environment variables redeploy the site.
• Use external hosting for large videos or heavy media to avoid long build times.