Deploy Your First Website to Vercel

Deploy a portfolio site live on Vercel's global CDN using the CLI.

Introduction

30 Second Summary

You've built something cool on your computer. Now you want the world to see it. Getting a website from your laptop to the internet used to involve buying servers, configuring DNS, and wrestling with hosting panels. Today, it takes one command.

In this project, you will deploy a personal portfolio website to Vercel, a modern hosting platform. You'll learn the preview-to-production workflow that professional developers use every day.

What You'll Build

A responsive portfolio landing page built with HTML and CSS, deployed live on Vercel's global CDN with automatic HTTPS.

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

  • A live website with a public URL you can share with anyone.
  • The Vercel CLI installed and configured for future deployments.
  • Experience with the preview-to-production deployment workflow that professional developers use daily.
  • Secret Mission: Add a serverless API endpoint that returns dynamic data on your site.

Are there any prerequisites?

None. This guide includes full setup instructions for every tool you need. You don't need prior experience with web development or hosting.

Set Up Your Tools

Before you can deploy anything to the web, you need two tools on your machine.

The first is Node.js, a JavaScript runtime that lets you run tools and scripts from your terminal. The second is the Vercel CLI, a command-line tool that handles deploying your website to Vercel's servers.

In this step, get ready to:
  • Install Node.js and verify it works.
  • Install the Vercel CLI globally.
  • Log in to your Vercel account from the terminal.
Install Node.js

Node.js provides the npm package manager, which you need to install the Vercel CLI. This project requires Node.js version 18 or above.

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

✔️ I see version 18 or higher

If you see v18.x.x or higher (like v22.x.x or v24.x.x), you're all set. Skip ahead to the next substep.

ⓧ I see a version lower than 18

Your version of Node.js is too old for this project. You need to upgrade to version 18 or above.

  • Visit the Node.js download page at https://nodejs.org/en/download.
  • Download the LTS version for your operating system.
  • Run the installer and follow the on-screen prompts. Accept the default settings.
  • Close and reopen your terminal, then run node --version again to confirm the upgrade.

ⓧ Command not found

Node.js is not installed on your machine yet. Let's install it.

  • Visit the Node.js download page at https://nodejs.org/en/download.
  • Download the LTS version for your operating system.
  • Run the installer and follow the on-screen prompts. Accept the default settings.
  • Close and reopen your terminal, then run node --version to confirm installation. You should see a version number starting with v18 or higher.

What is Node.js?

Node.js is a JavaScript runtime that lets you run JavaScript outside of a web browser. Many developer tools (including the Vercel CLI) are built as npm packages, and npm comes bundled with Node.js.

Install the Vercel CLI

The Vercel CLI is the tool you will use to deploy your website directly from your terminal.

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

What does this command do?

The npm i -g vercel command tells npm to install the vercel package globally (-g). Installing globally means you can run vercel from any folder on your machine, not just a specific project.

  • Verify the installation by running:
vercel --version

You should see a version number printed in your terminal. This confirms the CLI is installed and ready to use.

Seeing command not found?

If your terminal says the vercel command is not found, the global npm bin directory might not be in your system PATH. Try closing and reopening your terminal, then run vercel --version again.

If it still doesn't work, you can use npx vercel instead of vercel for any command in this project. The npx tool runs the package without requiring a global install.

Still stuck? Help me fix the vercel command not found error after running npm i -g vercel.

Log in to Vercel

The CLI needs to know which Vercel account to deploy to. You will authenticate by logging in from your terminal.

  • Log in to Vercel by running this command:
vercel login

What happens when you run this?

The CLI opens a browser tab where you can sign in to your Vercel account. If you don't have a Vercel account yet, you can create a free one during this step using your email, GitHub, GitLab, or Bitbucket account.

After you approve the login in your browser, your terminal displays a success message. The CLI stores a token locally so you don't need to log in again for future commands.

  • Switch to the browser tab that opened.
  • If you already have a Vercel account, sign in. If you don't, create a free account (the Hobby plan costs nothing and requires no credit card).
  • Approve the login request.
  • Return to your terminal. You should see a success message confirming you are logged in.

Browser didn't open?

If the browser tab didn't open automatically, look in your terminal for a URL. Copy and paste that URL into your browser manually to complete the login.

Need more help? Help me troubleshoot the vercel login command not opening my browser.

Your tools are installed and your Vercel account is connected. Next up, you will create the portfolio website that you will deploy to the world.

Create Your Portfolio Website

