Host a Website with Vercel

Deploy a personal landing page to Vercel's global CDN using the CLI.

Introduction

30 Second Summary

You've built something cool on your computer. Now you want to show it to the world. Getting a website from your local files to a live URL used to require wrestling with servers and confusing hosting panels.

In this project, you will build a personal landing page and deploy it to the internet using Vercel, a modern hosting platform. You'll learn how to preview your changes before going live and promote them to a production URL you can share with anyone.

What You'll Build

A personal portfolio-style landing page deployed to Vercel's global CDN using the Vercel CLI.

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

A styled HTML/CSS personal landing page built from scratch.
A live preview deployment URL for verifying changes before they go live.
A live production deployment URL you can share with anyone.
A working Vercel CLI setup you can reuse for future projects.
Secret Mission: Connect a GitHub repository so your site auto-deploys on every push.

Are there any prerequisites?

None. This project includes full setup instructions for every tool you need. You do not need prior experience with web development or the command line.

Install Node.js and the Vercel CLI

Before you can deploy a website, you need the right tools installed on your machine. Vercel is the hosting platform that will serve your site to the world, and its command-line tool lets you deploy directly from your terminal.

To use the Vercel CLI, you first need Node.js installed. Node.js is a JavaScript runtime that powers tools like the Vercel CLI behind the scenes. In this step, you will install both tools and create your free Vercel account.

In this step, get ready to:

Install Node.js (version 18 or higher).
Install the Vercel CLI globally.
Create a free Vercel account and authenticate the CLI.

Download and install Node.js

Node.js is required by the Vercel CLI. You need version 18 or higher installed on your machine.

Open a terminal in VS Code by pressing Cmd+` (macOS) or Ctrl+` (Windows).
Check if Node.js is already installed by running this command:

node --version

✔️ I see version 18 or higher

If your terminal prints something like v24.16.0 (or any number 18 or above), Node.js is ready. Skip ahead to the next substep.

ⓧ I see an older version

If you see a version number lower than 18 (for example v16.14.0), you need to upgrade.

Open your browser and go to nodejs.org/en/download.
Download the LTS version (currently v24.16.0).
Run the installer and accept all the default settings.
Close your terminal in VS Code by clicking the trash icon on the terminal panel.
Open a fresh terminal with Cmd+` (macOS) or Ctrl+` (Windows).
Run node --version again to confirm it now shows 18 or higher.

Why close and reopen the terminal?

Your terminal loads the system PATH when it starts. A fresh terminal picks up the newly installed Node.js version.

ⓧ Command not found

Node.js is not installed on your machine yet.

Open your browser and go to nodejs.org/en/download.
Download the LTS version (currently v24.16.0).
Run the installer and accept all the default settings.
Close your terminal in VS Code by clicking the trash icon on the terminal panel.
Open a fresh terminal with Cmd+` (macOS) or Ctrl+` (Windows).
Run node --version to confirm it prints a version number 18 or higher.

Still seeing command not found?

Make sure you opened a new terminal after installation. If the issue persists, restart VS Code entirely and try again.

Help me troubleshoot why Node.js isn't recognized after installation.

Install the Vercel CLI

The Vercel CLI is a command-line tool that lets you deploy websites directly from your terminal. You will use it to push your local files to Vercel's servers.

Install the Vercel CLI globally by running this command:

npm i -g vercel

What does this command do?

