Deploy a Portfolio to Vercel

Deploy a personal portfolio website to Vercel's global CDN with CI/CD.

Introduction

30 Second Summary

Every developer needs a home on the internet. Whether you are applying for jobs, showcasing side projects, or just proving you can ship something live, a personal portfolio site is your digital handshake.

In this project, you will build a personal portfolio website and deploy it to Vercel, a modern hosting platform. You will learn how to push your site live with a single command, then set up automatic deployments every time you update your code.

What You'll Build

A personal portfolio website deployed to Vercel's global CDN, with a complete deployment pipeline that auto-deploys your changes from GitHub.

By the end of this project, you'll have:

  • A live portfolio website accessible via a Vercel-generated URL with automatic HTTPS.
  • Hands-on experience with the Vercel CLI workflow, including preview deployments and production deployments.
  • A working Git-based CI/CD pipeline that automatically deploys your site every time you push code.
  • Secret Mission: Add a custom 404 error page and configure URL rewrites using vercel.json.

Are there any prerequisites?

None. This project includes full setup instructions for every tool you need, including Node.js, Git, and the Vercel CLI.

Before We Start

Before We Start...

Set Up Your Tools

Before you can deploy anything to the web, you need a set of tools installed on your machine. These tools handle everything from running commands in the terminal to pushing your code live.

In this step, you will install Node.js, the Vercel CLI, and a code editor. Then you will create a free Vercel account and authenticate so you can deploy straight from the terminal.

In this step, get ready to:
  • Install Node.js, VS Code, and Git.
  • Install the Vercel CLI.
  • Create a Vercel account and authenticate the CLI.
Install Node.js and verify

The Vercel CLI runs on Node.js, a JavaScript runtime. You need version 18 or higher installed on your machine.

  • Download and install Node.js from the official site: https://nodejs.org/en/download.
  • Choose the LTS version for your operating system (macOS or Windows).
  • Run the installer and accept the default settings.

What is Node.js?

Node.js is a runtime that lets you execute JavaScript outside of a web browser. Many developer tools (including the Vercel CLI) are built on Node.js, so installing it also gives you npm, the package manager you will use to install other tools.

Once the installer finishes, open a terminal to verify the installation.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Terminal (macOS) or PowerShell (Windows) and press Enter to open it.
  • Check your Node.js version by running this command:
node --version

✔️ I see version 18 or higher

Your output shows something like v22.x.x or v24.x.x. Node.js is ready to go.

  • Also confirm npm is available by running:
npm --version

You should see a version number printed. Both tools are ready.

ⓧ I see an older version

If you see a version below 18 (for example v16.x.x), you need to upgrade.

  • Visit https://nodejs.org/en/download and download the latest LTS installer for your operating system.
  • Run the installer. It will replace your current version.
  • Close and reopen your terminal, then run node --version again to confirm it now shows 18 or higher.

ⓧ Command not found

Node.js is not installed yet.

  • Visit https://nodejs.org/en/download and download the LTS installer for your operating system.
  • Run the installer and accept the default settings.
  • Close and reopen your terminal, then run node --version to confirm it now shows a version number.

You also need VS Code (your code editor) and Git (version control) installed.

  • Download and install VS Code from https://code.visualstudio.com.
  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Visual Studio Code and press Enter to open it.

Next, check that Git is installed by running this in your terminal:

git --version

✔️ I see a version number

Your output shows something like git version 2.x.x. Git is ready.

ⓧ Command not found

Git is not installed yet.

  • On macOS, run xcode-select --install in your terminal. This installs Git as part of the Xcode Command Line Tools.
  • On Windows, download the installer from https://git-scm.com/install/windows and run it with default settings.
  • Close and reopen your terminal, then run git --version again to confirm.
Install the Vercel CLI

The Vercel CLI lets you deploy projects straight from your terminal. You install it globally with npm so it is available from any folder.

  • Install the Vercel CLI globally by running this command:
npm i -g vercel

What does this command do?

npm i -g vercel tells npm to install the vercel package globally (-g). A global install means the vercel command is available system-wide, not just inside one project.

  • Verify the installation by running:
vercel --version

You should see a version number printed in the terminal.

Command not found after installing?

If your terminal does not recognize vercel after running the install command, try these fixes:

  • Close your terminal completely and open a new one. Global packages sometimes need a fresh shell session to be recognized.
  • On macOS or Linux, you may see a permission error during install. Try running the install with sudo npm i -g vercel instead.

help me fix a Vercel CLI installation error

Create a Vercel account and log in

Vercel offers a free Hobby plan for personal projects. You will create an account and then link it to your CLI so deployments are tied to your account.

  • Open https://vercel.com in your browser.
  • Click Sign Up and create a free Hobby account.
  • You can sign up with your GitHub account or with an email address.

What is the Hobby plan?

The Hobby plan is Vercel's free tier for personal, non-commercial projects. It includes automatic HTTPS, a global CDN, and up to 100 deployments per day. No credit card is required.

Now authenticate the CLI so it can deploy on your behalf.

  • In your terminal, log in to Vercel by running:
vercel login
  • The CLI will open your default browser to a Vercel login page.
  • Confirm the login in the browser by clicking Continue.
  • Switch back to your terminal. You should see a success message confirming you are logged in.

Browser didn't open?

If a browser window did not appear automatically, look in your terminal for a URL. Copy and paste that URL into your browser manually to complete authentication.

help me log in to Vercel from the CLI

Your development environment is ready. Next up, you will build a portfolio page and get it live on the internet in under a minute.

Build Your Portfolio Page

Your development environment is ready with Node.js, the Vercel CLI, and VS Code all set up. Now it's time to build the website you'll deploy to the internet.

You'll create a personal portfolio page using plain HTML and CSS. No frameworks or build tools needed. Vercel can serve static files directly, so a simple HTML site is all you need to go live.

In this step, get ready to:
  • Create a project folder with an HTML portfolio page.
  • Style the page with responsive CSS.
  • Preview your portfolio in the browser.
Create your project folder and files