Your tools are installed and your Vercel account is ready to go. Now it's time to build the actual website you'll deploy.

In this step, you'll create a portfolio landing page using HTML and CSS. By the end, you'll have a responsive personal site ready to go live.

In this step, get ready to:
  • Create a project folder with your HTML and CSS files.
  • Build a portfolio page with a header, hero section, projects grid, and footer.
  • Preview your site locally in the browser.
Create your project folder and HTML file

Every web project starts with a folder to hold your files. 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 was created by running:
pwd

You should see a path ending in /my-portfolio.

Seeing 'No such file or directory'?

Make sure you typed cd ~/Desktop first. The tilde (~) is a shortcut to your home folder.

Help me troubleshoot this error

Now open VS Code so you can create and edit your website files.

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

VS Code now has your project folder open. You should see my-portfolio in the Explorer sidebar on the left.

  • In the Explorer sidebar, hover over the MY-PORTFOLIO heading and click the New File icon (a page with a plus sign).
  • Type index.html and press Enter.

The file opens in the editor. This is where your portfolio's content and structure will live.

  • Copy and paste 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 rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <h1>Alex Developer</h1>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h2>Hi, I'm Alex</h2>
            <p>A web developer learning to build and deploy modern websites.</p>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>I'm passionate about creating clean, responsive websites. Currently learning web deployment with Vercel.</p>
        </section>

        <section id="projects">
            <h2>Projects</h2>
            <div class="project-grid">
                <div class="project-card">
                    <h3>Portfolio Site</h3>
                    <p>This website! Built with HTML and CSS, deployed on Vercel.</p>
                </div>
                <div class="project-card">
                    <h3>Coming Soon</h3>
                    <p>More projects on the way. Stay tuned!</p>
                </div>
            </div>
        </section>

        <section id="contact">
            <h2>Get in Touch</h2>
            <p>Feel free to reach out at <a href="mailto:hello@example.com">hello@example.com</a></p>
        </section>
    </main>

    <footer>
        <p>Deployed with Vercel</p>
    </footer>
</body>
</html>

What does this HTML do?

  • The <header> contains a navigation bar with your name and links to each section of the page.
  • The <main> element holds four sections: a hero introduction, an about blurb, a projects grid, and a contact section.
  • The <footer> sits at the bottom and shows where the site is deployed.
  • 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).

You won't see a visual change yet. The next substep adds the styling, and then you'll open it in the browser.

Add responsive styling with CSS

Your HTML has the structure, but it looks plain without any styling. A CSS file will add layout, colors, and responsive behavior so the page looks polished on any screen size.

  • In the Explorer sidebar, hover over the MY-PORTFOLIO heading and click the New File icon again.
  • Type style.css and press Enter.
  • Copy and paste the following CSS into 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;
}

header {
    background: #000;
    color: #fff;
    padding: 1rem 2rem;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

nav h1 {
    font-size: 1.5rem;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav a {
    color: #fff;
    text-decoration: none;
}

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

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

section {
    margin-bottom: 4rem;
}

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

#hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

#hero p {
    font-size: 1.25rem;
    color: #666;
}

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

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.project-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
}

.project-card h3 {
    margin-bottom: 0.5rem;
}

#contact a {
    color: #0070f3;
}

footer {
    text-align: center;
    padding: 2rem;
    background: #f5f5f5;
    color: #666;
}

@media (max-width: 600px) {
    nav {
        flex-direction: column;
        gap: 1rem;
    }

    #hero h2 {
        font-size: 2rem;
    }

    nav ul {
        gap: 1rem;
    }
}

What does this CSS do?

  • The * reset removes default browser spacing so everything starts from a clean slate.
  • The nav uses flexbox to space your name and links horizontally across a black header bar.
  • The .project-grid uses CSS Grid to lay out project cards in a responsive grid that adapts to screen width.
  • The @media query at the bottom stacks the navigation vertically on screens narrower than 600px.
  • Save style.css by pressing Cmd+S (macOS) or Ctrl+S (Windows).

Not sure both files are saved?

Look at the file tabs in VS Code. A white dot next to a filename means it has unsaved changes. Press Cmd+S (macOS) or Ctrl+S (Windows) to save.

How can I tell if my files are saved in VS Code?

✔️ Awesome, I've got everything!

Great. Make sure both index.html and style.css are saved before moving on.

