CODINGNOW
← Back to the Build Your Homepage series
πŸš€
EPISODE 01
Your first deployment in a single line of code

Build Your Homepage in 5 Minutes with GitHub + Vercel

Learn the modern workflow where pushing to GitHub triggers Vercel to auto-deploy your site. End the lesson with a working https://your-name.vercel.app homepage.

HTMLGitHubVercelDeployment
Duration
⏱ About 2 hours
Level
πŸ“Š Absolute Beginner
Prerequisite
🎯 None β€” just a laptop and an email address
OUTCOME
A real, live homepage at https://your-name.vercel.app

What you'll learn

  • 1Understand what GitHub and Vercel are and why they pair so well
  • 2Write your first HTML file and push it to a GitHub repository
  • 3Connect Vercel to GitHub to build an automatic deployment pipeline
  • 4See first-hand how editing code triggers an automatic redeploy

Lesson Flow at a Glance

TimeStepWhat you learn
0:00 – 0:151. Why GitHub + Vercel?Build the mental model
0:15 – 0:302. Create accountsSign up for GitHub and Vercel
0:30 – 0:503. Your first HTML fileWhat a web page really is
0:50 – 1:104. Upload to GitHubPut code on the internet
1:10 – 1:305. Deploy with VercelGet a real URL
1:30 – 1:506. Make an editPush β†’ auto-deploy in action
1:50 – 2:007. Wrap-up & next stepsWhere to go from here

1. Why GitHub + Vercel?

"How hard can a homepage be?"

Putting a homepage online used to be a chore:

  1. Rent a server (tens of dollars a month)
  2. Install a web server via Linux commands
  3. Upload files with an FTP client
  4. Buy a domain and wire it up
  5. Repeat every time you edit something

Today? Write the file β†’ push to GitHub β†’ Vercel handles the rest. Done.

Who does what

A simple analogy:

  • GitHub = cloud storage for your code (think Google Drive for developers)
  • Vercel = the assistant that watches GitHub and serves your site automatically
text
[Your laptop] ──write code── [GitHub] ──auto-detect── [Vercel] ──publish── [The world]

Why this combo became the standard

  • Free: both have generous free tiers for personal projects
  • Fast: a push hits production worldwide in ~30 seconds
  • Automatic: connect once, never think about it again
  • Industry-grade: real companies ship real products this way

What about GitHub Pages?

GitHub has a built-in static hosting feature called GitHub Pages. We choose Vercel because:

  • Vercel is faster and easier, and later it hosts React/Next.js apps the same way
  • GitHub Pages handles plain static files; Vercel scales beyond that
  • Vercel is more common in real-world jobs β€” learn it from day one

2. Create Accounts

2-1. Sign up for GitHub

  1. Go to https://github.com β†’ click Sign up
  2. Enter email, password, and pick a username (this becomes your URL: github.com/your-name)
  3. Pick the Free plan
  4. Verify your email
πŸ’‘

Choose a username you would not be embarrassed to put on a rΓ©sumΓ© β€” it lives forever in your repo URLs.

2-2. Sign up for Vercel

  1. Go to https://vercel.com β†’ click Sign up
  2. Click "Continue with GitHub" (this is the smart path β€” they will link automatically)
  3. Approve the GitHub OAuth permissions
  4. Pick the Hobby (Free) plan
ℹ️

By signing in via GitHub, Vercel can see your repositories. That is exactly the integration we want for auto-deploys.

3. Your First HTML File

What is HTML?

HTML (HyperText Markup Language) is the structural language of every web page. It is just text β€” no special software required.

Write the file

Open any plain-text editor (Notepad on Windows, TextEdit on macOS in plain text mode) and save the following as index.html on your desktop.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Alice β€” Home</title>
</head>
<body>
  <h1>Hello, I am Alice πŸ‘‹</h1>
  <p>This is my first homepage.</p>
  <ul>
    <li>Learning to code</li>
    <li>Loves cats</li>
    <li>Coffee enthusiast</li>
  </ul>
</body>
</html>

Double-click the file to open it in your browser. Welcome to your first homepage β€” running locally on your machine.

⚠️

On Windows, make sure the extension is .html, not .html.txt. Show hidden file extensions in File Explorer if needed.

4. Upload to GitHub

Create a repository

  1. On GitHub, click the "+" button (top right) β†’ New repository
  2. Name it my-homepage
  3. Description: My first homepage
  4. Public (so Vercel can read it for free)
  5. Check "Add a README file"
  6. Click Create repository

Upload your file

  1. In the new repo, click "Add file" β†’ "Upload files"
  2. Drag your index.html into the page
  3. Commit message: "Add first homepage"
  4. Click "Commit changes"

Your code is now on GitHub. Anyone can view it at github.com/your-name/my-homepage.

5. Deploy with Vercel

  1. Go to https://vercel.com β†’ log in (with GitHub)
  2. Click "Add New..." β†’ "Project"
  3. Find my-homepage in the list β†’ click Import
  4. Leave all defaults β†’ click Deploy
  5. Wait ~30 seconds for the green check

Click the preview thumbnail. You now have a real URL like https://my-homepage-your-name.vercel.app β€” visible from anywhere in the world.

πŸ’‘

Want a custom domain? You can buy one (about $10/year) and connect it in Vercel β†’ Settings β†’ Domains.

6. Make an Edit

Here is the magic: edit on GitHub, watch Vercel redeploy automatically.

  1. Open index.html on GitHub β†’ click the pencil (✏️) icon
  2. Change "Alice" to your real name and add a few hobbies
  3. Commit message: "Update profile"
  4. Click Commit changes
  5. Open the Vercel dashboard β€” a new deployment is already running
  6. Refresh your site URL after ~30 seconds. Changes are live!

What just happened

text
1. You committed on GitHub
2. GitHub fired a webhook to Vercel
3. Vercel grabbed the new code
4. Vercel built and published the new version
5. The world sees your update

7. Wrap-up & Next Steps

What you accomplished

  • Wrote your first HTML
  • Created a GitHub account and a repository
  • Set up a Vercel project linked to GitHub
  • Experienced an automatic deployment pipeline

Common questions

  • Q. The deploy failed? β€” Check the Vercel build logs; usually it is a filename typo.
  • Q. I do not see my changes β€” Hard-refresh (Ctrl/Cmd + Shift + R) to bust the browser cache.
  • Q. Can I make it private? β€” Yes, but private repos may need a paid Vercel plan.

Next: CSS

Your homepage works but it looks plain. Next lesson, we will style it with CSS β€” colors, fonts, and layout.

πŸ›  Mini Projects

Add a profile photo (use an <img> tag pointing to a hosted image URL)
Add links to your social media as a <ul> of <a> tags
Add a second page (about.html) and link to it from index.html
Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub β†—