Host a Website with Vercel

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

Introduction

30 Second Summary

You have ideas for a website, but getting it live on the internet feels like a mystery. Where does the code actually go? How do people visit it?

In this project, you will build a personal portfolio website and deploy it to the internet using Vercel. You will learn how modern deployment works by first deploying manually, then setting up automatic deployments from GitHub.

What You'll Build

A multi-page HTML/CSS portfolio site deployed to Vercel's global CDN with automatic GitHub-based deployments.

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

  • A live personal portfolio website accessible from any device with a public URL.
  • A working Git-to-deploy pipeline that automatically publishes your changes whenever you push code to GitHub.
  • Hands-on experience with Vercel's preview and production deployment environments.
  • Secret Mission: Add a custom 404 error page and configure clean URLs so your site uses /about instead of /about.html.

Are there any prerequisites?

None. This guide walks you through setting up every tool you need, including Node.js, the Vercel CLI, and a GitHub account. No prior experience with deployment or hosting is required.

Set Up Your Tools

Deploying a website used to mean configuring servers, managing DNS records, and setting up SSL certificates by hand. Vercel handles all of that for you through a single command-line tool.

To use Vercel, you need Node.js (which powers the Vercel CLI), a free Vercel account, and a GitHub account for automatic deployments later.

In this step, get ready to:
  • Install Node.js and the Vercel CLI.
  • Create your Vercel and GitHub accounts.
  • Authenticate the Vercel CLI with your account.
Install Node.js and the Vercel CLI

Node.js is a JavaScript runtime that lets you run tools like the Vercel CLI on your computer. The Vercel CLI is the command-line tool you will use to deploy your site.

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

✔️ I see version 18 or higher

Node.js is ready to go. Move on to installing the Vercel CLI below.

ⓧ I see an older version

You have Node.js installed, but the Vercel CLI requires version 18 or higher.

  • Go to nodejs.org/en/download in your browser.
  • Download and run the LTS installer for your operating system.
  • Follow the installer prompts, accepting the defaults.
  • Close and reopen your terminal, then run node --version again to confirm it shows 18 or higher.

ⓧ Command not found

Node.js is not installed yet. Let's install it now.

  • Go to nodejs.org/en/download in your browser.
  • Download the LTS installer for your operating system (macOS or Windows).
  • Run the installer and follow the prompts, accepting the defaults.
  • Close and reopen your terminal after installation completes.
  • Run node --version again to confirm it prints a version number starting with v18 or higher.
  • Install the Vercel CLI globally by running this command:
npm i -g vercel

What does this command do?

npm is the package manager that comes bundled with Node.js. The -g flag installs the package globally so you can run vercel from any folder on your machine.

  • Verify the Vercel CLI installed correctly by running:
vercel --version

You should see a version number printed in your terminal.

Seeing permission denied or command not found?

On macOS, you may need to prefix the install command with sudo: sudo npm i -g vercel. Enter your computer password when prompted.

On Windows, close your terminal and reopen it as Administrator by right-clicking and selecting Run as administrator. Then run the install command again.

Help me fix my Vercel CLI installation

Create your Vercel and GitHub accounts

Vercel uses your GitHub account for login and to connect repositories for automatic deployments. Creating your Vercel account through GitHub links both accounts at once.

  • If you do not already have a GitHub account, create one at github.com/signup. Follow the prompts to set up your free account.
  • Go to vercel.com/signup in your browser.
  • Click Continue with GitHub.
  • Authorize Vercel to access your GitHub account when prompted.
  • Select the Hobby plan (free, no payment method required).

Why sign up with GitHub?

Signing up with GitHub creates the link between both platforms immediately. Later in this project, you will connect a GitHub repository to Vercel for automatic deployments. Having the accounts linked now saves you a step.

Authenticate the Vercel CLI

The CLI needs to know which Vercel account to deploy to. Running the login command opens your browser for a one-time confirmation.

  • Authenticate the CLI by running this command:
vercel login
  • Your browser opens a Vercel confirmation page. Click Continue to approve the login.
  • Return to your terminal. You should see a success message confirming you are logged in.
  • Confirm authentication worked by running:
vercel whoami

You should see your Vercel username printed in the terminal.

Browser not opening or login failing?

If your browser did not open automatically, look for a URL printed in the terminal. Copy and paste it into your browser manually.

If vercel whoami prints an error instead of your username, run vercel login again and make sure you click the confirmation in your browser before returning to the terminal.

Help me fix my Vercel CLI login

Your tools are installed and authenticated. Next up, you will build the portfolio site that you will deploy to the world.

Build Your Portfolio Site

Your tools are installed and your Vercel account is ready to go. Now you need something to deploy.

In this step, you'll build a two-page portfolio website using HTML and CSS. This gives you real content to push live to the internet in the next step.

In this step, get ready to:
  • Create your project folder and build a homepage.
  • Add an about page with your skills and goals.
  • Style both pages with CSS.
Create the project folder and homepage

Every project needs a home on your computer. You'll create a dedicated folder on your Desktop so it's easy to find later.

  • Open your terminal by pressing 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.
  • 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 the folder exists by running:
ls

The folder will be empty for now since you just created it.

  • Open VS Code by pressing Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Visual Studio Code and press Enter to open it.
  • In VS Code, click File in the top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop, select the my-portfolio folder, and click Open.

Don't see my-portfolio on your Desktop?

Make sure you ran mkdir my-portfolio while you were in the ~/Desktop directory. If you skipped the cd ~/Desktop step, the folder was created in a different location.

Run cd ~/Desktop first, then mkdir my-portfolio again. Help me find my project folder

Now you'll create the homepage for your portfolio. This is the first page visitors see when they arrive at your site.

  • In the VS Code Explorer sidebar on the left, click the New File icon (a page with a plus sign).
  • Type index.html as the filename and press Enter.
  • Paste the following code into 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="styles.css">
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
    <main>
        <h1>Hi, I'm [[YOURNAME="Your Name"]]</h1>
        <p>Welcome to my portfolio. I'm learning web development and modern deployment tools.</p>
        <p>This site is hosted on Vercel's global CDN and deploys automatically from GitHub.</p>
    </main>
    <footer>
        <p>Hosted with Vercel</p>
    </footer>
</body>
</html>

What does this code do?

  • The <nav> section creates navigation links between your homepage and about page.
  • The <main> section holds your page content including a heading and introduction paragraphs.
  • The <link rel="stylesheet" href="styles.css"> line connects a stylesheet you'll create shortly.
  • The navigation links use paths like /about instead of about.html. These are server-relative paths that will work correctly once your site is deployed to Vercel.
  • Replace Your Name in the <h1> tag with your actual name.
  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
  • Open the file in your browser by double-clicking index.html in Finder (macOS) or File Explorer (Windows) inside the my-portfolio folder on your Desktop.

You should see your name as a heading, two paragraphs of text, and two navigation links at the top. The page will look unstyled for now.

Why don't the navigation links work yet?

The links use server-relative paths like /about which only work when a web server is handling requests. Right now you're viewing the file directly from your computer's file system.

Once you deploy to Vercel in the next step, the links will work perfectly.

Don't see your page in the browser?

Make sure you saved the file in VS Code before opening it. Check that the file is named exactly index.html (not index.html.txt).

If your browser shows raw code instead of a rendered page, make sure you opened the file by double-clicking it in your file manager, not by dragging it into VS Code. Help me view my HTML file in a browser

✔️ Awesome, I've got everything!

Great. Make sure you've saved index.html before moving on.

ⓧ I'd like to double check the full code

Here's what your index.html should look like:

<!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="styles.css">
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
    <main>
        <h1>Hi, I'm [[YOURNAME="Your Name"]]</h1>
        <p>Welcome to my portfolio. I'm learning web development and modern deployment tools.</p>
        <p>This site is hosted on Vercel's global CDN and deploys automatically from GitHub.</p>
    </main>
    <footer>
        <p>Hosted with Vercel</p>
    </footer>
