DEV Community

sophia Mitchell
sophia Mitchell

Posted on

πŸš€ Deploy Your First Website in 30 Minutes β€” The Absolute Beginner's Guide

#webdev #beginners #tutorial #deploy

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>
Enter fullscreen mode Exit fullscreen mode

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

Step 2: Put It on GitHub

Think of GitHub as Google Drive β€” but for code.

  1. Create a free account at github.com
  2. Hit "+" β†’ New repository β†’ name it my-first-site
  3. 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.

  1. Sign up at vercel.com with your GitHub account
  2. Click "Add New Project"
  3. Pick your my-first-site repo
  4. Click Deploy
  5. 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 πŸš€
Enter fullscreen mode Exit fullscreen mode

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. πŸ‘‡

Top comments (1)

Collapse
 
roghayem profile image
Roghaye Mohammadi •

Great article! I recently started building and publishing my own projects, so this guide really resonates with me. I think seeing a project live is one of the most motivating moments for beginners. Thanks for putting this together!