ⓧ 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>
    <header>
        <nav>
            <h1>Alex Developer</h1>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h2>Hi, I'm Alex</h2>
            <p>A web developer learning to build and deploy modern websites.</p>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>I'm passionate about creating clean, responsive websites. Currently learning web deployment with Vercel.</p>
        </section>

        <section id="projects">
            <h2>Projects</h2>
            <div class="project-grid">
                <div class="project-card">
                    <h3>Portfolio Site</h3>
                    <p>This website! Built with HTML and CSS, deployed on Vercel.</p>
                </div>
                <div class="project-card">
                    <h3>Coming Soon</h3>
                    <p>More projects on the way. Stay tuned!</p>
                </div>
            </div>
        </section>

        <section id="contact">
            <h2>Get in Touch</h2>
            <p>Feel free to reach out at <a href="mailto:hello@example.com">hello@example.com</a></p>
        </section>
    </main>

    <footer>
        <p>Deployed with Vercel</p>
    </footer>
</body>
</html>

And 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;
}

header {
    background: #000;
    color: #fff;
    padding: 1rem 2rem;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

nav h1 {
    font-size: 1.5rem;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav a {
    color: #fff;
    text-decoration: none;
}

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

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

section {
    margin-bottom: 4rem;
}

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

#hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

#hero p {
    font-size: 1.25rem;
    color: #666;
}

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

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.project-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
}

.project-card h3 {
    margin-bottom: 0.5rem;
}

#contact a {
    color: #0070f3;
}

footer {
    text-align: center;
    padding: 2rem;
    background: #f5f5f5;
    color: #666;
}

@media (max-width: 600px) {
    nav {
        flex-direction: column;
        gap: 1rem;
    }

    #hero h2 {
        font-size: 2rem;
    }

    nav ul {
        gap: 1rem;
    }
}
Preview your site in the browser

Your files are ready. Opening the HTML file directly in a browser lets you see how the page looks before deploying it anywhere.

  • Open Finder (macOS) or File Explorer (Windows).
  • Navigate to Desktop and open the my-portfolio folder.
  • Double-click index.html to open it in your default browser.

You should see a black navigation bar at the top with "Alex Developer" on the left and three links on the right. Below that, a centered hero heading says "Hi, I'm Alex" followed by the About, Projects, and Contact sections.

Why does it look different from a live website?

The URL in your browser starts with file:// instead of https://. That means the page is loading directly from your hard drive, not from a server.

When you deploy to Vercel in the next step, your site gets a real https:// URL that anyone on the internet can visit.

Seeing unstyled text with no colors?

Make sure style.css is in the same folder as index.html. The filename must match exactly what the HTML references: style.css (not styles.css or Style.css).

Why isn't my CSS showing up in the browser?

Your portfolio site is built and looking sharp locally. Next up, you'll deploy it to the internet with a single command.

Deploy a Preview

Your portfolio looks great locally, but right now only you can see it. To share it with the world, you need to deploy it to a server that anyone can reach.

Vercel makes this simple. One command uploads your files and puts them on a global CDN with a unique URL. The first deployment is always a preview. It acts as a staging environment where you can check everything looks right before going live.

In this step, get ready to:
  • Run the Vercel CLI to create your first deployment.
  • Walk through the CLI prompts to configure your project.
  • Visit your preview URL to see your site live on the internet.
Run the deploy command

The Vercel CLI detects your project, uploads your files, and gives you a live URL. The entire process happens from one command.

  • In your terminal (still inside the my-portfolio folder), start the deployment by running this command:
vercel

What does this command do?

The vercel command detects your project, builds it (if needed), and deploys it to Vercel's infrastructure. Since this is your first time running it in this folder, the CLI will ask a few setup questions before deploying.

Walk through the CLI prompts

The CLI needs to know where to put your project and what to call it. It asks a series of questions the first time you deploy a new folder.

  • The first prompt asks Set up and deploy? Enter Y and press Enter to confirm.
  • The next prompt asks Which scope do you want to deploy to? Select your personal account (it is usually the only option) and press Enter.
  • When asked Link to existing project? enter N and press Enter. You are creating a new project.
  • When asked What's your project's name? press Enter to accept the default name (my-portfolio).
  • When asked In which directory is your code located? press Enter to accept ./ (the current folder).

What do these prompts mean?

Each prompt configures how Vercel handles your project. The scope decides which account owns the deployment. The project name appears in your Vercel dashboard and in the URL.

The directory tells Vercel which folder contains the files to deploy. Since your project is plain HTML and CSS with no build step, Vercel serves your files directly without running a build command.

After answering the prompts, the CLI uploads your files and outputs a preview URL. Wait a few seconds for the deployment to finish.