</body>
</html>
Create the about page

Your portfolio needs a second page where visitors can learn more about you. This page will list your skills and goals.

  • In the VS Code Explorer sidebar, click the New File icon again.
  • Type about.html as the filename and press Enter.
  • Paste the following code into about.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me - My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
    <main>
        <h1>About Me</h1>
        <p>I'm a developer interested in building things for the web.</p>
        <h2>Skills</h2>
        <ul>
            <li>HTML and CSS</li>
            <li>JavaScript</li>
            <li>Git and GitHub</li>
            <li>Vercel Deployment</li>
        </ul>
        <h2>Goals</h2>
        <p>I'm working toward becoming a full-stack developer. This portfolio is my first step in building a public presence online.</p>
    </main>
    <footer>
        <p>Hosted with Vercel</p>
    </footer>
</body>
</html>

What does this page include?

  • The same <nav> section as your homepage, so visitors can navigate back and forth.
  • A <ul> (unordered list) showing your skills as bullet points.
  • A goals section describing where you're headed as a developer.
  • Save about.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
  • Open about.html in your browser by double-clicking it in the my-portfolio folder on your Desktop.

You should see an "About Me" heading, a skills list with four bullet points, and a goals paragraph.

Page looks the same as the homepage?

Make sure you opened about.html, not index.html. Check the browser tab title. It should say "About Me - My Portfolio".

If you see raw code, verify the file extension is .html and not .txt. Help me open my about page correctly

✔️ Awesome, I've got everything!

Great. Make sure you've saved about.html before moving on.

ⓧ I'd like to double check the full code

Here's what your about.html should look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me - My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
    <main>
        <h1>About Me</h1>
        <p>I'm a developer interested in building things for the web.</p>
        <h2>Skills</h2>
        <ul>
            <li>HTML and CSS</li>
            <li>JavaScript</li>
            <li>Git and GitHub</li>
            <li>Vercel Deployment</li>
        </ul>
        <h2>Goals</h2>
        <p>I'm working toward becoming a full-stack developer. This portfolio is my first step in building a public presence online.</p>
    </main>
    <footer>
        <p>Hosted with Vercel</p>
    </footer>
</body>
</html>
Style both pages with CSS

Both pages look plain right now because they have no styling. A single CSS file will give your entire portfolio a clean, modern look.

  • In the VS Code Explorer sidebar, click the New File icon.
  • Type styles.css as the filename and press Enter.
  • Add the base layout and navigation styles by pasting this code into styles.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;
}

nav {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
}

nav a {
    text-decoration: none;
    color: #0070f3;
    font-weight: 500;
}

nav a:hover {
    text-decoration: underline;
}

What do these styles do?

  • The * selector resets all default spacing so you start from a clean slate.
  • The body styles set a readable system font, limit the page width to 800px, and center everything.
  • The nav styles arrange links horizontally with a subtle bottom border separating navigation from content.
  • Save styles.css and refresh index.html in your browser.

Your page should now show a clean sans-serif font, centred content, and blue navigation links with a thin line beneath them.

Page still looks unstyled?

Check that your styles.css file is saved in the same folder as index.html. The <link> tag in your HTML references styles.css by name, so both files must be in the same my-portfolio folder.

Also verify the filename is exactly styles.css (not style.css or styles.css.txt). Help me connect my CSS file to my HTML

  • Now add the content and footer styles below the existing code in styles.css:
main h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

