Deploy a Portfolio Site to Vercel

Deploy a personal portfolio website to Vercel's global CDN using the CLI.

Introduction

30 Second Summary

Having a personal website is like having your own corner of the internet. It's a place to show off your skills, share your projects, and give people a way to find you online.

In this project, you will build a portfolio website with HTML and CSS, then deploy it to the internet using the Vercel CLI. You'll learn how to preview changes before going live and push updates to production in seconds.

What You'll Build

A personal portfolio website deployed to Vercel's global CDN with automatic HTTPS.

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

  • A styled HTML/CSS portfolio page with your name, bio, skills, and social links.
  • A live preview deployment URL you can share to test changes before going live.
  • A production deployment on Vercel's global CDN with automatic HTTPS.
  • Secret Mission: Connect a GitHub repository so every push auto-deploys your site.

Are there any prerequisites?

None. This project includes setup instructions for every tool you'll need. All you need is a computer with internet access.

Before We Start

Before We Start...

Set Up Your Tools

Before you can deploy anything to the internet, you need two tools on your machine. Node.js is a JavaScript runtime that powers the Vercel CLI, and the Vercel CLI is what you'll use to deploy your site from the terminal.

In this step, you'll install both tools and connect them to a free Vercel account. Once everything is linked up, you'll be ready to build and deploy your portfolio.

In this step, get ready to:
  • Install Node.js (version 18 or higher).
  • Install the Vercel CLI globally with npm.
  • Create a free Vercel account and log in from the terminal.
Install Node.js

Node.js is the engine that runs the Vercel CLI on your computer. You need version 18 or higher installed.

  • 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 already installed by running this command:
node --version

Look at the output in your terminal and pick the tab below that matches what you see.

✔️ I see version 18 or higher

You're all set. Your Node.js version meets the minimum requirement, so you can move on to the next substep.

ⓧ I see an older version

Your current version of Node.js is too old for the Vercel CLI. You need to upgrade to version 18 or higher.

  • Go to https://nodejs.org in your browser.
  • Download the LTS version (the big green button on the left).
  • Run the installer and accept the default options.
  • Close your terminal completely, then reopen it.
  • Run node --version again to confirm you see version 18 or higher.

Why close and reopen the terminal?

Your terminal loads the system path when it first opens. The new Node.js version only appears on the path after a fresh terminal session.

ⓧ Command not found

Node.js is not installed on your machine yet.

  • Go to https://nodejs.org in your browser.
  • Download the LTS version (the big green button on the left).
  • Run the installer and accept the default options.
  • Close your terminal completely, then reopen it.
  • Run node --version to confirm you see a version number of 18 or higher.

Still seeing command not found?

Make sure you closed and reopened your terminal after installing. On Windows, try opening PowerShell instead of Command Prompt.

help me troubleshoot why node --version is not working after I installed Node.js

What is Node.js?

Node.js lets you run JavaScript outside the browser. Many developer tools (including the Vercel CLI) are built with JavaScript and need Node.js to run.

Install the Vercel CLI

The Vercel CLI is a command-line tool that deploys your projects to Vercel's servers directly from the terminal. You install it globally using npm, the package manager that comes bundled with Node.js.

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

You should see a version number printed in your terminal.

Seeing a permission error?

On macOS or Linux, you may need to prefix the install command with sudo to install global packages. On Windows, try running your terminal as Administrator by right-clicking the app and selecting Run as administrator.

help me fix a permission error when running npm i -g vercel

Create a Vercel account and log in

The CLI needs to be linked to a Vercel account so it knows where to deploy your projects. The Hobby plan is free forever and includes everything you need for this project.

  • Go to https://vercel.com/signup in your browser.
  • Create a free account using your GitHub, GitLab, Bitbucket, or email address.
  • Select the Hobby plan (free).
  • Back in your terminal, log in to the Vercel CLI by running:
vercel login

What happens when you run this command?

The CLI will display a link and open your browser automatically. In the browser, you'll verify the login request by confirming the location and time match what you expect.

Once you approve, the terminal will confirm you're logged in.

  • Follow the browser prompt to verify and approve the login.
  • Switch back to your terminal and confirm you see a success message indicating you are now logged in.

Login not completing?

Make sure you approved the request in the browser window that opened. If the browser did not open automatically, copy the URL shown in the terminal and paste it into your browser manually.