Seeing an error after the prompts?

If the CLI says you are not logged in, run vercel login first and then try vercel again. If you see a permissions error, make sure you selected your personal account (not a team you do not own) in the scope prompt.

Help me fix my Vercel deployment error.

Visit your preview URL

The CLI output includes a Preview URL. This is a unique, Vercel-generated link to your deployed site.

  • Find the URL in your terminal output. It looks something like my-portfolio-abc123.vercel.app.
  • Copy the URL and paste it into your browser's address bar.
  • Press Enter to load the page.

You should see your portfolio site live on the internet. Anyone with this URL can see it.

What is a preview deployment?

Vercel has three deployment environments: Local, Preview, and Production. Each time you deploy, Vercel generates a unique URL so you and your team can preview changes in a live environment.

Preview deployments are perfect for testing. They are live on the internet but will not replace your production site. You can share preview URLs with others for feedback before going live.

Page not loading?

Make sure you copied the full URL including the .vercel.app part. If the page shows a 404 error, confirm your index.html file is in the root of your my-portfolio folder (not inside a subfolder).

My Vercel preview URL shows a 404 or will not load.

Your site is live on the internet. Next up, you will promote this preview to production and explore the Vercel dashboard.

Deploy to Production

Your preview deployment confirmed that your portfolio works on the internet. Now it's time to go live.

Production is the public-facing version of your site. It gets a clean, permanent URL that you can share with anyone.

In this step, get ready to:
  • Deploy your site to production with a single command.
  • Visit your live production URL in the browser.
  • Explore the Vercel dashboard to review deployment details and build logs.
Run the production deploy command

Preview deployments are for testing. Production deployments are what the world sees.

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

The CLI uploads your files and outputs your production URL. It looks something like my-portfolio.vercel.app (based on the project name you chose earlier).

What is the difference between preview and production?

Vercel has three default environments: Local, Preview, and Production. Preview deployments get a unique URL each time you run vercel. They are for testing changes before they go public.

Production is the stable URL that always points to your latest shipped version. When you run vercel --prod, you are telling Vercel this version is ready for the world.

Seeing a permission or login error?

Make sure you are still logged in by running vercel login again. Also confirm your terminal is still inside the my-portfolio folder.

help me fix a permission error when running vercel --prod

Visit your production URL

Your site is now live on the internet with automatic HTTPS and delivered through a global CDN.

  • Copy the production URL from your terminal output.
  • Paste it into your browser's address bar and press Enter.
  • Confirm that you see your full portfolio page with the header, hero section, projects grid, and footer.

What does Vercel give me for free?

Your site is served over HTTPS with an SSL certificate that Vercel provisions automatically. It is also distributed across a global CDN, meaning visitors anywhere in the world get fast load times.

All of this is included on the free Hobby plan with no billing or payment method required.

Page not loading or showing a 404?

Double-check that your index.html file is in the root of the my-portfolio folder (not inside a subfolder). Vercel looks for index.html at the top level to serve your site.

help me debug why my Vercel production deployment shows a 404

Explore the Vercel dashboard

The Vercel dashboard gives you a centralized place to manage deployments, inspect build logs, and configure project settings.

  • Open vercel.com in your browser and sign in if prompted.
  • Click on your project name to open the Project Overview page.
  • You should see your latest production deployment URL and a preview of your live site.
  • Click Deployments in the sidebar to see a list of all your deployments.
  • Click on your production deployment to view its details, including build time and the detected framework.
  • Look for the build logs section. This shows the console output from when Vercel built your site.
  • Click Settings in the sidebar to explore your project configuration.
  • Notice the Framework Preset is set to Other since your project uses plain HTML and CSS with no build step.

Why explore the dashboard?

In professional workflows, you use the dashboard to debug failed deployments, roll back to previous versions, manage custom domains, and configure environment variables. Getting familiar with it now saves time later.

Your site is live and you know your way around the dashboard. Next, you will make a change to your portfolio and redeploy to see the full development cycle in action.

Make a Change and Redeploy

Your portfolio is live on the internet. But real websites are never truly "done."

The real power of the Vercel CLI is how fast you can iterate. In this step, you'll make a change to your site, preview it on a unique URL, and then promote it to production. This is the exact workflow professional developers use daily.

In this step, get ready to:
  • Edit your portfolio HTML with new content.
  • Deploy a preview to test the change.
  • Ship the update to production.
Edit your portfolio page