main h2 {
    font-size: 1.4rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

main p {
    margin-bottom: 1rem;
}

main ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

main li {
    margin-bottom: 0.25rem;
}

footer {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.875rem;
}

What do these styles do?

  • The main h1 and main h2 selectors create a clear size hierarchy between headings.
  • The main ul and main li selectors add proper indentation and spacing to your skills list.
  • The footer selector pushes the footer down with a top border and uses a smaller, greyed-out font to keep it subtle.
  • Save styles.css and refresh your browser.
  • Also open about.html in your browser by double-clicking it in the my-portfolio folder.

Both pages should now have properly sized headings, spaced-out paragraphs, indented bullet points on the about page, and a small grey footer at the bottom.

About page still unstyled?

Open about.html in VS Code and check that the <head> section contains <link rel="stylesheet" href="styles.css">. Both HTML files need this line to pull in the styles.

If the homepage is styled but the about page is not, this missing link tag is the most likely cause. Help me figure out why only one page is styled

✔️ Awesome, I've got everything!

Great. Make sure you've saved styles.css before moving on.

ⓧ I'd like to double check the full code

Here's what your complete styles.css should look like:

* {
    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;
}

nav {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
}

nav a {
    text-decoration: none;
    color: #0070f3;
    font-weight: 500;
}

nav a:hover {
    text-decoration: underline;
}

main h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

main h2 {
    font-size: 1.4rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

main p {
    margin-bottom: 1rem;
}

main ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

main li {
    margin-bottom: 0.25rem;
}

footer {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.875rem;
}

Your portfolio site is built and looking sharp. Next up, you'll deploy it to the internet using the Vercel CLI so anyone in the world can visit it.

Deploy with the Vercel CLI

Your portfolio site works locally, but nobody else can see it yet. To put it on the internet, you need to upload your files to a server that can serve them to visitors worldwide.

Vercel's CLI handles this in a single command. It uploads your files, assigns a public URL, and distributes your site across a global CDN so visitors load it quickly no matter where they are.

In this step, get ready to:
  • Deploy a preview version of your site with the Vercel CLI.
  • Promote your site to a production deployment with a cleaner URL.
  • Verify both deployments are live on the Vercel dashboard.
Run your first deployment

The vercel command is interactive. It asks a series of questions to set up your project on Vercel's servers. Since this is a brand new project, you will create a new Vercel project and accept the default settings.

  • In VS Code, open the integrated terminal by pressing Ctrl+` (macOS and Windows).
  • Make sure your terminal is in the my-portfolio folder, then start the deployment by running:
vercel

What will the CLI ask me?

The CLI walks you through several prompts. Here is how to respond to each one:

  • Set up and deploy? Y (yes).
  • Which scope? Select your personal account (it may be your only option).
  • Link to existing project? N (no, you are creating a new one).
  • What's your project's name? Press Enter to accept the default my-portfolio.
  • In which directory is your code located? Press Enter to accept ./ (the current folder).
  • Want to modify these settings? N (no). Vercel detects your project as framework "Other" with no build command, which is correct for a static HTML site.

The CLI may also ask if you would like to pull environment variables. Enter N since this project does not use any.

  • Wait for the deployment to finish. The CLI prints a preview URL when it completes (something like my-portfolio-abc123.vercel.app).
  • Copy the preview URL from your terminal and open it in your browser.

You should see your portfolio homepage displayed in the browser, served from Vercel's CDN.

What is a preview deployment?

Running vercel creates a preview deployment. Preview deployments get a unique URL with a random hash (like abc123) appended to the project name.

Think of it as a staging version of your site. You can share it for feedback without affecting your main public URL.

Seeing an error or no URL?

  • Make sure your terminal is inside the my-portfolio folder. Run ls and confirm you see index.html, about.html, and styles.css listed.
  • If the CLI says you are not logged in, run vercel login first and follow the browser authentication flow.

Ask for help: My vercel command is failing during the setup prompts. What should I check?

Deploy to production

Your preview deployment proves the site works on Vercel. Now you will promote it to a production deployment, which gives your site a cleaner, permanent URL.

  • Deploy to production by running:
vercel --prod

What is the difference between preview and production?

A production deployment is the "live" version of your site. It gets a cleaner URL like my-portfolio.vercel.app without the random hash.

Later, when you connect GitHub, every push to your main branch will update the production deployment automatically. Pushes to other branches create preview deployments for testing.

  • Copy the production URL from the terminal output and open it in your browser.
  • Confirm your portfolio homepage loads correctly. Try clicking the About link to verify navigation works between pages.

Your site is now live on the internet at a public URL anyone can visit.

Pages loading but styles missing?

  • Check that styles.css is in the same folder as your HTML files (not inside a subfolder).
  • Verify that the <link> tag in both HTML files uses href="styles.css" without any folder prefix.

Ask for help: My Vercel deployment loads but CSS is not applied. What is wrong?

Verify on the Vercel dashboard

The Vercel dashboard gives you a visual overview of all your deployments. You can see deployment status, URLs, and build logs in one place.

  • Open your browser and go to vercel.com/dashboard.
  • Find your my-portfolio project in the list and click on it.
  • Confirm you see both a preview deployment and a production deployment listed under Deployments.

The production deployment shows a green "Production" label next to it. The preview deployment shows a "Preview" label.

Try it from your phone

Copy the production URL and open it on your phone or send it to a friend. Your site is live on Vercel's global CDN, so it loads for anyone, anywhere.

Your site is officially live on the internet. Next up, you will connect GitHub so every code change you push deploys automatically.

Connect GitHub for Automatic Deploys

Your portfolio is live on Vercel, deployed manually from the CLI. That works, but it means running vercel --prod every time you make a change.

In this step, you will connect your project to GitHub so that every time you push code, Vercel automatically builds and deploys your site. This is the foundation of a Git-based CI/CD workflow.

In this step, get ready to:
  • Push your project to a GitHub repository.
  • Connect Vercel to your GitHub repo for automatic deploys.
  • Test the full pipeline by pushing a change and watching it go live.
Initialize Git and push to GitHub

Before Vercel can deploy automatically from your code, your project needs to live in a Git repository on GitHub. You will initialize a local Git repo, commit your files, then push them to a new GitHub repository.

  • Initialize a Git repository in your my-portfolio folder by running these commands:
git init
git add .
git commit -m "Initial portfolio site"

What do these commands do?

  • git init creates a new Git repository in your current folder.
  • git add . stages all your files (HTML, CSS) for the first commit.
  • git commit -m "Initial portfolio site" saves a snapshot of your project with a descriptive message.
  • Create a new repository on GitHub by visiting github.com/new in your browser.
  • Enter my-portfolio as the repository name.
  • Leave all the initialization options unchecked (no README, no .gitignore, no license). You already have files locally.
  • Click Create repository.

After creating the repository, GitHub displays a set of commands for pushing an existing repository. You will use those now.

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

What do these commands do?

  • git remote add origin tells Git where your GitHub repository lives.
  • git push -u origin main uploads your committed files to GitHub and sets main as the default branch to push to in the future.
  • Refresh your GitHub repository page in the browser.
  • You should see index.html, about.html, and styles.css listed in the repository.

Push rejected or permission denied?

  • If you see a permission error, make sure you are logged into GitHub in your terminal. GitHub may prompt you to authenticate via browser or personal access token.
  • If you see an error about the branch name, try running git branch -M main before pushing. This renames your default branch to main.
  • help me push my code to GitHub
Connect Vercel to your GitHub repository

Now that your code is on GitHub, you will link your Vercel project to the repository. Once connected, Vercel automatically deploys every time you push new code.

  • Return to the Vercel dashboard at vercel.com/dashboard.
  • Click on your my-portfolio project.
  • Click Settings in the sidebar.
  • Click Git in the settings menu.
  • Under the Git section, click Connect Git Repository and select your my-portfolio repository from the list.
  • Confirm the connection. Vercel will now deploy automatically on every push to your main branch.

Why connect via Git instead of deploying from the CLI?

The CLI is great for one-off deploys, but a Git integration means you never have to remember to deploy. Every push triggers a build automatically. This is how professional teams ship code to production.

Vercel treats your main branch as the production branch by default. Pushes to any other branch create preview deployments instead.

Don't see your repository in the list?

  • Make sure you signed up for Vercel with your GitHub account. This grants Vercel permission to see your repositories.
  • If prompted, authorize Vercel to access your GitHub repositories. You may need to grant access to all repositories or add the specific one.
  • help me connect my GitHub repository to Vercel
Test the automatic deploy pipeline

The real magic happens when you push a change and watch Vercel pick it up automatically. You will make a visible edit to your homepage, push it, and confirm the production URL updates.

  • In VS Code, open index.html and find this line:
<h1>Hi, I'm [Your Name]</h1>
  • Change the heading text to something different so you can spot the update. For example:
<h1>Welcome! I'm [Your Name]</h1>
  • Save index.html.
  • Commit and push the change to GitHub by running these commands:
git add .
git commit -m "Update homepage heading"
git push
  • Return to the Vercel dashboard and click on your my-portfolio project.
  • You should see a new deployment being built automatically. Wait for the status to show Ready.
  • Once the deployment is complete, visit your production URL. Your updated heading text should be live.

What just happened?

You pushed code to GitHub. Vercel detected the new commit on your main branch and automatically built and deployed a fresh version of your site. This is the complete Git-to-deploy pipeline in action.

From now on, any commit pushed to main triggers a production deployment. Commits on other branches create preview deployments with unique URLs for testing.

Deployment not triggering?

  • Check that your push succeeded in the terminal. You should see output confirming the push to origin/main.
  • Verify that your Vercel project is connected to the correct GitHub repository under Settings > Git.
  • Make sure the email in your local Git config matches the email on your GitHub account. You can check with git config user.email.
  • help me troubleshoot why Vercel is not auto-deploying after my push

Secret mission

Custom 404 Page and Clean URLs

Your portfolio is live, but what happens when someone visits a page that doesn't exist? Right now they get a generic Vercel error page. In this mission, you'll create a custom 404 page and configure clean URLs so your site feels polished and professional.

Clean Up Your Resources

Clean Up Your Resources

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

Resources you used:

  • Local my-portfolio folder on your Desktop.
  • Vercel project (my-portfolio deployment on Vercel's CDN).
  • GitHub repository (my-portfolio on your GitHub account).
  • Vercel CLI (installed globally via npm).

Keep everything running

No action needed. Choose this if you want your portfolio site to stay live and continue deploying automatically from GitHub. Your site will remain accessible at its production URL at no cost on the Vercel Hobby plan.

Pause - I'll come back to this later

Disconnect the GitHub integration to stop automatic deployments while keeping your project intact for later.

  • Go to your Vercel dashboard at vercel.com/dashboard.
  • Select your my-portfolio project.
  • Click Settings in the sidebar.
  • Under Git, click Disconnect to unlink the GitHub repository.
  • Your site stays live at its current URL, but new pushes to GitHub will no longer trigger deployments.

Delete - I don't want to use this again

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

Delete the Vercel project
  • Open your terminal and run this command:
vercel project rm my-portfolio
  • Confirm the deletion when prompted. This removes your project, all its deployments, and the production URL.
Delete the GitHub repository
  • Go to your my-portfolio repository on GitHub.
  • Click Settings under the repository name.
  • Scroll down to the Danger Zone section.
  • Click Delete this repository.
  • Confirm by typing your repository name and clicking Delete this repository again.
Delete the local project folder
  • Remove the my-portfolio folder from your Desktop by running:
cd ~/Desktop
rm -rf my-portfolio

On Windows?

Open PowerShell and run:

cd ~\Desktop
Remove-Item -Recurse -Force my-portfolio
Uninstall the Vercel CLI
  • Remove the globally installed Vercel CLI by running:
npm uninstall -g vercel

Nice Work!

Nice Work!

You just built a personal portfolio website from scratch and shipped it to the internet using Vercel. Your site is live on a global CDN, automatically redeploying every time you push code to GitHub.

You've learned how to:

  • Build a multi-page HTML/CSS portfolio site and deploy it to Vercel's global CDN using the Vercel CLI.
  • Use preview deployments and production deployments to understand Vercel's deployment environments.
  • Connect GitHub for automatic deployments on every push, creating a full Git-to-deploy pipeline.
  • Secret Mission: Configured vercel.json for clean URLs and a custom 404 page.

Ready to quiz yourself?