Deploy Your First Web App with Vercel

Build a personal landing page with Vite and deploy it live using Vercel.

Introduction

30 Second Summary

You've built something on your computer and it works. But nobody else can see it. Getting your code from "works on my machine" to "live on the internet" is the gap every developer needs to cross.

In this project, you will build a personal landing page and deploy it live to the internet using Vercel, a modern hosting platform. You'll learn the real workflow professional developers use: code locally, preview changes, then push to production.

What You'll Build

A personal landing page built with Vite (a modern build tool) and deployed to Vercel's global network with a public URL anyone can visit.

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

  • A Vite project with a customized personal landing page built with HTML, CSS, and JavaScript.
  • A live Vercel deployment accessible at a public URL like your-project.vercel.app.
  • An automatic deployment pipeline where pushing code to GitHub triggers a fresh deploy to your live site.
  • Secret Mission: Add a dark mode toggle to your landing page that remembers the user's preference.

Are there any prerequisites?

This project assumes you have Node.js, VS Code, and a GitHub account ready to go. You'll create a free Vercel account as part of Step 1.

Set Up Your Tools

Before you can deploy a landing page to the internet, you need a few tools in place. Vercel is the platform that will host your site and make it accessible to anyone with a browser.

To control Vercel from your terminal, you'll use its command-line tool (the Vercel CLI). You'll also need Git installed so you can track code changes and connect to GitHub later.

In this step, get ready to:
  • Create a Vercel account linked to your GitHub.
  • Install and authenticate the Vercel CLI.
  • Verify Git is installed on your machine.
Create a Vercel account

Vercel needs to know who you are before it can host your site. Creating an account through GitHub is the fastest path because it connects your code hosting and your deployment platform in one step.

  • Open your browser and go to vercel.com/signup.
  • Click Continue with GitHub.
  • Authorize Vercel to access your GitHub account when prompted.

After authorizing, you'll land on the Vercel dashboard. You now have the free Hobby plan.

What is the Vercel Hobby plan?

The Hobby plan is Vercel's free tier for personal, non-commercial projects. It includes 100 GB of bandwidth and up to 100 deployments per day.

This is more than enough for a personal landing page. You won't be charged anything for this project.

Install the Vercel CLI

The Vercel CLI lets you deploy your site straight from the terminal without touching the Vercel dashboard. You'll install it globally so it's available from any folder on your machine.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type VS Code and press Enter to open it.
  • Open the integrated terminal by clicking Terminal in the top menu bar, then New Terminal.
  • Install the Vercel CLI globally by running this command:
npm i -g vercel
  • Verify the installation by running:
vercel --version

You should see a version number printed in your terminal.

Seeing a permission error or command not found?

On macOS or Linux, a permission error (EACCES) means npm can't write to the global directory. Try running the install command with sudo in front, or use npx vercel instead of vercel for all Vercel commands throughout this project.

If you see "command not found" after installing, the global npm bin directory is not in your PATH. Using npx vercel is the quickest workaround.

help me fix my Vercel CLI installation

Now you need to connect the CLI to your Vercel account.

  • Log in to Vercel from the CLI by running:
vercel login

What happens when you run this?

The CLI will open your browser automatically and ask you to confirm the login. Approve the request in your browser, then check your terminal for a success confirmation.

Once you see the success message in your terminal, the CLI is authenticated and ready to deploy.

Browser opened but login seems stuck?

Close the browser tab and try again. If it still hangs, make sure you are approving the login request in the browser window that opened.

help me troubleshoot vercel login

Verify Git is installed

Git is the version control tool you'll use to track your code and push it to GitHub. Let's confirm it's available on your machine.

  • Check your Git installation by running:
git --version

✔️ I see a version number

Git is installed and ready. You're all set for the next step.

ⓧ Command not found

Git is not installed yet. Follow these steps to install it:

  • Go to git-scm.com and click Download.
  • Run the installer and accept all default settings.
  • Close and reopen your VS Code terminal after installation completes.
  • Run git --version again to confirm it now shows a version number.

Still seeing command not found after installing?

On Windows, make sure you selected the option to add Git to your PATH during installation. You may need to fully restart VS Code (not just the terminal) for PATH changes to take effect.