help me troubleshoot why vercel login is not completing

Your tools are ready to go. Next up, you'll build your portfolio page and get it ready for deployment.

Build Your Portfolio Page

Your development environment is set up and ready to go. Now it's time to build the website you'll deploy to the world.

You'll create a personal portfolio page using HTML and CSS. It'll showcase your name, a short bio, your skills, and links to your online profiles.

In this step, get ready to:
  • Create a project folder on your Desktop.
  • Build your portfolio page in HTML.
  • Style it with a modern CSS design.
Create your project folder

Every project needs its own folder to keep files organised. You'll create one on your Desktop so it's easy to find.

  • 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, which is expected.

Seeing 'No such file or directory'?

Make sure you typed cd ~/Desktop with a capital D. On macOS the Desktop folder is case-sensitive.

help me navigate to my Desktop folder in the terminal

Now open VS Code so you can start writing code.

  • Press 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.

You should see my-portfolio in the Explorer sidebar on the left.

Create your HTML file

Your portfolio page starts with an index.html file. This file defines the structure and content of your website.

  • In the Explorer sidebar, hover over the my-portfolio folder name.
  • Click the New File icon that appears (it looks like a page with a plus sign).
  • Type index.html and press Enter.

The file opens in the editor. Now add your portfolio content.

  • Copy the following HTML 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 to the external stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Header with your name and tagline -->
    <header>
        <div class="container">
            <h1>Hi, I'm Alex</h1>
            <p class="tagline">Aspiring web developer learning to build cool things</p>
        </div>
    </header>

    <!-- Main content area -->
    <main class="container">
        <!-- About section -->
        <section class="about">
            <h2>About Me</h2>
            <p>I'm a curious learner exploring web development. I love building projects that solve real problems and sharing what I learn along the way.</p>
        </section>

        <!-- Skills displayed as a list -->
        <section class="skills">
            <h2>Skills</h2>
            <ul class="skills-list">
                <li>HTML &amp; CSS</li>
                <li>JavaScript</li>
                <li>Git &amp; GitHub</li>
                <li>Vercel Deployment</li>
            </ul>
        </section>

        <!-- Projects section -->
        <section class="projects">
            <h2>Projects</h2>
            <div class="project-card">
                <h3>This Portfolio</h3>
                <p>My first website deployed to Vercel. Built with HTML and CSS, hosted on a global CDN with automatic HTTPS.</p>
            </div>
        </section>

        <!-- Contact links -->
        <section class="contact">
            <h2>Find Me Online</h2>
            <ul class="social-links">
                <li><a href="https://github.com" target="_blank">GitHub</a></li>
                <li><a href="https://linkedin.com" target="_blank">LinkedIn</a></li>
                <li><a href="mailto:hello@example.com">Email</a></li>
            </ul>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <div class="container">
            <p>Deployed with Vercel</p>
        </div>
    </footer>
</body>
</html>

What does this HTML do?

  • The <header> displays your name and a short tagline in a hero section at the top.
  • The <main> section holds four content blocks: About Me, Skills, Projects, and Find Me Online.
  • The class attributes (like container, skills-list, project-card) are hooks that your CSS file will use to apply styles.
  • The <link rel="stylesheet" href="style.css"> tag connects the CSS file you'll create next.
  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
  • Open Finder (macOS) or File Explorer (Windows) and navigate to the my-portfolio folder on your Desktop.
  • Double-click index.html to open it in your browser.

You should see your portfolio content as plain, unstyled text. The header, sections, and links are all there, just without any visual design yet.

Seeing a blank page?

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

help me figure out why my HTML file is showing a blank page in the browser

✔️ Awesome, I've got everything!

Great. Make sure you've saved your file before moving on.

ⓧ I'd like to double check the full code

