DEV Community

Cover image for From Code to Live: Deploying Your Site on Netlify in 10 Minutes (Seriously!)
Vijay Kumar
Vijay Kumar

Posted on

From Code to Live: Deploying Your Site on Netlify in 10 Minutes (Seriously!)

#webdev #programming #newbie #netlify

If you're looking for a fast, hassle-free way to deploy your website, Netlify is one of the best options out there. With built-in CI/CD, custom domains, and lightning-fast hosting, Netlify makes deploying a website as easy as pushing code to GitHub. In this post, you’ll learn how to deploy your site on Netlify in 10 minutes or less.

✅ Prerequisites

Before you start, make sure you have:

  • A static site or frontend framework (HTML, CSS, JS, React, Vue, etc.)
  • A GitHub/GitLab/Bitbucket repository
  • A Netlify account (sign up free at netlify.com)

⏱ Step-by-Step Deployment Guide

🕒 Time: 10 Minutes

1. Push Your Site to GitHub (2 min)

If your project isn't on GitHub yet, follow these quick steps:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

2. Login to Netlify (1 min)

3. Create a New Site from Git (2 min)

  • On the Netlify dashboard, click "Add new site" → "Import an existing project"
  • Choose GitHub (or GitLab/Bitbucket)
  • Authorize Netlify to access your account if prompted
  • Select your repo

4. Configure Build Settings (2 min)

Netlify usually detects your build settings automatically. If not:

  • Branch to deploy: main (or your default)

  • Build command (for frameworks like React, Vue, etc.):

    • React: npm run build
    • Vue: npm run build
    • Vite: vite build
    • Static HTML: leave blank

  • Publish directory:

    • React/Vite: dist or build
    • Static: just the folder with index.html

Click "Deploy Site".

5. Your Site is Live! (1 min)

After deployment, you’ll get a random Netlify subdomain like:

https://cool-tiger-12345.netlify.app
Enter fullscreen mode Exit fullscreen mode

You can customize it under Site Settings → Domain Management.

🎯 Bonus Tips

  • Custom Domain: Add your own domain in the settings
  • Environment Variables: Set them under Site Settings → Environment
  • Continuous Deployment: Every push to GitHub automatically redeploys your site
  • Form Handling: Netlify can handle HTML forms with zero backend

🎉 That’s It!

In just 10 minutes, you’ve taken your site live on Netlify. Whether you’re launching a portfolio, a side project, or a full-blown web app, Netlify makes it effortless. Now go build something awesome!

💬 Got questions? Drop them in the comments below!
Or check out Netlify Docs for advanced features.

Top comments (0)