help me get Git working in my terminal

Your tools are ready. Next up, you'll use them to scaffold a brand new project with Vite and start building your landing page.

Scaffold Your Vite Project

Your tools are installed and authenticated. Now it's time to create the actual project you'll deploy to the internet.

Vite is a modern build tool that gives you a lightning-fast dev server and optimized production builds. In this step, you'll use Vite to scaffold a project and see it running locally on your machine.

In this step, get ready to:
  • Scaffold a new Vite project using the vanilla template.
  • Install dependencies and run the dev server.
  • Explore the project files Vite creates for you.
Create your Vite project
  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your Vite project by running this command:
npm create vite@latest my-landing-page -- --template vanilla

What does this command do?

  • npm create vite@latest downloads and runs the latest version of the Vite project scaffolding tool.
  • my-landing-page is the name of the project folder it creates.
  • -- --template vanilla tells Vite to use plain HTML, CSS, and JavaScript (no framework like React or Vue).

Seeing a confirmation prompt?

If this is your first time running this command, npm will ask to install the create-vite package. Press Enter to continue.

  • Move into your new project folder and install its dependencies by running these commands:
cd my-landing-page
npm install

Why run npm install separately?

The scaffold command creates the project files but does not download the packages your project depends on. npm install reads package.json and downloads everything into a node_modules folder.

  • Confirm the project files exist by running:
ls
  • You should see index.html, package.json, node_modules, and a src folder in the output.

Seeing an error during npm install?

  • Make sure you ran cd my-landing-page first. Running npm install outside the project folder will fail because there is no package.json file.
  • Check your Node.js version by running node --version. Vite requires Node.js version 20.19+ or 22.12+.

Why is npm install failing in my Vite project?

Explore the scaffold and run the dev server

Vite just created a full project structure for you. Before making changes, take a moment to see what's inside and verify it works.

  • Open the project in VS Code by running:
code .

A new VS Code window opens with your project folder loaded in the Explorer sidebar.

What files did Vite create?

Look at the Explorer sidebar on the left. You'll see these key files:

  • index.html is your app's entry point. It contains a <div id="app"> where content is injected.
  • src/main.js is the main JavaScript file that populates the page.
  • src/counter.js is a demo component showing a click counter.
  • src/style.css contains all the default styling.

You'll replace all of this with your own landing page content in the next step.

  • Start the dev server by running this command in the VS Code terminal:
npm run dev

What does the dev server do?

The dev server compiles your project and serves it locally. Any time you save a file, it instantly refreshes the browser. This is called hot module replacement.

  • Open your browser and go to http://localhost:5173.
  • You should see the default Vite starter page with a counter button and the Vite and JavaScript logos.

Don't see the page?

  • Check the terminal output for the URL. It should say something like Local: http://localhost:5173/. Copy and paste that exact URL.
  • Make sure npm run dev is still running. If you see the terminal prompt again, the server stopped.
  • If port 5173 is already in use, Vite will pick a different port. Check the terminal output for the actual URL.

Why can't I see the Vite dev server page in my browser?

Stop the dev server
  • Switch back to your VS Code terminal.
  • Press Ctrl+C (macOS and Windows) to stop the dev server.

You need to stop the server before running other commands in the same terminal. You'll start it again later after customizing your page.

Your project is scaffolded and running locally. Next up, you'll replace the default content with your own personal landing page.

Customize Your Landing Page

Your Vite project is scaffolded and ready to go. Right now it displays the default Vite demo page, which is not exactly a personal website.

In this step, you will replace the scaffold code with your own landing page content. You will write the HTML structure, add custom CSS styling, and create a simple fade-in animation using JavaScript.

In this step, get ready to:
  • Build your personal landing page HTML structure.
  • Style the page with a clean, centered layout and custom typography.
  • Add a greeting animation that fades in your name on page load.
Build your landing page structure