<!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>
    <header>
        <div class="container">
            <h1>Hi, I'm Alex</h1>
            <p class="tagline">Aspiring web developer learning to build cool things</p>
        </div>
    </header>

    <main class="container">
        <section class="about">
            <h2>About Me</h2>
            <p>I'm a curious learner exploring web development. I love building projects that solve real problems and sharing what I learn along the way.</p>
        </section>

        <section class="skills">
            <h2>Skills</h2>
            <ul class="skills-list">
                <li>HTML &amp; CSS</li>
                <li>JavaScript</li>
                <li>Git &amp; GitHub</li>
                <li>Vercel Deployment</li>
            </ul>
        </section>

        <section class="projects">
            <h2>Projects</h2>
            <div class="project-card">
                <h3>This Portfolio</h3>
                <p>My first website deployed to Vercel. Built with HTML and CSS, hosted on a global CDN with automatic HTTPS.</p>
            </div>
        </section>

        <section class="contact">
            <h2>Find Me Online</h2>
            <ul class="social-links">
                <li><a href="https://github.com" target="_blank">GitHub</a></li>
                <li><a href="https://linkedin.com" target="_blank">LinkedIn</a></li>
                <li><a href="mailto:hello@example.com">Email</a></li>
            </ul>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>Deployed with Vercel</p>
        </div>
    </footer>
</body>
</html>
Style your portfolio with CSS

Your HTML defines the structure, but CSS brings the visual design. You'll add styles in two stages: first the page layout, then the component styles.

  • In the Explorer sidebar, hover over the my-portfolio folder name.
  • Click the New File icon.
  • Type style.css and press Enter.

Start by adding the foundational layout styles.

  • Copy the following CSS into style.css:
/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base body styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fafafa;
}

/* Centered content wrapper */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Black header with centered white text */
header {
    background-color: #000;
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

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

/* Main content spacing */
main {
    padding: 40px 0;
}

section {
    margin-bottom: 40px;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #000;
}

.about p {
    font-size: 1.1rem;
    color: #555;
}

What do these styles do?

  • The * selector resets all default browser margins and padding so your design starts from a clean slate.
  • The .container class centers content and caps its width at 800px so text doesn't stretch across wide screens.
  • The header gets a black background with white text, creating a bold hero section at the top of the page.
  • Save style.css and refresh your browser.

You should see a black header with your name in white, centered content, and consistent spacing between sections.

Now add the component styles for your skills, project card, links, and footer.

  • Add the following CSS below the existing code in style.css:
/* Skills displayed as pill-shaped badges */
.skills-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skills-list li {
    background-color: #000;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* Project card with subtle border */
.project-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
}

.project-card h3 {
    margin-bottom: 8px;
}

.project-card p {
    color: #555;
}

/* Social links styled as underlined text */
.social-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.social-links a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid #000;
    padding-bottom: 2px;
}

.social-links a:hover {
    color: #555;
    border-color: #555;
}

