Deploy a Portfolio Site to Vercel

Deploy a personal portfolio site to Vercel with automated Git deployments.

Introduction

30 Second Summary

Every developer needs a home on the internet. A personal portfolio site shows the world what you can build and gives you a professional presence online.

In this project, you will build a personal portfolio website and deploy it to Vercel, a modern hosting platform. You'll connect your code to GitHub so that every time you push changes, your live site updates automatically.

What You'll Build

A responsive single-page portfolio website deployed to Vercel's global CDN, connected to GitHub for automatic deployments on every push.

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

  • A live portfolio website accessible at a public .vercel.app URL.
  • An automated deployment pipeline where every Git push updates your live site instantly.
  • Experience with preview deployments that create unique URLs for every branch so you can review changes before they go live.
  • Secret Mission: Add a dark mode toggle to your portfolio that persists the user's preference using localStorage.

Are there any prerequisites?

None. This project includes full setup instructions for every tool you need, including Git, VS Code, GitHub, and Vercel. No prior experience with any of these is required.

Before We Start

Before We Start...

Set Up Your Tools

Before you can build and deploy your portfolio, you need a few tools installed on your computer.

In this step, you'll install Git (the version control tool that tracks your code changes), VS Code (your code editor), and create accounts on GitHub and Vercel.

In this step, get ready to:
  • Install and configure Git.
  • Install VS Code with the Live Server extension.
  • Create your GitHub and Vercel accounts.
Install and configure Git

Git is the tool that tracks every change you make to your code. It's also how Vercel knows when to redeploy your site.

First, let's check if Git is already installed on your machine.

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

✔️ I see a version number

Git is already installed. You're ready to configure it.

ⓧ Command not found

Git isn't installed yet. Let's fix that.

  • Go to git-scm.com in your browser.
  • Click Download for Windows or Download for Mac (the site auto-detects your OS).
  • Run the installer and accept all the default settings.
  • Close and reopen your terminal, then run git --version again to confirm it works.

macOS may prompt you to install Xcode Command Line Tools

On macOS, running git for the first time may trigger a popup asking you to install Xcode Command Line Tools. Click Install and wait for it to finish. This installs Git for you.

Now let's tell Git who you are. Every commit you make includes your name and email so collaborators know who made the change.

  • Configure your Git identity by running these two commands:
git config --global user.name "[[YOURNAME="Your Name"]]"
git config --global user.email "[[YOUREMAIL="your@email.com"]]"

What do these commands do?

These commands save your name and email in Git's global configuration. Every commit you make from now on will include this identity.

You won't see any output after running them. That's normal.

Seeing 'git' is not recognized?

If you just installed Git but the terminal still doesn't recognize it, close your terminal completely and reopen it. New installations require a fresh terminal session to pick up the updated PATH.

Help me troubleshoot my Git installation.

Install VS Code

VS Code is the code editor you'll use to write your portfolio's HTML and CSS. It also has a built-in terminal that makes running Git commands easy.

  • Go to code.visualstudio.com in your browser.
  • Click the download button (the site detects your operating system automatically).
  • Run the installer and accept the default settings.

Once installed, open VS Code.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Visual Studio Code and press Enter to open it.

Now install the Live Server extension. This lets you preview your portfolio site in the browser and see changes instantly as you edit.

  • Click the Extensions icon in the left sidebar (it looks like four squares).
  • Type Live Server in the search box at the top of the panel.
  • Find the one by Ritwick Dey (it has millions of installs).
  • Click Install.

You should see Live Server appear in your list of installed extensions with a gear icon next to it.

Don't see the Extensions panel?

You can also open Extensions with the keyboard shortcut Cmd+Shift+X (macOS) or Ctrl+Shift+X (Windows).

Help me find the Extensions panel in VS Code.

Create your GitHub and Vercel accounts

GitHub stores your code online. Vercel reads from GitHub and automatically deploys your site every time you push a change.