Before writing any code, you need a dedicated folder for your project. This keeps your portfolio files organized and gives Vercel a clear root directory to deploy from.

  • Open the integrated terminal in VS Code by pressing Ctrl+` (macOS and Windows).
  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder and move into it by running these commands:
mkdir my-portfolio
cd my-portfolio
  • Confirm you're in the new folder by running:
pwd
  • You should see a path ending in my-portfolio.

Seeing 'No such file or directory'?

Make sure you ran cd ~/Desktop first. The tilde (~) refers to your home directory, and Desktop must exist there.

help me fix a 'No such file or directory' error when creating my project folder

Now open this folder in VS Code so you can create files inside it.

  • In VS Code, click File in the top menu bar.
  • Click Open Folder.
  • Select the my-portfolio folder on your Desktop, then click Open.

Why open the folder in VS Code?

Opening a folder (not just a file) tells VS Code to treat it as a project. The Explorer sidebar shows all files in that folder, and the integrated terminal starts in the same directory.

Now create the HTML file for your portfolio.

  • In the VS Code Explorer sidebar on the left, hover over the folder name and click the New File icon.
  • Type index.html and press Enter.
  • Paste the following HTML into the new file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <!-- Link to external stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <!-- Hero section with name and tagline -->
        <section class="hero">
            <h1>Hi, I'm Alex</h1>
            <p class="tagline">Aspiring web developer learning to build and deploy modern websites.</p>
        </section>
        <!-- About section with bio -->
        <section class="about">
            <h2>About Me</h2>
            <p>I'm passionate about creating clean, functional websites. Currently learning web development and cloud deployment with tools like Vercel.</p>
        </section>
        <!-- Links section with social profiles -->
        <section class="links">
            <h2>Find Me Online</h2>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://linkedin.com">LinkedIn</a></li>
            </ul>
        </section>
    </main>
    <footer>
        <p>Deployed with Vercel</p>
    </footer>
</body>
</html>

What does this code do?

  • The <main> element wraps three sections: a hero with your name, an about section with a short bio, and a links section with your social profiles.
  • The <link rel="stylesheet" href="style.css"> tag connects this page to the CSS file you'll create next.
  • The <footer> adds a small note at the bottom showing this site is deployed with Vercel.
  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).

You won't see the result in a browser yet. You'll preview the page after adding styling in the next substep.

Add styling

Your HTML page has all the content, but it needs CSS to look polished. You'll add a stylesheet with responsive layout, clean typography, and link colors.

  • In the VS Code Explorer sidebar, hover over the folder name and click the New File icon again.
  • Type style.css and press Enter.
  • Paste the following CSS into the new file:
/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Page layout - centered column with comfortable reading width */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Push footer to the bottom */
main {
    flex: 1;
}

/* Hero section - centered name and tagline */
.hero {
    text-align: center;
    padding: 4rem 0 2rem;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.tagline {
    font-size: 1.2rem;
    color: #666;
}

/* Spacing between content sections */
section {
    margin-bottom: 2rem;
}

h2 {
    margin-bottom: 0.5rem;
    color: #111;
}

/* Clean link list without bullets */
ul {
    list-style: none;
}

ul li {
    margin-bottom: 0.5rem;
}

/* Link styling with Vercel-inspired blue */
a {
    color: #0070f3;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Footer pushed to bottom by flex layout */
footer {
    text-align: center;
    padding: 2rem 0;
    color: #999;
    font-size: 0.9rem;
}

What does this code do?

  • The universal selector (*) resets margins and padding so all browsers display the page consistently.
  • The body uses max-width: 800px and margin: 0 auto to center content in a readable column on any screen size.
  • Flexbox (display: flex on the body, flex: 1 on main) pushes the footer to the bottom of the page even when content is short.
  • Links use #0070f3 (Vercel's signature blue) for a clean, modern look.
  • Save style.css by pressing Cmd+S (macOS) or Ctrl+S (Windows).

Not seeing style.css in the sidebar?

Make sure you created the file inside the my-portfolio folder, not in a subfolder or outside the project. Both index.html and style.css should appear at the same level in the Explorer sidebar.

help me find where my style.css file was created

✔️ Awesome, I've got everything!

Great. Double check that both index.html and style.css are saved in your my-portfolio folder.

ⓧ I'd like to double check the full code

Here is the complete index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <section class="hero">
            <h1>Hi, I'm Alex</h1>
            <p class="tagline">Aspiring web developer learning to build and deploy modern websites.</p>
        </section>
        <section class="about">
            <h2>About Me</h2>
            <p>I'm passionate about creating clean, functional websites. Currently learning web development and cloud deployment with tools like Vercel.</p>
        </section>
        <section class="links">
            <h2>Find Me Online</h2>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://linkedin.com">LinkedIn</a></li>
            </ul>
        </section>
    </main>
    <footer>
        <p>Deployed with Vercel</p>
    </footer>
</body>
</html>

Here is the complete style.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.hero {
    text-align: center;
    padding: 4rem 0 2rem;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.tagline {
    font-size: 1.2rem;
    color: #666;
}

section {
    margin-bottom: 2rem;
}

h2 {
    margin-bottom: 0.5rem;
    color: #111;
}

ul {
    list-style: none;
}

ul li {
    margin-bottom: 0.5rem;
}

a {
    color: #0070f3;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

footer {
    text-align: center;
    padding: 2rem 0;
    color: #999;
    font-size: 0.9rem;
}
Preview locally

Before deploying anything, always check that your site looks correct on your own machine. This catches issues before they go live.

  • In the VS Code Explorer sidebar, right-click index.html.
  • Select Reveal in Finder (macOS) or Reveal in File Explorer (Windows).
  • Double-click index.html in the file browser to open it in your default web browser.

You should see a centered page with "Hi, I'm Alex" as a large heading, a tagline underneath, an About Me section, and two blue links for GitHub and LinkedIn.

What should I see?

The page has a clean, centered layout with generous whitespace. Your name appears large at the top, followed by your tagline in gray text. The footer reading "Deployed with Vercel" sits at the bottom of the page.

If the page looks unstyled (large text, blue underlined links, left-aligned), your style.css file is not being loaded. Check that both files are in the same folder and the filename in your <link> tag matches exactly.

Page looks unstyled or blank?

  • Verify that style.css is in the same folder as index.html. The link tag references style.css with no path prefix, so both files must sit together.
  • Check for typos in the filename. The file must be named exactly style.css (not styles.css or style.CSS).
  • Make sure you saved both files before opening in the browser.

help me figure out why my CSS is not loading on my HTML page

Your portfolio page is looking great locally. Next up, you'll deploy it to the internet using the Vercel CLI and get your first live URL.

Deploy with the Vercel CLI

Your portfolio page looks great locally. The next step is to put it on the internet so anyone can visit it with a URL.

Vercel makes this surprisingly fast. You will use the Vercel CLI to deploy your site directly from the terminal, first as a preview (for testing) and then to production (live for the world).

In this step, get ready to:
  • Deploy your portfolio to a preview URL using the Vercel CLI.
  • Visit your live preview deployment in the browser.
  • Promote your site to production with a permanent URL and automatic HTTPS.
Run your first deployment

When you run vercel in a project directory for the first time, the CLI walks you through an interactive setup. It asks a few questions to create a new Vercel project and link it to your local folder.

  • Switch back to your terminal. Make sure you are inside the my-portfolio folder.
  • Start your first deployment by running this command:
vercel

What prompts will I see?

The CLI asks several questions to set up your project. Accept the defaults for each one by pressing Enter:

  • Set up and deploy? Press Enter to confirm (Y).
  • Which scope do you want to deploy to? Select your account and press Enter.
  • Link to existing project? Press Enter to decline (N) and create a new one.
  • Project name? Press Enter to accept the default (my-portfolio).
  • In which directory is your code located? Press Enter to accept ./ (the current directory).
  • Want to override the settings? Press Enter to decline (N).

Vercel detects your site as a static project (no framework) and deploys it directly from the root directory. After a few seconds, the CLI outputs a preview URL.

  • Wait for the deployment to complete. The CLI prints a preview URL that looks something like https://my-portfolio-abc123.vercel.app.
  • Copy this URL from your terminal output.

Seeing an error about authentication?

If the CLI says you are not logged in, run vercel login again and complete the browser authentication before retrying.

help me fix a Vercel CLI authentication error

Visit your preview deployment

A preview deployment is a unique URL generated for a specific version of your code. It lets you test changes before they go live.

  • Open the preview URL you copied in your browser.
  • Confirm your portfolio page loads with the heading, bio, and links you created in the previous step.

Your site is already live on the internet at this preview URL. You can share it with anyone right now.

Why preview before production?

Preview deployments give you a safe space to verify changes. If something looks wrong, you can fix it and redeploy without affecting your live production site.

In a team setting, preview URLs are often shared in pull requests so teammates can review a change before it ships.

Page not loading at the preview URL?

Make sure you copied the full URL from the terminal output (it starts with https://). If the page appears blank, check that your index.html and style.css files are saved in the my-portfolio folder root.

help me troubleshoot my Vercel preview deployment not loading

Deploy to production

Your preview deployment proves everything works. Now it is time to promote your site to production so it gets a permanent, clean domain.

  • Deploy to production by running this command:
vercel --prod

What does production mean here?

A production deployment assigns your site to your project's primary domain (e.g., my-portfolio.vercel.app). This is the URL you share publicly.

Vercel automatically provisions an SSL certificate so your site is served over HTTPS. No extra configuration needed.

  • Copy the production URL from the terminal output.
  • Open it in your browser. You should see your portfolio site served from a permanent .vercel.app domain with a padlock icon in the address bar (confirming HTTPS).

Do not see the padlock or HTTPS?

Vercel provisions SSL certificates automatically, but it can take a few seconds. Refresh the page after a moment. If the URL in your browser starts with http:// instead of https://, manually change it to https:// and reload.

help me understand why my Vercel production site is not showing HTTPS

Your portfolio is now live on the internet with a permanent URL and automatic HTTPS. Next up, you will connect GitHub so that every code change you push triggers an automatic deployment.

Connect GitHub for Automatic Deployments

Your portfolio is live on Vercel, but right now the only way to update it is by running vercel --prod manually every time you change something.

In this step, you'll connect your project to GitHub so that every time you push code, Vercel automatically deploys the update. This is called CI/CD (Continuous Integration/Continuous Deployment).

In this step, get ready to:
  • Initialize a Git repository and push your code to GitHub.
  • Connect your GitHub repository to Vercel for automatic deployments.
  • Test the full CI/CD loop by pushing a change and watching Vercel deploy it.
Initialize a Git repository and push to GitHub

Before Vercel can auto-deploy your changes, your code needs to live in a Git repository on GitHub. You'll set that up now.

  • Create a .gitignore file to tell Git which files to skip. In VS Code, create a new file called .gitignore in your my-portfolio folder and add the following content:
# Vercel CLI generated files
.vercel

Why a .gitignore?

The .vercel folder was created when you first ran vercel in the previous step. It contains local project settings that are specific to your machine. You don't want these in your shared repository.

  • Save .gitignore.
  • Initialize your Git repository and make your first commit by running these commands in your terminal:
git init
git add .
git commit -m "Initial commit: portfolio site"

What do these commands do?

  • git init creates a new Git repository in your project folder.
  • git add . stages all your files (index.html, style.css, .gitignore) for the commit.
  • git commit saves a snapshot of your files with a message describing the change.
  • You should see output confirming your commit with the message and the number of files committed.

Now you need a GitHub repository to push this code to.

  • Open your browser and go to github.com.
  • Click the + icon in the top right corner, then click New repository.
  • Enter my-portfolio as the repository name.
  • Leave the repository set to Public.
  • Do NOT check any of the initialization boxes (no README, no .gitignore, no license). You already have your files locally.
  • Click Create repository.

GitHub will show you a page with setup commands. You'll use the commands for pushing an existing repository.

  • Connect your local repository to GitHub and push your code by running these commands:
git remote add origin [[YOUR_REPO_URL="https://github.com/your-username/my-portfolio.git"]]
git branch -M main
git push -u origin main

What do these commands do?

  • git remote add origin links your local repository to the GitHub repository you just created.
  • git branch -M main renames your default branch to main (the standard name Vercel looks for).
  • git push -u origin main uploads your code to GitHub.

Find your repository URL

Copy the URL from the GitHub page that appeared after you created the repository. It ends in .git and looks like https://github.com/your-username/my-portfolio.git.

  • Refresh your GitHub repository page in the browser. You should see index.html, style.css, and .gitignore listed in the repository.

Push failed or authentication error?

  • If you see a permission or authentication error, GitHub may need you to authenticate. Follow the browser prompt that appears, or set up a personal access token in your GitHub settings.
  • Make sure you copied the correct repository URL from the GitHub page.

Help me fix a git push authentication error

Connect GitHub to Vercel

Your code is on GitHub. Now you'll connect the repository to Vercel so it knows to deploy automatically whenever you push new code.

  • Open the Vercel dashboard in your browser at vercel.com.
  • Click on your my-portfolio project from the project list.
  • Click Settings in the top navigation bar.
  • Click Git in the left sidebar menu.
  • Under Connected Git Repository, click the button to connect your GitHub account if prompted.
  • Search for and select your my-portfolio repository.
  • Click Connect to link the repository.

What happens after connecting?

Once connected, Vercel watches your repository. Every push to the main branch triggers a production deployment. Pushes to other branches create preview deployments with their own unique URLs.

Use the CLI instead

You can also connect from your terminal by running vercel git connect in your project folder. The CLI detects your Git remote and links it to your Vercel project automatically.

  • Confirm the connection by checking that the Git settings page now shows your GitHub repository name under Connected Git Repository.

Don't see your repository?

  • If your repository doesn't appear, click Configure GitHub App and grant Vercel access to your repositories.
  • Make sure you pushed your code to GitHub before trying to connect.

Help me connect my GitHub repo to Vercel

Test automatic deployment

The real power of this setup is that you never need to run a deploy command again. Every push triggers Vercel to build and deploy automatically.

  • In VS Code, open index.html.
  • Find this line inside the <section class="about"> section:
<p>I'm passionate about creating clean, functional websites. Currently learning web development and cloud deployment with tools like Vercel.</p>
  • Replace it with a slightly different sentence so you can see the change after deployment. For example:
<p>I'm passionate about creating clean, functional websites. Currently building projects and deploying them with modern tools like Vercel.</p>
  • Save index.html.
  • Commit and push your change by running these commands:
git add .
git commit -m "Update bio text"
git push
  • Open your Vercel dashboard and click on your my-portfolio project.
  • Watch the Deployments section. Within seconds, you should see a new deployment appear with the commit message "Update bio text".
  • Once the deployment finishes (usually under 10 seconds for a static site), visit your production URL to confirm your updated text is live.

What just happened?

You pushed code to GitHub. Vercel detected the push, pulled your latest code, built the site, and deployed it to its global CDN. No manual deploy command needed.

This is the core CI/CD workflow that professional teams use. Every code change goes through the same automated pipeline.

Deployment not showing up?

  • Make sure git push completed without errors in your terminal.
  • Check that your repository is still connected in the Vercel dashboard under Settings > Git.
  • Verify that the Git email on your machine matches the email on your GitHub account. Run git log -1 to check.

Why isn't my push triggering a Vercel deployment?

Your CI/CD pipeline is running. Next up, you'll explore the Vercel dashboard to understand deployment details, environments, and the preview workflow for branches.

Explore Your Deployment

Your portfolio is live and auto-deploys on every push. That covers the shipping workflow, but there is more to understand about how Vercel manages your deployments behind the scenes.

In this step, you will explore the Vercel dashboard to inspect build details, understand the three deployment environments, and test the preview workflow that keeps your production site safe while you experiment on branches.

In this step, get ready to:
  • Inspect deployment details in the Vercel dashboard.
  • Understand Vercel's three deployment environments.
  • Test the preview workflow with a feature branch.
Inspect deployment details

Every deployment on Vercel comes with build logs, timing information, and a breakdown of the files it serves. This is where you go to debug a broken deploy or confirm that your latest push shipped correctly.

  • Open your browser and go to vercel.com.
  • Click on your my-portfolio project to open the Project Overview page.
  • Click Deployments in the sidebar.
  • Click on your latest deployment (the most recent entry at the top of the list).

You should see the Deployment Details page with your build time, the detected framework, and any logs from the build process.

  • Expand the Deployment Summary section to see your static assets listed with their file sizes.

What am I looking at?

The Deployment Details page is your debugging home base. It shows the build duration, which files were uploaded (your index.html and style.css), and any errors or warnings from the build.

Since your project is a static site with no build step, the logs are minimal. For framework-based projects, this page becomes essential for catching build errors.

Understand your three environments

Vercel organizes every project into three environments. Understanding these helps you know where your code goes when you push, and why preview URLs exist.

  • Return to your Project Overview by clicking your project name in the top navigation.

On this page you can see your production deployment URL, recent commit details, and any active preview deployments.

What are the three environments?

  • Local is your machine. You develop and test here before pushing any code.
  • Preview is created automatically when you push a branch that is not your production branch, or when you create a pull request. Each preview deployment gets its own unique URL for testing without affecting your live site.
  • Production is your live site on the .vercel.app domain. Pushing to main (or merging a PR into main) triggers a production deployment automatically.
Test the preview workflow

Preview deployments are what make branch-based development safe. You can push experimental changes without touching production. Vercel creates a separate URL for each branch so you can review before merging.

  • Switch back to your terminal in VS Code.
  • Create a new Git branch by running this command:
git checkout -b test-preview
  • Open index.html in VS Code.
  • Find this line inside the <footer> section:
<p>Deployed with Vercel</p>
  • Replace it with:
<p>Deployed with Vercel - Preview Test</p>
  • Save index.html.
  • Commit and push your branch by running these commands:
git add .
git commit -m "Test preview deployment"
git push origin test-preview

What happens next?

Because you pushed to a branch that is not main, Vercel automatically creates a preview deployment. This gives your branch its own URL without changing your live production site.

  • Return to the Vercel dashboard and click Deployments in the sidebar.
  • Look for a new deployment labeled with your test-preview branch name. It will have a Preview badge next to it.
  • Click the deployment URL to open your preview site in a new tab.

You should see the updated footer text saying "Deployed with Vercel - Preview Test" on the preview URL.

  • Now visit your production URL (my-portfolio.vercel.app) in a separate tab.

Your production site still shows "Deployed with Vercel" in the footer. The preview branch did not affect production at all.

Why is this powerful?

In a real project, preview deployments let you share a live URL with teammates for review before merging into main. You get a production-like environment for testing without any risk to your users.

Don't see the preview deployment?

Make sure your GitHub repository is connected to Vercel. Check the Git section in your project's Settings on the Vercel dashboard.

Confirm that your git push command succeeded without errors in the terminal.

Preview deployments can take a few seconds to appear. Refresh the Deployments page if you do not see it immediately.

Help me debug why my preview deployment isn't appearing on the Vercel dashboard after pushing a branch to GitHub.

Secret mission

Custom 404 Page and URL Rewrites

Your portfolio is live, but what happens when someone visits a page that doesn't exist? Right now, they get a generic error. In this secret mission, you'll add a polished custom 404 page and configure URL routing with vercel.json to handle unmatched paths gracefully.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely on Vercel's free Hobby plan, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • Local project folder (my-portfolio on your Desktop).
  • Vercel project (hosting your site on Vercel's CDN).
  • GitHub repository (storing your code and triggering auto-deployments).
  • Vercel CLI (globally installed npm package).

Keep everything running

No action needed. Choose this if you're still actively building or want your portfolio live on the internet.

  • Your site stays live at your .vercel.app URL with automatic HTTPS.
  • Future pushes to your GitHub repository will trigger automatic deployments.
  • The Vercel Hobby plan is free forever for personal, non-commercial use.

Pause - I'll come back to this later

Shut down running processes to free up memory. Your deployed site stays live (no cost to you), but you can clean up local resources.

  • Close VS Code and any terminal windows you used for this project.
  • Your Vercel deployment remains live at no cost. You can return to your local my-portfolio folder anytime to make changes.

Delete - I don't want to use this again

Remove all project resources and start fresh. Follow each step below to fully clean up.

Delete your Vercel project:

  • Open the Vercel dashboard at vercel.com and select your project.
  • Click Settings in the sidebar.
  • Scroll to the bottom of the General page and find the Delete Project section.
  • Click Delete, enter your project name to confirm, then click Continue.

Delete your GitHub repository:

  • Go to your repository page on GitHub.
  • Click Settings at the top of the repository.
  • Scroll down to the Danger Zone section and click Delete this repository.
  • Follow the prompts to confirm by typing your repository name, then click Delete this repository.

Uninstall the Vercel CLI:

  • Remove the globally installed Vercel CLI by running:
npm uninstall -g vercel

Delete your local project folder:

  • Remove the project folder from your Desktop by running:

macOS

rm -rf ~/Desktop/my-portfolio

Windows

rmdir /s /q %USERPROFILE%\Desktop\my-portfolio

That's a Wrap!

That's a Wrap!

Nice work! You've just deployed a personal portfolio website to Vercel's global infrastructure and set up a complete deployment pipeline from scratch.

You've learned how to:

  • Deployed a live website using the Vercel CLI with both preview deployments for testing and production deployments for your live site.
  • Connected a GitHub repository to Vercel for automatic CI/CD that deploys your site on every push.
  • Experienced Vercel's automatic HTTPS, global CDN distribution, and instant deployments across preview and production environments.
  • Added a custom 404 page and configured URL rewrites with vercel.json for clean, professional routing.

Ready to quiz yourself?