npm i -g vercel tells npm (Node's package manager) to install the vercel package globally on your machine. The -g flag makes it available as a command you can run from any folder.

Confirm the installation succeeded by running this command:

vercel --version

You should see a version number printed in your terminal, confirming the Vercel CLI is ready to use.

Seeing a permission error?

On macOS or Linux, you may need to prefix the install command with sudo:

sudo npm i -g vercel

Enter your computer password when prompted. If you are on Windows and see an error about execution policies, open PowerShell as Administrator and try again.

Help me fix a permission error when installing the Vercel CLI globally.

Create a Vercel account and log in

You need a Vercel account so the CLI knows where to deploy your site. The free Hobby plan includes everything you need for this project.

Open your browser and go to vercel.com/signup.
Create a free account using your email, GitHub, or GitLab.
Once your account is created, return to your VS Code terminal.
Authenticate the CLI by running this command:

vercel login

What happens when you run this?

The CLI will open your browser and ask you to confirm the login. Once you approve the request in your browser, the terminal will confirm you are logged in.

When your browser opens, click to approve the login request.
Switch back to your terminal. You should see a confirmation message showing your email address, meaning the CLI is now authenticated.

Browser didn't open automatically?

Copy the URL printed in your terminal and paste it into your browser manually. If you see a timeout error, run vercel login again.

Help me troubleshoot the vercel login command.

Your tools are installed and your Vercel account is connected. Next up, you will build the landing page that you will deploy to the internet.

Build Your Landing Page

Your tools are locked and loaded. Node.js and the Vercel CLI are ready to go, which means you can deploy anything from your terminal.

Before you can deploy, you need something to deploy. In this step, you'll build a clean personal landing page using HTML and CSS. Think of it as your digital business card: a hero introduction, a short bio, and links to your online profiles.

In this step, get ready to:

Create a project folder and build your HTML landing page structure.
Style the page with CSS for layout, typography, and responsive design.
Preview your site locally in the browser to confirm it looks right.

Create your project folder and HTML file

Every web project starts with a folder to keep your files organized. You'll create one on your Desktop so it's easy to find.

Open your terminal. Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar, type Terminal (macOS) or PowerShell (Windows), and press Enter.
Move to your Desktop by running this command:

cd ~/Desktop

Create your project folder and move into it by running these commands:

mkdir my-website
cd my-website

Confirm the folder was created by running:

ls

The folder is empty for now. You'll add files to it next.

Switch back to VS Code.
Click File in the top menu bar.
Click Open Folder.
Navigate to your Desktop, select the my-website folder, and click Open.

Why open the folder in VS Code?

Opening the entire folder (not just a single file) gives VS Code the full project context. You'll see all your files in the sidebar, and any new files you create will land in the right place.

Now you'll create your HTML file. This is the skeleton of your landing page.

In the VS Code Explorer sidebar on the left, click the New File... button (the file icon with a plus sign).
Type index.html 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="style.css">
</head>
<body>
    <main class="container">
        <section class="hero">
            <h1>Hi, I'm Alex</h1>
            <p class="tagline">Aspiring web developer learning to build and deploy modern websites.</p>
        </section>
        <section class="about">
            <h2>About Me</h2>
            <p>I'm passionate about creating things for the web. Currently learning HTML, CSS, and deployment workflows. This is my first site hosted on Vercel!</p>
        </section>
        <section class="links">
            <h2>Find Me Online</h2>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://linkedin.com">LinkedIn</a></li>
                <li><a href="mailto:hello@example.com">Email Me</a></li>
            </ul>
        </section>
        <footer>
            <p>Deployed with Vercel</p>
        </footer>
    </main>
</body>
</html>

What does this code do?

This HTML creates a single-page landing page with four sections:

The hero section displays your name and a short tagline.
The about section holds a brief bio paragraph.
The links section lists clickable links to your online profiles.
The footer credits your hosting platform.

The <link rel="stylesheet" href="style.css"> line in the head connects your HTML to the stylesheet you'll create next.

Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).

Don't see the Explorer sidebar?

If the left sidebar is hidden, click View in the menu bar, then select Explorer. You can also toggle it with Cmd+Shift+E (macOS) or Ctrl+Shift+E (Windows).

Help me find the Explorer sidebar in VS Code

✔️ 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 the complete index.html file. Make sure yours matches exactly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <section class="hero">
            <h1>Hi, I'm Alex</h1>
            <p class="tagline">Aspiring web developer learning to build and deploy modern websites.</p>
        </section>
        <section class="about">
            <h2>About Me</h2>
            <p>I'm passionate about creating things for the web. Currently learning HTML, CSS, and deployment workflows. This is my first site hosted on Vercel!</p>
        </section>
        <section class="links">
            <h2>Find Me Online</h2>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://linkedin.com">LinkedIn</a></li>
                <li><a href="mailto:hello@example.com">Email Me</a></li>
            </ul>
        </section>
        <footer>
            <p>Deployed with Vercel</p>
        </footer>
    </main>
</body>
</html>

Style your landing page with CSS

Right now your HTML has structure but no visual design. CSS controls how everything looks: colors, spacing, fonts, and layout. You'll build the stylesheet in three parts.

In the VS Code Explorer sidebar, click the New File... button again.
Type style.css and press Enter.
Paste the following base styles into style.css:

/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Center content with a max width */
.container {
    max-width: 640px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

What does this code do?

These three rules establish the page foundation:

The * selector resets all default margins and padding so you start from a clean slate.
The body rule sets your font, text color, and a light grey background.
The .container centers your content at 640px wide with comfortable padding.

Save style.css and open index.html in your browser by locating the file on your Desktop inside the my-website folder and double-clicking it.
You should see your text centered on a light grey background with a clean sans-serif font.

Still seeing unstyled text?

Make sure your style.css file is in the same folder as index.html. The filename must match exactly what's in the <link> tag: style.css (lowercase, no spaces).

Help me figure out why my CSS isn't loading

Next, add the styles for your hero section, content areas, and typography. These control the sizing and spacing of each section.

Add the following code below the existing styles in style.css:

/* Hero section spacing */
.hero {
    margin-bottom: 3rem;
}

/* Large heading style */
.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #111;
}

/* Tagline below the heading */
.tagline {
    font-size: 1.2rem;
    color: #666;
}

/* Spacing for content sections */
.about,
.links {
    margin-bottom: 2.5rem;
}

/* Section heading style */
h2 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: #111;
}

/* Paragraph text color */
p {
    color: #444;
}

What does this code do?

These rules control the visual hierarchy of your page:

The .hero h1 makes your name large and prominent at 2.5rem.
The .tagline is slightly larger than body text and uses a muted grey to feel secondary.
Section spacing (.about and .links) adds vertical breathing room between content areas.

Save style.css and refresh your browser.
Your heading should now be large and bold, with clear spacing between sections.

Heading size didn't change?

Make sure you pasted the new code below the existing styles, not replacing them. Check for any stray characters or missing closing braces } from the previous section.

Help me fix my CSS section styling

Finally, add the interactive link styles, footer, and responsive rules that adapt your page for mobile screens.

Add the following code below your existing styles in style.css:

/* Horizontal link list */
ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Link buttons */
ul a {
    color: #0070f3;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid #0070f3;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
}

/* Link hover effect */
ul a:hover {
    background-color: #0070f3;
    color: #fff;
}

/* Footer spacing and divider */
footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #eaeaea;
}

footer p {
    font-size: 0.875rem;
    color: #999;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }

    .container {
        padding: 2rem 1.5rem;
    }

    ul {
        flex-direction: column;
        gap: 0.75rem;
    }
}

What does this code do?

This final section handles interactivity and responsiveness:

The ul a styles turn your plain links into pill-shaped buttons with a blue border.
The :hover rule fills the button with blue when you mouse over it.
The @media block adjusts sizing and stacks the links vertically on screens narrower than 480px.

Save style.css and refresh your browser.
Your links should now appear as blue outlined buttons in a horizontal row. Hovering over them fills them with blue.

Links not styled as buttons?

Check that your ul a selector targets anchor tags inside the unordered list. Also confirm you don't have a typo in the color value #0070f3 (it's a zero after the hash, not the letter O).

Help me troubleshoot my link button styles

✔️ Awesome, I've got everything!

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

ⓧ I'd like to double check the full code

Here's the complete style.css file. Make sure yours matches exactly:

* {
    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: 640px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.hero {
    margin-bottom: 3rem;
}

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

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

.about,
.links {
    margin-bottom: 2.5rem;
}

h2 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: #111;
}

p {
    color: #444;
}

ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

ul a {
    color: #0070f3;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid #0070f3;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
}

ul a:hover {
    background-color: #0070f3;
    color: #fff;
}

footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #eaeaea;
}

footer p {
    font-size: 0.875rem;
    color: #999;
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }

    .container {
        padding: 2rem 1.5rem;
    }

    ul {
        flex-direction: column;
        gap: 0.75rem;
    }
}

Preview your site locally

Your page should already be open in the browser from the earlier save. If not, you'll open it now to confirm everything looks polished before deploying.

Refresh your browser tab that has index.html open. If you closed it, open Finder (macOS) or File Explorer (Windows), navigate to Desktop > my-website, and double-click index.html.
Confirm you see a centered page with a large heading that says Hi, I'm Alex, a short tagline, an About Me section, three blue pill-shaped link buttons, and a footer line that says Deployed with Vercel.
Hover over the link buttons to verify they fill with blue on hover.

Try resizing your browser window

Drag your browser window narrower than 480px wide. The links should stack vertically and the heading should shrink slightly. This is your responsive design in action.

