Verify Vercel Automatic Deployments

1. What We Are Learning

In this lesson, you will learn how Vercel's automatic deployment system works. The goal is to confirm that Vercel is configured for automatic deployments on future pushes. We will make a small change to our code, push it to GitHub, and watch as Vercel magically updates our live website without any manual intervention from us.

2. Why This Matters

This automated process is a cornerstone of modern web development, often called Continuous Deployment (CD).

Think of it this way: In your design workflow, when you update a master component in Figma, every instance of that component across all your files updates automatically. You don't have to manually replace each one. Vercel does the same thing for your website. Your GitHub repository is the "source of truth," and Vercel ensures the live site always mirrors it.

This automation is powerful because it:

• Saves time: No more manual upload or deployment steps.
• Reduces errors: It removes the risk of human error during deployment.
• Increases confidence: You can push small changes and see them go live immediately, creating a fast and reliable feedback loop.

Let's see how this connection between GitHub and Vercel enables this workflow.

3. Step-by-Step Instructions

Now that you understand the concept, let's prove it works with our own project.

Step 1: Check Your Vercel Configuration

First, let's confirm the setting that enables this magic. When you imported your project, Vercel automatically configured your main branch as the "Production Branch." This tells Vercel, "Any code pushed to this specific branch should be deployed to the live URL."

1. Open your project in the Vercel dashboard.
2. Navigate to the Settings tab.
3. In the left sidebar, click on Git.
4. You should see that your GitHub repository is connected and that the Production Branch is set to main.

It will look exactly like this:

Step 2: Make a Small Code Change

Let's make a simple, visible change so we can easily confirm the update.

1. Open your project folder in VS Code.
2. Open the index.html file.
3. Find the line with your <h1> element, which probably says "Hello World".
4. Change the text to something new, like: <h1>My First Automatic Update!</h1>
5. Save the file (Cmd+S or Ctrl+S).

Step 3: Commit and Push the Change

Now, we'll follow the same Git process you've learned to send this change to GitHub.

1. Go to the Source Control panel in VS Code (the icon with three connected dots).
2. You will see your index.html file listed under "Changes."
3. Click the '+' icon next to the file to "stage" it.
4. In the message box at the top, type a clear commit message, like Update heading text.
5. Click the checkmark icon to commit the change.
6. Finally, click the "Sync Changes" button at the bottom of the window to push your commit to GitHub.

Step 4: Watch Vercel Deploy

This is where the automation kicks in. You don't need to do anything else.

1. Switch back to your Vercel dashboard. Go to the Deployments tab for your project.
2. Within seconds of you pushing to GitHub, you should see a new deployment appear at the top of the list. Its status will say "Building".

This process is explained well in the following article.

Step 5: Confirm the Live Update

The build should take less than a minute. Once it's finished, the status will change to "Ready".

1. Go to the browser tab where you have your live website open.
2. Refresh the page.

You should see your new heading: "My First Automatic Update!"

4. What Could Go Wrong

• The live site doesn't update.

  • Reason: The most common cause is that the git push command didn't complete successfully.
  • Fix: Go to your repository on GitHub.com and check the index.html file. Does it show your latest commit and the new heading? If not, go back to VS Code and click "Sync Changes" again. Check for any error messages in the output.

• The new deployment fails in Vercel.

  • Reason: You might have accidentally introduced a syntax error into your index.html file (e.g., deleted a closing >).
  • Fix: Vercel will show an error in the deployment logs. For now, the easiest way to fix this is to go back to VS Code, undo your change (you can use Cmd+Z or Ctrl+Z), save the file, and then commit and push again. This will trigger a new, working deployment, effectively "rolling back" the error.

5. Mini Exercise

Time to put it into practice. This exercise will solidify the entire automated workflow.

1. In VS Code, open your index.html file.
2. Find the <p> tag (paragraph) you created earlier and change its text to: "This site updates automatically from GitHub."
3. Use the VS Code Source Control panel to stage, commit (with the message Test paragraph update), and push the change.
4. Open your Vercel dashboard and watch the new deployment kick off and complete.
5. Refresh your live URL and take a screenshot showing the updated paragraph text. This is your proof of a successful continuous deployment!

6. Checklist Before Moving Ahead

• I have confirmed my Vercel project's "Production Branch" is set to main.
• I have successfully made a code change, pushed it to GitHub, and seen it deploy automatically.
• I have verified the change is live on my public URL.
• I understand that any git push to the main branch will trigger a new live deployment.

Congratulations! You have now mastered the complete, modern workflow for deploying and updating a website. This loop—edit locally, push to GitHub, and let Vercel handle the rest—is exactly what professional developers and teams use every day.

A Look Ahead

So far, we've treated the HTML and CSS code as something we just copy-paste or make minor edits to. But to effectively guide an AI to write code for you, you first need to be able to read and understand its output. In our next module, Code Literacy, we'll start demystifying HTML and CSS. You'll learn to recognize the basic building blocks of a webpage, which will prepare you to critically review and refine the code that AI generates for us later on.