The scaffold's index.html currently has an empty <div id="app"> that gets populated by JavaScript. You will replace this with a proper HTML structure containing your name, bio, and links.

  • In VS Code, open index.html from the Explorer sidebar.
  • Select all the existing content and replace it with this code:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Page title shown in the browser tab -->
    <title>Your Name - Developer</title>
  </head>
  <body>
    <div id="app">
      <!-- Header with your name and tagline -->
      <header>
        <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
        <p class="tagline">Aspiring web developer learning to build cool things.</p>
      </header>
      <!-- Main content sections -->
      <main>
        <section class="about">
          <h2>About Me</h2>
          <p>I'm learning web development and this is my first site deployed to the internet! I built it with Vite and deployed it with Vercel.</p>
        </section>
        <section class="links">
          <h2>Find Me Online</h2>
          <ul>
            <li><a href="https://github.com/your-username" target="_blank">GitHub</a></li>
          </ul>
        </section>
      </main>
      <!-- Footer credit -->
      <footer>
        <p>Built with Vite. Deployed with Vercel.</p>
      </footer>
    </div>
    <!-- Vite loads your JavaScript module -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

What does this code do?

  • The <div id="app"> wrapper holds all your page content. Your JavaScript will target this element.
  • The <span class="highlight"> around your name lets you color it differently with CSS.
  • The <script type="module" src="/src/main.js"> tag loads your JavaScript. Vite uses this to bundle your code during builds.
  • Save index.html.
  • You won't see a change in the browser yet because the dev server is stopped. The next chunks add styling and animation before we start it.

Make it yours

Replace "Your Name" with your actual name and update the GitHub link to point to your real profile. This is your personal landing page.

Style your landing page

Your HTML structure exists, but without CSS it will look like plain unstyled text. You will replace the default Vite styles with a clean, centered layout.

  • Open src/style.css in the Explorer sidebar.
  • Select all the existing content and replace it with this code:
/* Base font, color, and background settings */
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #213547;
  background-color: #ffffff;
}

/* Reset default spacing on all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Center the page content vertically and horizontally */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Constrain content width and center text */
#app {
  max-width: 600px;
  padding: 2rem;
  text-align: center;
}

header {
  margin-bottom: 2rem;
}

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

/* Accent color for your name */
.highlight {
  color: #646cff;
}

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

section {
  margin-bottom: 2rem;
}

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

/* Remove bullet points from link list */
ul {
  list-style: none;
}

li {
  margin-bottom: 0.5rem;
}