/* Black footer matching the header */
footer {
    background-color: #000;
    color: #888;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

What do these styles do?

  • The .skills-list li styles turn each skill into a black pill-shaped badge using border-radius: 20px.
  • The .project-card adds a white card with a subtle border and rounded corners to make your project stand out.
  • The .social-links a removes default link styling and adds a solid underline that changes colour on hover.
  • The footer mirrors the header's black background, creating a clean bookend for the page.
  • Save style.css and refresh your browser.

You should see pill-shaped skill badges, a bordered project card, styled social links, and a black footer at the bottom.

Styles not showing up?

Check that your CSS file is named exactly style.css (not styles.css or style.CSS). The filename must match the href in your HTML's <link> tag exactly.

Also make sure both index.html and style.css are in the same folder. If your CSS is inside a subfolder, the browser won't find it.

help me figure out why my CSS styles aren't loading in the browser

✔️ Awesome, I've got everything!

Great. Make sure both files are saved before moving on.

ⓧ I'd like to double check the full code

* {
    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;
    background-color: #fafafa;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background-color: #000;
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

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

main {
    padding: 40px 0;
}

section {
    margin-bottom: 40px;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #000;
}

.about p {
    font-size: 1.1rem;
    color: #555;
}

.skills-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skills-list li {
    background-color: #000;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.project-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
}

.project-card h3 {
    margin-bottom: 8px;
}

.project-card p {
    color: #555;
}

.social-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.social-links a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid #000;
    padding-bottom: 2px;
}

.social-links a:hover {
    color: #555;
    border-color: #555;
}

footer {
    background-color: #000;
    color: #888;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

Your portfolio page is built and styled. Next up, you'll deploy it to Vercel and get a live URL you can share with anyone.

Deploy to Vercel

Your portfolio page is built and sitting on your computer. Now it is time to put it on the internet where anyone can visit it.

Vercel's CLI can deploy your site in a single command. You will first create a preview deployment to check everything looks right, then promote it to a production URL that is yours to share.

In this step, get ready to:
  • Run your first deployment and get a preview URL.
  • Visit the preview to confirm your site is live.
  • Deploy to production and get your permanent URL.
Run your first deployment

The vercel command uploads your project files, detects what kind of site you have, and deploys it. Since your project is plain HTML and CSS with no framework, Vercel will classify it as Other and serve your files as-is with no build step.

  • Make sure your terminal is still inside the my-portfolio folder from the previous step.
  • Deploy your project by running this command:
vercel

What will the CLI ask me?

Since this is the first time you are running vercel in this folder, the CLI will ask a few setup questions. Here is what to expect:

  • Set up and deploy? Press Y to confirm.
  • Which scope? Select your personal account (the default).
  • Link to existing project? Press N to create a new one.
  • Project name? Press Enter to accept the default (my-portfolio).
  • Directory where code is located? Press Enter to accept ./.
  • Want to override settings? Press N to keep the defaults.

After answering these, the CLI uploads your files and prints a unique preview URL.

Once the deployment finishes, look for the URL printed in your terminal output. It will look something like https://my-portfolio-xxxxxxx.vercel.app.

Seeing an error about authentication?

If the CLI says you are not logged in, run vercel login again to re-authenticate. Make sure you complete the browser confirmation step before returning to your terminal.

If you see a permissions error on Windows, try running your terminal as Administrator.

Help me fix my Vercel deployment error

Visit your preview deployment

The URL you just received is a preview deployment. It is a live, shareable version of your site that is not tied to your main production URL yet.

  • Copy the preview URL from your terminal output.
  • Paste it into your browser and press Enter.

You should see your portfolio page live on the internet. Notice the padlock icon in your browser's address bar. That confirms HTTPS is already enabled automatically.

What is a preview deployment?

Preview deployments let you test changes before going live. Each time you run vercel without the --prod flag, you get a unique URL for that specific version of your site.

This is the same workflow professional teams use to review updates before pushing them to production.

Don't see your site?

Make sure you are opening the full URL including https://. If you see a 404 page, check that your index.html file is in the root of the my-portfolio folder (not nested inside a subfolder).

Why is my Vercel preview showing a 404?

Deploy to production

Your preview looks great. Now let's push your site to its permanent production URL. This is the .vercel.app address you will share with the world.

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

What does --prod do?

The --prod flag tells Vercel to assign this deployment to your project's production domain. Without it, you get a one-off preview URL. With it, your site goes live at a stable .vercel.app address that always shows your latest production deployment.

  • Copy the production URL printed in your terminal.
  • Open it in your browser.

Your portfolio is now live at its production URL. This site is served from Vercel's global CDN, meaning it loads fast for visitors anywhere in the world.

Production URL not working?

If the command completes but you do not see a URL, scroll up in your terminal. The production URL is printed alongside the deployment details.

If you see the same preview content from before, hard-refresh your browser with Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows) to clear any cached version.

Help me troubleshoot my Vercel production deployment

Your portfolio is officially on the internet. Next up, you will make a change and see how easy it is to redeploy.

Make a Change and Redeploy

Your portfolio is live on the internet. You've proven you can take code from your machine and put it in front of the world in seconds.

Websites aren't static forever. The real power of the Vercel CLI is how fast you can iterate. In this step, you'll make a change to your portfolio, preview it safely, and then ship it to production.

In this step, get ready to:
  • Make a visible change to your portfolio page.
  • Deploy the change as a preview to verify it.
  • Promote the update to your production URL.
Update your portfolio

Before you can see the redeploy workflow in action, you need a change for Vercel to deploy. You'll make a visible edit to your index.html so the difference is obvious when you view the preview.

  • Switch back to index.html in your code editor.
  • Make a visible change to your page. For example, update your bio text in the About Me section or add a second project card below the existing one.

✔️ I'll give it a go!

Make any change you like. The goal is to have something visibly different so you can confirm the redeployment worked.

  • Save index.html after making your edit.

ⓧ Maybe a little help...

Here's an example. Find the About Me paragraph in your index.html:

<p>I'm a curious learner exploring web development. I love building projects that solve real problems and sharing what I learn along the way.</p>
  • Replace the text inside the <p> tags with something personal. Write a sentence or two about yourself and what you're learning.
  • Save index.html after making your edit.
Deploy the update as a preview

Preview deployments let you check changes on a live URL before anyone sees them on your main site. Each time you run vercel without the --prod flag, you get a brand new preview URL.

  • Deploy your updated portfolio as a preview by running this command:
vercel

What is a preview deployment?

A preview deployment is a temporary version of your site at its own unique URL. It's separate from your production site, so visitors to your main URL won't see any changes yet.

This gives you a chance to review updates before making them official. Professional teams use this same workflow to review changes before merging to production.

  • Copy the preview URL that the CLI prints after the deployment finishes.
  • Open the preview URL in your browser. You should see your portfolio with the change you just made.

Don't see your change?

Make sure you saved index.html before running vercel. Unsaved changes won't be included in the deployment.

Also confirm your terminal is still inside the my-portfolio folder. The CLI deploys whatever directory you're currently in.

help me debug my preview deployment

Promote to production

Your preview looks good. Now it's time to make those changes live on your production URL so anyone with the link sees the updated version.

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

What does --prod do?

The --prod flag tells Vercel to assign this deployment to your project's production domain. Without it, you get an isolated preview URL that doesn't affect what visitors see on your main site.

  • Open your production URL (the .vercel.app link from earlier) in your browser.
  • Confirm your change is now visible on the production site.

The core Vercel workflow

You just completed the full cycle: change, preview, ship. This is the same workflow professional developers use every day. Make edits locally, verify them on a preview URL, and promote to production when ready.

Production URL still showing the old version?

Try a hard refresh in your browser. Press Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows) to bypass the cache.