Your landing page is looking sharp. Next up, you'll deploy it to Vercel and get a live URL that anyone on the internet can visit.

Deploy a Preview to Vercel

In the previous step, you built a personal landing page and confirmed it looks great locally. Now it is time to put it on the internet.

The Vercel CLI makes this surprisingly quick. You will run a single command that uploads your files, hosts them on Vercel's global CDN, and gives you a live URL.

In this step, get ready to:

Run the Vercel CLI to create and link a new project.
Configure the project settings for plain HTML/CSS.
Open your preview deployment URL and see your site live.

Run the deploy command

The vercel command uploads your project files and creates a deployment. When you run it for the first time in a folder, it walks you through an interactive setup to create a new Vercel project.

Switch back to your terminal.
Make sure you are inside the my-website folder by running this command:

cd ~/Desktop/my-website

Start the deployment by running:

vercel

The CLI will now ask you a series of setup questions. Follow the prompts below to configure your project.

What does this command do?

The vercel command is the CLI's default deploy action. It uploads your project files to Vercel's servers and returns a live URL once the deployment finishes.

Because this is the first time you are running it in this folder, the CLI needs to know which account and project to deploy to. It asks a few quick questions to set that up.

Answer the CLI setup prompts

The CLI presents several interactive prompts to configure your new Vercel project. Since this is a plain HTML/CSS site, you will accept most defaults and override the build settings.

When asked Set up and deploy?, press Enter to accept the default (Y).
When asked Which scope do you want to deploy to?, select your personal account and press Enter.
When asked Link to existing project?, press Enter to accept the default (N).
When asked What's your project's name?, press Enter to accept the default name (my-website).
When asked In which directory is your code located?, press Enter to accept the default (./).
When asked Want to override the settings?, type y and press Enter.

Why override the settings?

The CLI tries to auto-detect a framework (like Next.js or React). Your project is plain HTML and CSS with no framework, so the auto-detected settings will not be correct.

Overriding lets you tell Vercel to serve your files directly without a build step.

For the framework preset, select Other from the list and press Enter.
When asked for the Build Command, leave it empty and press Enter.
When asked for the Output Directory, leave it as the default and press Enter.
When asked for the Development Command, leave it empty and press Enter.

Why leave the Build Command empty?

Frameworks like Next.js need a build step to compile code before serving. Your project is already pure HTML and CSS, so Vercel can serve your files directly without building anything.

Selecting Other and leaving the Build Command empty tells Vercel to skip the build step entirely and serve your files as-is.

After you answer the last prompt, the CLI uploads your files and deploys them. This takes a few seconds.

Seeing an error during setup?

If you see a permissions error, make sure you authenticated with vercel login in the previous step.
If the CLI says the project name is already taken, type a different name (like my-website-123) and press Enter.

Still stuck? Help me troubleshoot the Vercel CLI setup prompts.

Open your preview URL

Once deployment completes, the CLI prints a preview URL to your terminal. This is a live link to your site on the internet.

Look for the URL the CLI printed (it looks something like my-website-abc123.vercel.app).
Copy the URL from your terminal.
Paste it into your browser address bar and press Enter.

You should see your personal landing page live on the internet, with the same heading, bio, and links you saw locally.

What is a preview deployment?

A preview deployment is a test version of your site at a unique URL. It lets you check that everything looks right before promoting to production.

Each time you run vercel (without the --prod flag), you get a new preview URL. Think of it like showing a draft to a friend before publishing.

Site not loading at the preview URL?

Make sure you ran vercel from inside the my-website folder, not its parent.
Check that your index.html file is in the root of my-website, not inside a subfolder.
If you see a directory listing instead of your page, confirm the file is named exactly index.html (lowercase).

Still stuck? Help me troubleshoot my Vercel preview deployment.

Your site is live on the internet at a preview URL. Next up, you will promote it to a stable production URL that you can share with the world.

Deploy to Production

In the previous step, you deployed a preview and confirmed your site works on the internet. Previews are great for testing, but they generate a unique URL that changes with every deployment.

Production deployments in Vercel get a stable, permanent URL. This is the link you send to friends, put on your resume, or share on social media.

In this step, get ready to:

Deploy your site to a stable production URL.
Verify the production site loads correctly in your browser.
Create a new preview deployment to see how Vercel keeps changes separate from production.

Run your first production deployment

Deploy your site to production by running this command in your terminal:

vercel --prod

The CLI uploads your files and prints a production URL when it finishes.

What's the difference between preview and production?

Running vercel creates a preview deployment with a unique URL that changes every time. Running vercel --prod creates a production deployment assigned to your project's stable URL (like my-website.vercel.app).

Preview URLs are for testing. The production URL is what you share with the world.

Seeing a permission or authentication error?

Make sure you're still logged in by running vercel whoami. If it shows an error, run vercel login again to re-authenticate.

Also confirm your terminal is still inside the my-website folder. The CLI needs to find the linked project.

help me troubleshoot my Vercel production deployment

Verify your production URL

The production URL is the one you can share with anyone. Time to confirm it works.

Copy the production URL that the CLI printed after the deployment finished.
Open a new browser tab and paste the URL into the address bar.
Confirm that your landing page loads with the heading, bio, and links section all visible.

What should I see?

Your landing page should look identical to what you saw in the preview deployment. The heading, about section, links, and footer should all appear styled correctly. The URL in your browser bar should end with .vercel.app.

Compare preview and production deployments

A real developer workflow means testing changes before they go live. You can deploy as many previews as you want without touching your production site.

Switch back to VS Code and open index.html.
Find this line inside the <section class="hero"> section:

<h1>Hi, I'm Alex</h1>

Change the text inside the <h1> tag to something different. For example, change it to Hello, I'm Alex or add your own name.
Save index.html.

Deploy a new preview (not production) by running this command:

vercel

Copy the new preview URL that the CLI prints.
Open the preview URL in a new browser tab. You should see your updated heading.
Open your production URL in another tab. You should see the original heading, unchanged.

Why are they different?

Vercel keeps every deployment isolated. Your production URL only updates when you explicitly run vercel --prod. This means you can test as many changes as you want via preview without risking your live site.

This preview-then-promote workflow is how professional teams ship changes safely.

Both URLs showing the same content?

Make sure you saved index.html before running vercel. The CLI deploys whatever is on disk at the moment you run it.

Double check you ran vercel (preview) for the second deployment, not vercel --prod (production). Preview and production are separate commands.

help me figure out why my preview and production look the same

You now have a live production site and a repeatable workflow for testing changes safely. Next up, the Secret Mission takes this further by connecting GitHub for automatic deployments on every push.

Secret mission

Auto-Deploy from GitHub

Right now, every change requires you to manually run a CLI command. What if your site updated itself every time you pushed code? Connect your project to GitHub so Vercel automatically deploys on every push.

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-website project folder on your Desktop.
Vercel project and deployments (preview and production URLs).
GitHub repository connected to Vercel for auto-deploy.
Vercel CLI installed globally via npm.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep your site live.

Your production URL stays live and accessible at no cost on the Hobby plan.
Auto-deploy from GitHub remains active. Any push to main triggers a new production deployment.
The Vercel CLI stays installed on your machine and is useful for future projects.
Node.js stays installed on your machine and is useful for any JavaScript or web development work.

Pause - I'll come back to this later

Shut down running processes to free up resources, but keep your files and accounts intact for when you return.

Your Vercel deployments stay live at no cost. There is nothing to pause on the Vercel side since the Hobby plan is free.
Close VS Code and any open terminal sessions to free up memory on your machine.
Your local files, GitHub repository, and Vercel project remain untouched until you are ready to return.

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 the Vercel project using the CLI by running this command:
This removes all deployments, domains, and settings associated with the project.

vercel project rm my-website

Delete the GitHub repository:

Open your repository on GitHub.
Click Settings in the top navigation bar.
Scroll down to the Danger Zone section.
Click Delete this repository.
Follow the confirmation prompts by typing your repository name, then click Delete this repository to confirm.

Delete the local project folder. On macOS or Linux, run:

rm -rf ~/Desktop/my-website

On Windows, run:

Remove-Item -Recurse -Force ~\Desktop\my-website

Uninstall the Vercel CLI by running:

npm uninstall -g vercel

Nice Work!

Your website is live on the internet. You took a project from local files to a production deployment on Vercel's global CDN, with a shareable URL anyone can visit.

You've learned how to:

Built a styled personal landing page with HTML and CSS.
Deployed a preview deployment to verify changes before going live.
Promoted to a production deployment with a stable, shareable URL using vercel --prod.
Connected a GitHub repository for automatic deployments on every push.

Ready to quiz yourself?