Linking the two accounts together is what makes the automatic deployment pipeline work.

  • Go to github.com in your browser.
  • Click Sign Up and create a free account (or sign in if you already have one).

Now create your Vercel account and link it to GitHub.

  • Go to vercel.com in your browser.
  • Click Sign Up.
  • Choose Continue with GitHub to link the two accounts together.
  • Authorize the connection when GitHub asks for permission.

Why link GitHub and Vercel?

When you link these accounts, Vercel can watch your GitHub repositories for changes. Every time you push code to GitHub, Vercel automatically builds and deploys a fresh version of your site.

This is the foundation of the automated deployment pipeline you'll set up in this project.

After signing up, you should land on the Vercel dashboard. It will be empty for now.

Your tools are ready to go. Next up, you'll build the actual portfolio site using HTML and CSS.

Build Your Portfolio Site

Your tools are installed and your accounts are linked. Now it's time to build the actual website you'll deploy.

In this step, you'll create a single-page portfolio site with HTML and CSS. The site will have a header with navigation, an About Me section, a projects showcase, and a contact section.

In this step, get ready to:
  • Create the project folder and HTML file.
  • Add responsive CSS styling.
  • Preview the site locally with Live Server.
Create the project folder and HTML file

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

  • In VS Code, click Terminal in the top menu bar.
  • Click New Terminal.
  • 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 you're in the new folder by running:
pwd
  • You should see a path ending in my-portfolio.

Now open this folder in VS Code so the Explorer sidebar shows your project.

  • In VS Code, click File in the top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop, select the my-portfolio folder, then click Open.

What if VS Code asks me to trust the folder?

VS Code may show a dialog asking if you trust the authors of the files in this folder. Click Yes, I trust the authors to continue.

The Explorer sidebar on the left should now show the empty my-portfolio folder name at the top.

  • In the Explorer sidebar, hover over the MY-PORTFOLIO heading and click the New File icon (a page with a + sign).
  • Type index.html and press Enter.
  • Copy the following HTML code into your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <!-- Link to our external stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Site header with navigation -->
    <header>
        <nav>
            <div class="logo">My Portfolio</div>
            <ul class="nav-links">
                <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>
        <!-- Hero section with your introduction -->
        <section id="hero">
            <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
            <p>A developer learning to build and deploy modern websites.</p>
        </section>

        <!-- About section -->
        <section id="about">
            <h2>About Me</h2>
            <p>I'm a developer passionate about building things for the web. I'm currently learning about modern deployment workflows and hosting with Vercel.</p>
        </section>

        <!-- Projects section with card grid -->
        <section id="projects">
            <h2>My Projects</h2>
            <div class="project-grid">
                <div class="project-card">
                    <h3>Project One</h3>
                    <p>A description of your first project. Replace this with something you've built or are working on.</p>
                </div>
                <div class="project-card">
                    <h3>Project Two</h3>
                    <p>A description of your second project. This could be a coding challenge, a tutorial project, or something creative.</p>
                </div>
                <div class="project-card">
                    <h3>Project Three</h3>
                    <p>A description of your third project. Keep adding cards as you build more things!</p>
                </div>
            </div>
        </section>

        <!-- Contact section -->
        <section id="contact">
            <h2>Get In Touch</h2>
            <p>Want to connect? Reach out to me at <a href="mailto:your@email.com">your@email.com</a></p>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <p>Built and deployed with Vercel. &copy; 2026</p>
    </footer>
</body>
</html>

What does this HTML do?

  • The <header> contains a navigation bar with links that scroll to each section of the page.
  • The #hero section is your introduction area with a headline and subtitle.
  • The #projects section uses a grid of .project-card elements as placeholders for your work.
  • The <link rel="stylesheet" href="style.css"> tag connects this HTML to the CSS file you'll create next.
  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).

Don't see the file in the Explorer?

  • Make sure you opened the my-portfolio folder itself (not a parent folder) via File > Open Folder.
  • If you accidentally created the file outside the folder, delete it and try the New File icon again inside the Explorer sidebar.