If you still see the old version, confirm that the CLI output said "Production" and not just "Preview" after running vercel --prod.

help me troubleshoot my production deployment

Secret mission

Auto-Deploy from GitHub

What if your site could update itself every time you push code? Connect your portfolio to a GitHub repository and set up automatic deployments so you never have to run a CLI command again.

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 my-portfolio project folder (on your Desktop).
  • Vercel project (deployed site with production URL).
  • GitHub repository (connected to Vercel for auto-deployments).
  • Vercel CLI (installed globally via npm).
  • Vercel account (Hobby plan, free).

Keep everything running

No action needed. Choose this if you're still actively building or plan to keep your portfolio live. Your site will stay online at your production URL with no charges.

  • Your Vercel project stays deployed on the free Hobby plan.
  • Your GitHub repository stays connected for automatic deployments on every push.
  • The Vercel CLI remains installed globally on your machine.

Pause - I'll come back to this later

Since this project is entirely free static hosting, there is nothing to pause for cost reasons. Your site will continue to be served at no charge. If you want to free up disk space or stop auto-deployments, you can disconnect GitHub from your Vercel project.

  • To stop auto-deployments, open your Vercel project in the Dashboard, go to Settings, then Git, and disconnect the repository.
  • Your site remains live at its production URL even after disconnecting Git.
  • You can reconnect at any time to resume auto-deployments.

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, select your project, click Settings in the sidebar, scroll to the bottom of the General page, and click Delete in the Delete Project section. Confirm by entering your project name and clicking Continue.
  • Delete your GitHub repository: Go to your repository page on GitHub, click Settings, scroll down to the Danger Zone section, and click Delete this repository. Follow the confirmation prompts.
  • Remove your local project folder by running this command:

macOS

rm -rf ~/Desktop/my-portfolio

Windows

rmdir /s /q "$HOME\Desktop\my-portfolio"
  • Uninstall the Vercel CLI by running:
npm uninstall -g vercel
  • Delete your Vercel account (optional): Navigate to vercel.com/account/settings and select Delete Personal Account. This permanently removes all projects and deployments.

That's a Wrap!

That's a Wrap!

Nice work. You just built a personal portfolio website and deployed it to the internet using Vercel.

You've learned how to:

  • Built and deployed a personal portfolio website to Vercel's global CDN with automatic HTTPS using the Vercel CLI.
  • Created preview deployments to test changes before pushing them to production.
  • Practised the core Vercel workflow: change, preview, ship with vercel and vercel --prod.
  • Connected a GitHub repository for automatic deployments on every push.

Ready to quiz yourself?