Every change you make locally stays invisible to the world until you deploy it. This gives you a safe space to experiment before anything goes live.

  • Switch back to your code editor with index.html open.
  • Find the hero section near the top of the <body>:
<section id="hero">
    <h2>Hi, I'm Alex</h2>
    <p>A web developer learning to build and deploy modern websites.</p>
</section>
  • Update the <p> text inside the hero section to something that describes you. For example, change it to your own introduction or add a sentence about what you're building.
  • Save index.html.

Why start with a small change?

Professional developers deploy small, incremental changes rather than large rewrites. Each deployment is a checkpoint. If something breaks, you know exactly which change caused it.

Deploy a preview to test your change

Before pushing changes to your live site, you deploy a preview. This creates a separate URL where only you can see the update. Your production site stays untouched.

  • Deploy a new preview by running this command in your terminal:
vercel

What happens when you redeploy?

Vercel generates a brand new unique URL for this preview deployment. Your previous preview URL still works too. Each deployment is an immutable snapshot of your site at that moment in time.

  • Look for the Preview URL in the terminal output.
  • Open that URL in your browser.
  • Confirm you can see your updated hero text on the preview page.

Preview looks the same as before?

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

Also check that you're opening the new preview URL, not the old one from your previous deployment.

Why isn't my preview showing my latest changes?

Ship to production

Your preview looks good. Time to make it official. One command pushes your changes to the production URL that anyone can visit.

  • Deploy to production by running:
vercel --prod

Preview vs production

Preview deployments let you test changes in isolation. Production deployments update your main URL that the world sees. This two-step workflow protects you from accidentally shipping broken code to your live site.

In team settings, preview deployments are often shared with teammates for review before anyone promotes to production.

  • Open your production URL in the browser (the same URL from your earlier production deployment).
  • Confirm your updated hero text is now live on the production site.

Production URL still showing old content?

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

If the content still looks old, check that the terminal output for vercel --prod completed without errors and showed a production URL.

My production deployment isn't updating. What should I check?

You just completed the full preview-to-production workflow. Every future change follows this same pattern: edit locally, preview with vercel, ship with vercel --prod.

Secret mission

Add a Serverless API Endpoint

Your portfolio is live, but it only serves static files. Vercel can also run server-side code with zero configuration. In this secret mission, you'll add a serverless API endpoint that returns dynamic data, then connect it to your portfolio page so it displays a live message.

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 folder on your Desktop (contains index.html, style.css, and api/hello.js).
  • Vercel project with production deployment and serverless function.
  • Vercel CLI installed globally via npm.
  • Vercel account (free Hobby plan).

Keep everything running

No action needed. Choose this if you're still actively building on your portfolio or plan to deploy more projects to Vercel soon.

  • Your site stays live at its production URL.
  • Your local files remain on your Desktop for future edits.
  • The Vercel CLI stays available for future deployments.
  • Your Vercel account is free, so no charges will apply.

Pause - I'll come back to this later

Your Vercel Hobby plan is free, so there is nothing to pause on the cloud side. Your site will stay live at no cost. If you want to free up local disk space, you can delete the local project folder and re-create it later.

  • Your Vercel project and deployments stay live with no ongoing cost.
  • Optionally delete the local folder if you need disk space. You can always re-create the project later.

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 in your browser, select your project, then navigate to Settings. Scroll to the bottom and click Delete Project. Confirm the prompt to remove all deployments.
  • Delete your local project folder. On macOS or Linux, run:
cd ~/Desktop
rm -rf my-portfolio
  • On Windows, run:
cd ~\Desktop
rmdir /s /q my-portfolio
  • Uninstall the Vercel CLI by running:
npm uninstall -g vercel
  • Delete your Vercel account (optional). If you no longer need your Vercel account, open the Vercel Dashboard, click your avatar in the top-right corner, then select Account Settings. Scroll to the bottom of the General page and click Delete Personal Account. Confirm the prompt to permanently delete your account.

Nice Work!

Nice Work!

You just took a website from files on your computer to a live URL on the internet. Your portfolio is now deployed on Vercel's global CDN with automatic HTTPS, and you know how to update it in seconds.

Here's what you accomplished:

  • Built a responsive portfolio page with HTML and CSS and deployed it to a live URL on Vercel's global CDN.
  • Installed and configured the Vercel CLI to deploy projects straight from the terminal.
  • Used the preview-to-production workflow that professional developers rely on to test changes safely before shipping.
  • Added a serverless API endpoint that returns dynamic data and connected it to your portfolio page.

Ready to quiz yourself?