Need more help? Why isn't my index.html showing in the VS Code Explorer?

Add styling

Your HTML file defines the content structure. Now you'll add a CSS stylesheet to control how everything looks.

  • In the Explorer sidebar, hover over MY-PORTFOLIO again and click the New File icon.
  • Type style.css and press Enter.
  • Copy the following CSS code into your style.css file:
/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Enable smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

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

/* Sticky header that stays at the top */
header {
    background-color: #1a1a2e;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.logo {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Horizontal link list */
.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #4fc3f7;
}

/* Centered main content area */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

section {
    padding: 4rem 0;
}

/* Hero section styling */
#hero {
    text-align: center;
    padding: 6rem 0;
}

#hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.highlight {
    color: #4fc3f7;
}

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

h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #1a1a2e;
}

/* Responsive grid for project cards */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Individual project cards with hover effect */
.project-card {
    background-color: #f5f5f5;
    padding: 2rem;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-card h3 {
    margin-bottom: 0.75rem;
    color: #1a1a2e;
}

/* Contact link styling */
#contact a {
    color: #4fc3f7;
    text-decoration: none;
}

#contact a:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    background-color: #1a1a2e;
    color: #e0e0e0;
    margin-top: 4rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    #hero h1 {
        font-size: 1.8rem;
    }

    .nav-links {
        gap: 1rem;
    }

    section {
        padding: 2rem 0;
    }
}

What does this CSS do?

  • The * reset removes default browser spacing so your layout is consistent across browsers.
  • The scroll-behavior: smooth property makes clicking navigation links glide to each section instead of jumping.
  • The .project-grid uses CSS Grid with auto-fit to automatically wrap cards into rows based on screen width.
  • The @media block at the bottom adjusts font sizes and spacing for screens narrower than 768px.
  • Save style.css by pressing Cmd+S (macOS) or Ctrl+S (Windows).

Seeing a typo warning or red underline?

  • Make sure the file is named exactly style.css (not styles.css or style.CSS). The filename must match the href in your HTML.
  • Check that all curly braces {} are properly opened and closed.

Need more help? Why isn't my CSS applying to my HTML file?

✔️ 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 full index.html file:

<!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>
            <div class="logo">My Portfolio</div>
            <ul class="nav-links">
                <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">
            <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
            <p>A developer learning to build and deploy modern websites.</p>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>I'm a developer passionate about building things for the web. I'm currently learning about modern deployment workflows and hosting with Vercel.</p>
        </section>

        <section id="projects">
            <h2>My Projects</h2>
            <div class="project-grid">
                <div class="project-card">
                    <h3>Project One</h3>
                    <p>A description of your first project. Replace this with something you've built or are working on.</p>
                </div>
                <div class="project-card">
                    <h3>Project Two</h3>
                    <p>A description of your second project. This could be a coding challenge, a tutorial project, or something creative.</p>
                </div>
                <div class="project-card">
                    <h3>Project Three</h3>
                    <p>A description of your third project. Keep adding cards as you build more things!</p>
                </div>
            </div>
        </section>

        <section id="contact">
            <h2>Get In Touch</h2>
            <p>Want to connect? Reach out to me at <a href="mailto:your@email.com">your@email.com</a></p>
        </section>
    </main>

    <footer>
        <p>Built and deployed with Vercel. &copy; 2026</p>
    </footer>
</body>
</html>

Here is the full style.css file:

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

header {
    background-color: #1a1a2e;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.logo {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
}

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

.nav-links a {
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #4fc3f7;
}

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

section {
    padding: 4rem 0;
}

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

#hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.highlight {
    color: #4fc3f7;
}

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

h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #1a1a2e;
}

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

.project-card {
    background-color: #f5f5f5;
    padding: 2rem;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-card h3 {
    margin-bottom: 0.75rem;
    color: #1a1a2e;
}

#contact a {
    color: #4fc3f7;
    text-decoration: none;
}

