🚀 Deploy Your First Website in 30 Minutes — The Absolute Beginner's Guide

sophia Mitchell — Sat, 04 Jul 2026 09:15:55 +0000

Spoiler: it's embarrassingly easy. Nobody told me that.

So I spent three weeks convinced that deploying a website was some dark art reserved for people who wear hoodies and drink cold brew at 2am.

Turns out? It takes 30 minutes. Maybe less.

Here's everything I wish someone had told me.

First, Let's Kill the Jargon (2-minute version)

You'll hear these words everywhere. Here's what they actually mean:

🖥️ Server — A computer in a warehouse somewhere that never turns off. It serves your website to visitors so you don't have to leave your laptop running 24/7.

🏷️ Domain — Your website's street address. Like yourname.com.

📖 DNS — The internet's phonebook. Turns yourname.com into the server's real location.

🔒 HTTPS — That little padlock in your browser. Means the connection is secure. Users trust it. Google rewards it. You want it.

OK. You're ready. Let's build.

Step 1: Make the World's Simplest Website

Create a file. Call it index.html. Paste this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>I exist on the internet now</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #0f172a;
      color: #f8fafc;
      font-family: sans-serif;
      text-align: center;
    }
    h1 { font-size: 3rem; margin-bottom: 0.5rem; }
    p  { color: #94a3b8; font-size: 1.2rem; }
  </style>
</head>
<body>
  <h1>🎉 Holy moly, I'm on the internet!</h1>
  <p>Built from scratch. Deployed myself. Pretty cool, right?</p>
</body>
</html>

That's genuinely it. That file is a website.

Step 2: Put It on GitHub

Think of GitHub as Google Drive — but for code.

Create a free account at github.com
Hit "+" → New repository → name it my-first-site
Drag and drop your index.html right into the browser

No terminal. No git commit. No drama. Just drag, drop, done.

Step 3: Deploy with Vercel ✨ (This Part Feels Like Magic)

Vercel is the tool that takes your GitHub code and puts it on the internet. It's free, it's fast, and it does most of the work for you.

Sign up at vercel.com with your GitHub account
Click "Add New Project"
Pick your my-first-site repo
Click Deploy
Stare at the screen for 30 seconds

BOOM. 🎊 Your site is live.

You'll get a URL like my-first-site.vercel.app — send it to your friends, your mom, your cat. It works for everyone.

And yes — it comes with HTTPS automatically. That padlock? Already there.

Step 4 (Optional but Satisfying): Get a Real Domain

.vercel.app is fine. But yourname.com hits different.

Buy a domain at Porkbun or Namecheap — usually ~$10/year
In Vercel: Settings → Domains → Add your domain
Copy the two DNS records Vercel gives you into your domain registrar
Wait 5–30 minutes

That's it. Custom domain, HTTPS included, zero extra cost.

The 3 Things That Will Trip You Up

Fair warning — these got me:

1. Filename case matters
Index.html and index.html are different files on a server. Use lowercase. Always.

2. DNS feels broken (it's not)
After changing DNS, your domain might not work for a while. This is normal. Grab a coffee. Come back in 20 minutes.

3. Don't put passwords in your code
API keys, database passwords — keep them out of GitHub. Vercel has an "Environment Variables" section in settings. Use it.

The Whole Thing, in One Line

index.html → GitHub → Vercel → yoursite.vercel.app 🚀

That's the entire pipeline. Everything else is just details.

Where to Go From Here

You've got the basics. Now the fun starts:

🎨 Want it to look good? → Learn Tailwind CSS and CSS Tools
⚡ Want it to do stuff? → Add some vanilla JavaScript
🗄️ Need a database? → Supabase has a free tier and great docs
🤖 Want to go further? → Try Next.js — still deployable on Vercel in one click

You Did It

Seriously. You just learned something that intimidates a lot of people — and it took you less time than a Netflix episode.

Drop your site URL in the comments. I genuinely want to see what you built. 👇

DEV Community: sophia Mitchell