/* Style links with accent color */
a {
  color: #646cff;
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

footer {
  margin-top: 2rem;
  color: #999;
  font-size: 0.875rem;
}

What does this code do?

  • The :root selector sets global font and color defaults for the entire page.
  • The * selector resets browser default margins and padding so your layout is consistent.
  • Flexbox on body centers the #app container both vertically and horizontally on the screen.
  • The .highlight class gives your name a purple-blue accent color (#646cff).
  • Save src/style.css.
  • You won't see a change yet. The next substep updates the JavaScript and starts the dev server so you can preview everything together.
Add a greeting animation

The last piece is src/main.js. The scaffold version imports a counter component you do not need. You will replace it with code that imports your stylesheet and fades in the page heading.

  • Open src/main.js in the Explorer sidebar.
  • Select all the existing content and replace it with this code:
// Import the stylesheet so Vite bundles it with the page
import './style.css'

// Select the app container and the h1 inside it
const app = document.querySelector('#app')

const header = app.querySelector('h1')
// Start the heading invisible
header.style.opacity = '0'
header.style.transition = 'opacity 1s ease-in'

// Fade the heading in once the page fully loads
window.addEventListener('load', () => {
  header.style.opacity = '1'
})

What does this code do?

  • import './style.css' tells Vite to include your stylesheet in the final build. Without this, your CSS would not load.
  • document.querySelector('#app') grabs the main container element from your HTML.
  • Setting opacity to '0' hides the heading initially. The load event listener then fades it in over one second.
  • Save src/main.js.
  • Start the dev server to preview your changes by running this command in the VS Code terminal:
npm run dev
  • Open the URL shown in the terminal (http://localhost:5173) in your browser.
  • You should see your landing page with a centered layout, your name in purple-blue, and the heading fading in smoothly over one second.

Page looks unstyled or blank?

  • Make sure you saved all three files (index.html, src/style.css, src/main.js). Unsaved changes will not appear.
  • Check that src/main.js includes import './style.css' at the top. Without this import, Vite will not load your styles.
  • If you see an error in the terminal mentioning counter.js, make sure you replaced the entire contents of src/main.js with the code above.

Still stuck? Help me debug why my Vite landing page is not displaying styles or content correctly.

  • Once you have confirmed the page looks correct, stop the dev server by pressing Ctrl+C in the terminal.

✔️ Awesome, I've got everything!

Great. Double check you have saved all three files before moving on.

ⓧ I'd like to double check the full code

Here is the complete code for each file at this point:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Name - Developer</title>
  </head>
  <body>
    <div id="app">
      <header>
        <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
        <p class="tagline">Aspiring web developer learning to build cool things.</p>
      </header>
      <main>
        <section class="about">
          <h2>About Me</h2>
          <p>I'm learning web development and this is my first site deployed to the internet! I built it with Vite and deployed it with Vercel.</p>
        </section>
        <section class="links">
          <h2>Find Me Online</h2>
          <ul>
            <li><a href="https://github.com/your-username" target="_blank">GitHub</a></li>
          </ul>
        </section>
      </main>
      <footer>
        <p>Built with Vite. Deployed with Vercel.</p>
      </footer>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
import './style.css'

const app = document.querySelector('#app')

const header = app.querySelector('h1')
header.style.opacity = '0'
header.style.transition = 'opacity 1s ease-in'

window.addEventListener('load', () => {
  header.style.opacity = '1'
})
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #213547;
  background-color: #ffffff;
}

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

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#app {
  max-width: 600px;
  padding: 2rem;
  text-align: center;
}

header {
  margin-bottom: 2rem;
}

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

.highlight {
  color: #646cff;
}

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

section {
  margin-bottom: 2rem;
}

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

ul {
  list-style: none;
}

li {
  margin-bottom: 0.5rem;
}

a {
  color: #646cff;
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

footer {
  margin-top: 2rem;
  color: #999;
  font-size: 0.875rem;
}

Your personal landing page is styled and running locally. Next up, you will deploy it to the internet so anyone can visit it.

Deploy to Vercel

Your landing page looks great locally. Now it is time to put it on the internet where anyone can visit it.

In this step, you will use the Vercel CLI to deploy your site. You will first create a preview deployment (a temporary URL for testing), then promote it to a production deployment with a permanent URL.

In this step, get ready to:
  • Deploy a preview version of your site from the terminal.
  • Deploy to production and get your permanent live URL.
Deploy a preview from the CLI

Vercel uses two types of deployments. A preview deployment gives you a temporary URL to check that everything works before going live. A production deployment gives you a permanent URL that anyone on the internet can visit.

  • Make sure the dev server is not running. If it is, press Ctrl+C in your terminal to stop it.
  • Deploy your site to a preview URL by running this command:
vercel

What happens when you run this command?

Since this is your first time deploying from this folder, the CLI will ask you a few setup questions. It will open your browser briefly to confirm your identity, then ask which team to deploy under and whether to link to an existing project or create a new one.

For a Hobby plan account, you only have one team (your personal account), so the CLI selects it automatically. When asked to link to an existing project, enter N to create a new one. Accept the default project name (my-landing-page). The CLI detects Vite automatically and suggests the correct build settings.

When asked to customize settings, enter N to keep the defaults. The CLI then builds your project and outputs a preview URL.

  • Copy the preview URL from the terminal output and open it in your browser.
  • You should see your personal landing page live on the internet. Your name should fade in just like it did locally.

Don't see your site at the preview URL?

  • Make sure you ran the command from inside the my-landing-page folder (not a parent folder). Run pwd to check.
  • If the CLI could not detect your framework, double-check that package.json exists in the folder. It should have been created by npm create vite@latest in an earlier step.
  • If you see a login error, run vercel login again and retry.

Still stuck? Help me troubleshoot my Vercel preview deployment.

What is a preview deployment?

Preview deployments are how professional teams test changes before going live. Each preview gets a unique URL that only people with the link can find. This lets you verify everything works without affecting your real site.

Deploy to production

Your preview deployment confirms the site works. Now you will promote it to production so it gets a clean, permanent URL.

  • Deploy your site to production by running this command:
vercel --prod
  • Copy the production URL from the terminal output and open it in your browser.
  • You should see your landing page at a permanent URL like my-landing-page.vercel.app. This URL is live for anyone on the internet to visit.

What is the difference between preview and production?

The preview URL includes a random hash and is meant for testing. The production URL is your permanent address. In a real team workflow, you deploy to preview first, verify nothing is broken, then promote to production.

Production URL not working?

  • Make sure you included the --prod flag. Without it, vercel creates another preview deployment instead.
  • Give it 30 seconds. Production deployments propagate across Vercel's global network and may take a moment to go live.

Still stuck? Help me troubleshoot my Vercel production deployment.

Your site is now live on the internet. Anyone with the URL can see your landing page served from Vercel's global CDN.

Your site is deployed and publicly accessible. Next up, you will connect GitHub so that every code change you push deploys automatically.

Connect GitHub for Automatic Deployments

Your site is live on the internet. Right now, every time you update your code, you would need to manually run vercel --prod to push your changes.

In this step, you'll connect your project to GitHub so that every push automatically triggers a new deployment. This is the same workflow professional development teams use every day.

In this step, get ready to:
  • Initialize a Git repository and push your code to GitHub.
  • Connect your GitHub repo to Vercel for automatic deployments.
  • Test the pipeline by making a change and watching it deploy automatically.
Initialize a Git repository and push to GitHub

Version control tracks every change you make to your code. By putting your project under Git and pushing it to GitHub, you create a backup and a collaboration-ready home for your code.

  • Initialize a Git repository in your project by running this command:
git init
  • Stage all your project files by running:
git add .
  • Commit your files with a descriptive message by running:
git commit -m "Initial commit: personal landing page"

What do these commands do?

  • git init creates a new Git repository in your current folder.
  • git add . stages every file in your project, preparing them to be saved.
  • git commit -m "..." saves a snapshot of your staged files with a message describing what changed.

Now you need a place to store this code online. You'll create a new repository on GitHub.

  • Open your browser and go to github.com/new.
  • Enter my-landing-page as the repository name.
  • Leave the repository set to **Public**.
  • Do NOT check any of the initialization options (no README, no .gitignore, no license).
  • Click Create repository.

Why skip the README and .gitignore?

Adding those files on GitHub would create a conflict with the code you already have locally. You want an empty repository so you can push your existing project into it cleanly.

After creating the repository, GitHub shows a Quick Setup page with commands to push an existing repository. You'll use those now.

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

What do these commands do?

  • git remote add origin tells Git where your online repository lives.
  • git branch -M main renames your current branch to main (the standard production branch name).
  • git push -u origin main uploads your code to GitHub and sets main as the default branch to push to.
  • Refresh your GitHub repository page in the browser.

You should see all your project files listed on the repository page, including index.html, the src/ folder, and package.json.

Push failed or asked for a password?

  • If Git asks for a username and password, GitHub no longer accepts passwords. You need a Personal Access Token or to authenticate via the browser prompt that appears.
  • If you see a "remote origin already exists" error, the Vercel CLI may have set one earlier. Run git remote remove origin first, then re-run the three commands above.
  • Why is my git push failing?
Connect your GitHub repo to Vercel

Your code is on GitHub. Now you'll tell Vercel to watch that repository so it deploys automatically whenever you push new code.

  • Open vercel.com/new in your browser.
  • Under Import Git Repository, find your my-landing-page repository in the list.
  • Click Import next to it.
  • On the configuration page, leave all settings at their defaults. Vercel auto-detects Vite as your framework.
  • Click Deploy.

Vercel builds your project from the GitHub repository and deploys it. You should see a congratulations screen once the deployment finishes.

What just happened?

Vercel created a new project linked to your GitHub repository. From now on, every time you push code to the main branch, Vercel automatically builds and deploys your site. This is called a deployment pipeline.

Don't see your repository in the list?

  • Make sure you signed up for Vercel with the same GitHub account that owns the repository.
  • If the repo still doesn't appear, click Adjust GitHub App Permissions at the bottom of the repository list and grant Vercel access to the my-landing-page repository.
  • Help me connect my GitHub repo to Vercel
Test automatic deployments

The real power of this setup is that you never need to run a deploy command again. Let's prove it works by making a change, pushing it, and watching Vercel deploy automatically.

  • In VS Code, open index.html.
  • Find the tagline paragraph:
<p class="tagline">Aspiring web developer learning to build cool things.</p>
  • Change the text to something new. For example:
<p class="tagline">Web developer who just deployed a site to the internet.</p>
  • Save index.html.
  • Commit and push your change by running these commands:
git add .
git commit -m "Update bio"
git push

You should see a new deployment building or already completed. Vercel detected your push to GitHub and started a fresh deployment automatically.

  • Once the deployment shows Ready, open your production URL.

Your updated tagline is now live on the internet. You did not run any deploy command.

Preview vs production deployments

When you push to the main branch, Vercel creates a production deployment. If you push to any other branch, Vercel creates a preview deployment with a unique URL for testing. This lets teams review changes before they go live.

Site didn't update?

  • Check your Vercel dashboard for a deployment error. If the build failed, click on the deployment to see the error logs.
  • Make sure you ran git push successfully. If Git says "Everything up-to-date", your commit may not have been created. Run git status to check.
  • Why isn't my Vercel deployment updating?

Secret mission

Add Dark Mode Toggle

Your landing page looks great, but what about users who prefer darker interfaces? In this secret mission, you'll add a dark mode toggle that remembers each visitor's preference across page reloads using localStorage.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely on Vercel's free Hobby plan, so there are no ongoing costs. Your site stays live at no charge unless you exceed the plan's generous limits.

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • Local my-landing-page project folder on your Desktop.
  • GitHub repository (my-landing-page).
  • Vercel project and production deployment.
  • Vercel CLI (installed globally via npm).

Keep everything running

No action needed. Choose this if you're still actively building or want your site to stay live.

  • Your site remains live at its .vercel.app URL for free on the Hobby plan.
  • Your GitHub repo stays connected for automatic deployments.
  • Your local project files remain on your Desktop.
  • The Vercel CLI stays installed on your machine. You can use it for future projects.

Pause - I'll come back to this later

Disable automatic deployments to stop changes from going live. Your code and site remain intact.

  • Go to your Vercel dashboard and select the my-landing-page project.
  • Open Settings in the sidebar, then select Git.
  • Under the Connected Git Repository section, click Disconnect to stop automatic deploys from GitHub.
  • Your existing production deployment stays live. You can reconnect the repo later to resume automatic deployments.

Delete - I don't want to use this again

Remove all project resources and start fresh. This permanently deletes your site, code, and local files.

Delete your Vercel project:

  • Go to your Vercel dashboard and select the my-landing-page project.
  • Open Settings in the sidebar.
  • Scroll to the bottom of the General page and click Delete in the Delete Project section.
  • Confirm by entering the project name and prompt, then click Continue.

Delete your GitHub repository:

  • Go to your my-landing-page repository on GitHub.
  • Click Settings under the repository name.
  • Scroll down to the Danger Zone section and click Delete this repository.
  • Read the warnings, then type the repository name to confirm.
  • Click Delete this repository.

Delete your local project files:

  • Remove the project folder by running this command in your terminal:
rm -rf ~/Desktop/my-landing-page

On Windows, run this instead:

Remove-Item -Recurse -Force ~\Desktop\my-landing-page

Uninstall the Vercel CLI:

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

That's a Wrap!

That's a Wrap!

Nice work! You just took a project from an empty folder on your Desktop all the way to a live URL on the internet.

You've learned how to:

  • Built a personal landing page from scratch using Vite as a professional build tool, complete with a dev server and production builds.
  • Deployed your site live to the internet using the Vercel CLI, learning the difference between preview and production deployments.
  • Connected GitHub to Vercel so every push automatically builds and deploys your updates.
  • Secret Mission: Added a dark mode toggle with persistent user preferences stored in localStorage.

Ready to quiz yourself?