#contact a:hover {
    text-decoration: underline;
}

footer {
    text-align: center;
    padding: 2rem;
    background-color: #1a1a2e;
    color: #e0e0e0;
    margin-top: 4rem;
}

@media (max-width: 768px) {
    #hero h1 {
        font-size: 1.8rem;
    }

    .nav-links {
        gap: 1rem;
    }

    section {
        padding: 2rem 0;
    }
}
Preview locally

Before deploying anywhere, you should see how your site looks in a browser. The Live Server extension you installed earlier lets you preview your site with automatic reloading whenever you save a change.

  • In the Explorer sidebar, right-click on index.html.
  • Click Open with Live Server.

Your default browser opens with your portfolio site loaded. You should see a dark header with navigation links, a hero section with "Hi, I'm Your Name" in blue, and three project cards in a grid below.

  • Click the About, Projects, and Contact links in the header to confirm they smoothly scroll to each section.

What is Live Server doing?

Live Server runs a local web server on your computer (usually at http://127.0.0.1:5500) and serves your files through it. It also watches for file changes. Any time you save a file, your browser automatically refreshes to show the update.

Don't see Open with Live Server in the menu?

  • Make sure you installed the Live Server extension by Ritwick Dey (not a similarly-named extension). Open the Extensions panel with Cmd+Shift+X (macOS) or Ctrl+Shift+X (Windows) and search for "Live Server" to verify.
  • Make sure you right-clicked the file in the Explorer sidebar (the file tree on the left), not inside the editor area.

Need more help? Why can't I see the Open with Live Server option when I right-click?

Your portfolio site is built and looking good locally. Next up, you'll push this code to GitHub so Vercel can automatically deploy it to the internet.

Push to GitHub

Your portfolio site looks great locally. Now you need to put it somewhere that Vercel can access it.

Vercel deploys code directly from a Git repository. In this step, you'll initialize a Git repository in your project folder, create a matching repository on GitHub, and push your code up so Vercel can connect to it in the next step.

In this step, get ready to:
  • Initialize a local Git repository and make your first commit.
  • Create a public GitHub repository.
  • Push your code to GitHub.
Initialize a Git repository

A Git repository tracks changes to your files over time. You need to create one in your project folder so Git can manage your code and push it to GitHub.

  • Open the integrated terminal in VS Code by pressing Ctrl+` (macOS and Windows).
  • Make sure you're inside the my-portfolio folder. You should see my-portfolio in the terminal path.
  • Initialize a new Git repository by running this command:
git init
  • Stage all your files for your first commit by running:
git add .
  • Create your first commit by running:
git commit -m "Initial portfolio site"
  • You should see output listing the files that were committed, including index.html and style.css.

What do these commands do?

  • git init creates a hidden .git folder that turns your project into a Git repository.
  • git add . stages every file in the folder, telling Git you want to include them in the next commit.
  • git commit -m "..." saves a snapshot of your staged files with a descriptive message. Think of it as a save point you can return to later.

Seeing a "not a git repository" error?

Make sure your terminal is inside the my-portfolio folder. Run pwd (macOS) or cd (Windows) to check your current directory. If you're in the wrong place, use cd to navigate into my-portfolio before running git init.

help me fix a "not a git repository" error in my terminal

Create a GitHub repository

You need a repository on GitHub to store your code in the cloud. This is the remote copy that Vercel will connect to for automatic deployments.

  • Go to github.com and sign in.
  • Click the + icon in the top right corner of the page.
  • Select New repository.
  • Enter my-portfolio as the repository name.
  • Leave the repository set to Public.
  • Do NOT check any of the initialization boxes (no README, no .gitignore, no license). You already have code ready to push.
  • Click Create repository.

GitHub shows a quick setup page with commands you can use to connect your local repository. You'll use these in the next substep.

Why leave it empty?

If you add a README or .gitignore during creation, GitHub creates an initial commit on the remote. This conflicts with the commit you already made locally, making the push more complicated. Starting empty keeps things clean.

Push your code to GitHub

Now you'll connect your local repository to the GitHub repository and push your code up.

  • Back in your VS Code terminal, connect your local repository to GitHub by running this command:
git remote add origin https://github.com/[[GITHUB_USERNAME="your GitHub username"]]/my-portfolio.git
  • Rename your default branch to main by running:
git branch -M main
  • Push your code to GitHub by running:
git push -u origin main

What will happen next?

When you run git push, Git needs to verify your identity with GitHub. A browser window will open asking you to sign in and authorize Git to access your account. Follow the prompts in the browser to complete authentication.

After you authenticate successfully, your credentials are stored so you won't be prompted again for future pushes.

  • After authentication completes, you should see output showing your branch being pushed to origin/main.
  • Go back to your repository page on GitHub and refresh it. You should see index.html and style.css listed with the commit message "Initial portfolio site".

Push failed or authentication error?

If the browser authentication window did not appear, or you see a "permission denied" error, make sure you are signed in to the correct GitHub account in your browser. Also check that the repository URL matches your GitHub username exactly.

If you see "remote origin already exists", you can update it by running git remote set-url origin followed by the correct URL.

help me fix a git push authentication error when pushing to GitHub

Your code is on GitHub and ready to deploy. Next up, you'll connect this repository to Vercel and get your portfolio live on the internet.

Deploy to Vercel

Your code is on GitHub, which means it's ready for the world to see. The next step is to connect your repository to Vercel, a hosting platform that automatically deploys your site every time you push code.

Instead of manually uploading files to a server, you'll import your GitHub repository into Vercel and let it handle the rest. Vercel detects your static site, builds it, and serves it on a global CDN with its own public URL.

In this step, get ready to:
  • Import your GitHub repository into Vercel.
  • Deploy your portfolio to production.
  • Visit your live site on the internet.
Import your project into Vercel

Vercel needs to know which repository to deploy. You'll connect it to the my-portfolio repository you just pushed to GitHub.

  • Open your browser and go to vercel.com.
  • Sign in with your GitHub account.
  • Click Add New... in the top area of your dashboard.
  • Select Project from the dropdown menu.
  • You'll see a list of your GitHub repositories. Find my-portfolio in the list.
  • Click Import next to my-portfolio.

Don't see your repository in the list?

If my-portfolio doesn't appear, Vercel may not have permission to access it. Click Configure GitHub App at the bottom of the repository list to grant Vercel access to your repositories.

Make sure you created the repository under your personal GitHub account (not an organization) and that it's public.

Why can't Vercel find my GitHub repository?

Configure and deploy

Vercel auto-detects that your project is a static HTML site. No framework or build configuration is needed.

  • On the configuration screen, leave all settings at their defaults.
  • Click Deploy.
  • Watch the build log as Vercel builds and deploys your site. This takes about 10-30 seconds.

What is Vercel doing during the build?

Vercel pulls your code from GitHub, detects there's no framework (just plain HTML and CSS), and serves the files directly. Your index.html at the root of the repository becomes your homepage.

It also distributes your files across a global CDN, so visitors anywhere in the world get fast load times.

Seeing a build error?

Build errors for a static HTML site are rare. If you see one, double-check that your index.html file is at the root of your repository (not inside a subfolder). The file name must be exactly index.html with no capital letters.

Help me fix a Vercel build error for my static HTML site.

Visit your live site

Once the deployment completes, Vercel shows a congratulations screen with your production URL.

  • Click your production URL (it looks something like https://my-portfolio-username.vercel.app).
  • Your portfolio is now live on the internet, served from Vercel's global CDN.
  • Verify you can see your header with the navigation links, your hero section, project cards, and footer.

What is a CDN?

A CDN (Content Delivery Network) is a network of servers spread across the globe. When someone visits your site, the CDN serves your files from the server closest to them. This means fast load times for visitors everywhere.

Your portfolio is live on the internet. Next up, you'll experience the full deployment workflow by making changes and watching Vercel automatically redeploy your site.

Experience the Deployment Workflow

Your portfolio is live on the internet. In the last step, you deployed it to Vercel and got a public URL anyone can visit.

Now you'll see what makes this setup truly powerful. Because your GitHub repository is connected to Vercel, every time you push code, Vercel automatically rebuilds and deploys your site with zero manual steps.

In this step, get ready to:
  • Make a code change and push it to GitHub.
  • Watch Vercel automatically deploy your update.
  • Create a preview deployment on a separate branch.
Make a change and push to GitHub

To see automatic deployments in action, you need to push a change to your repository. You'll make a visible edit to your stylesheet so the difference is obvious when the site redeploys.

  • Switch back to VS Code with your my-portfolio project open.
  • Open style.css from the Explorer sidebar.
  • Find the .highlight rule and change its color value from #4fc3f7 to any other color you like (for example, #ff6b6b for a coral red).
  • Save style.css.

Why change the highlight color?

The highlight color is used on the "Your Name" text in the hero section. Changing it gives you an instantly visible difference when the site redeploys, so you can confirm the update went live.

  • Stage, commit, and push your change by running these commands in the VS Code terminal:
git add .
git commit -m "Update portfolio styling"
git push

What do these commands do?

  • git add . stages all changed files so Git knows what to include in the next commit.
  • git commit -m "Update portfolio styling" saves a snapshot of your changes with a descriptive message.
  • git push sends your commit to the GitHub repository, which triggers Vercel's automatic deployment.
  • You should see output confirming the push was successful, ending with a line like main -> main.

Push rejected or authentication error?

  • If you see an authentication prompt, enter your GitHub username and a personal access token (not your password). GitHub no longer accepts passwords for Git operations.
  • If the push is rejected, make sure you're on the main branch by running git branch to check.

Why is my git push failing?

Watch the automatic deployment

The moment you pushed to GitHub, Vercel detected the new commit and started building a fresh deployment. This is CI/CD in action: code changes flow automatically from your editor to a live website.

  • Go to vercel.com and sign in.
  • Click on your my-portfolio project from the dashboard.
  • Open Deployments in the sidebar.
  • Look for the newest deployment at the top of the list. It will show a status of "Building" or "Ready" depending on how quickly you got here.

What is CI/CD?

CI/CD stands for Continuous Integration and Continuous Deployment. It means your code is automatically tested, built, and deployed every time you push a change. No manual file uploads, no FTP, no downtime.

This is the same workflow professional development teams use to ship updates multiple times a day.

  • Once the deployment status shows "Ready", click your production URL (the .vercel.app link) to visit your live site.
  • Confirm that your color change is visible on the "Your Name" text in the hero section.

You just pushed code and it went live automatically. No server configuration, no manual uploads.

Create a preview deployment

Production deployments update your live site. But what if you want to test a change before it goes live? Preview deployments solve this by giving every non-main branch its own unique URL.

This is how teams review changes before merging to production. You push to a branch, Vercel creates a preview, and your team can review it at a dedicated URL.

  • Create a new Git branch by running this command in your VS Code terminal:
git checkout -b feature/new-section

What does this command do?

git checkout -b feature/new-section creates a new branch called feature/new-section and switches to it. Any commits you make now will live on this branch, separate from main.

  • Make another visible change to your site. For example, open index.html and update the hero paragraph text, or add a new sentence to the About Me section.
  • Save the file.
  • Commit and push this change to the new branch by running these commands:
git add .
git commit -m "Add content to portfolio"
git push -u origin feature/new-section

What does git push -u origin feature/new-section do?

The -u flag sets the upstream tracking so future pushes from this branch just need git push. The origin feature/new-section part tells Git to create this branch on GitHub (not just locally).

  • Return to your Vercel dashboard and open Deployments in the sidebar.
  • Look for the newest deployment. It will be labelled with the branch name feature/new-section instead of main.
  • Click on the preview deployment to see its unique URL. This URL is separate from your production URL and only shows the changes on this branch.
  • Visit the preview URL to confirm your branch changes are visible there, but NOT on your main production URL.

Why are preview deployments useful?

Preview deployments let you test changes in a live environment without affecting your production site. In a team setting, you would share the preview URL with teammates for review before merging the branch into main.

Your production URL stays untouched until you merge the branch. This separation between preview and production is a professional deployment workflow pattern.

Don't see a preview deployment?

  • Make sure the push succeeded. Check your terminal output for errors.
  • Verify you pushed to a branch OTHER than main. Run git branch to confirm your current branch is feature/new-section.
  • Wait 10-20 seconds and refresh the Vercel dashboard. Preview deployments appear quickly but not always instantly.

Why isn't my preview deployment showing up on Vercel?

Secret mission

Add a Dark Mode Toggle

Your portfolio looks great, but what about visitors who prefer browsing in the dark? Add a dark mode toggle that remembers the user's preference across visits using localStorage.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely on the Vercel Hobby plan (free) and local files, 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:

  • my-portfolio folder on your Desktop (contains index.html, style.css, script.js).
  • my-portfolio repository on GitHub.
  • my-portfolio project on Vercel (deployed to your .vercel.app URL).

Keep everything running

No action needed. Choose this if you're still actively building on your portfolio or plan to keep it live as a personal site.

  • Your Vercel site stays live at its .vercel.app URL with no cost on the Hobby plan.
  • Your GitHub repository remains available for future updates.
  • Your local my-portfolio folder stays on your Desktop.
  • Git and VS Code remain installed on your machine for future projects.

Pause - I'll come back to this later

Keep your cloud resources intact but free up local space. You can always clone the repository again later.

  • Your Vercel project and GitHub repository stay active at no cost.
  • Delete your local project folder to free up Desktop space. On macOS/Linux, run:
rm -rf ~/Desktop/my-portfolio
  • On Windows, run:
rmdir /s /q "$HOME\Desktop\my-portfolio"
  • When you're ready to resume, clone the repository from GitHub and pick up where you left off.

Delete - I don't want to use this again

Remove all project resources and start fresh. This removes your live site, your repository, and your local files.

Delete your local project folder:

  • On macOS/Linux, run:
rm -rf ~/Desktop/my-portfolio
  • On Windows, run:
rmdir /s /q "$HOME\Desktop\my-portfolio"

Delete your Vercel project:

  • Go to vercel.com and sign in.
  • Select the my-portfolio project from your dashboard.
  • Open Settings from the project navigation.
  • Scroll to the bottom of the General page and find the Delete Project section.
  • Click Delete.
  • Enter the project name and confirmation text, then click Continue.

Delete your GitHub repository:

  • Go to github.com and navigate to your my-portfolio repository.
  • Click Settings (under the repository name).
  • Scroll down to the Danger Zone section.
  • Click Delete this repository.
  • Click I want to delete this repository.
  • Click I have read and understand these effects.
  • Type my-portfolio to confirm, then click Delete this repository.

Nice Work!

Nice Work!

You just built and deployed a personal portfolio website to Vercel's global CDN. Your site is live on the internet with a fully automated deployment pipeline powered by Git.

You've learned how to:

  • Built a responsive portfolio website with HTML and CSS, then deployed it to production on Vercel's global CDN with a public .vercel.app URL.
  • Connected a GitHub repository to Vercel so every push to main triggers an automatic production deployment.
  • Created a preview deployment on a separate branch with its own unique URL, experiencing the same workflow professional teams use to review changes before merging.
  • Added a dark mode toggle with localStorage persistence that remembers the user's theme preference across visits.

Ready to quiz yourself?