Deploy Website for Beginners — Go Live in 5 Minutes
Photo: Art Guzman / Pexels
Writing code on a laptop and putting it on the internet are two different skills, and the gap between them stops more beginner projects than any bug does. Deployment is the process of moving your code from a personal machine to a public server that anyone with a browser and an internet connection can reach. With modern hosting platforms, that process takes about five minutes and costs nothing for a personal project — the same free tier that hosts a college portfolio also hosts thousands of production side projects. This guide walks through the three most common free deployment paths (Vercel, Netlify, and GitHub Pages), explains what actually happens on the server when you push code, and covers the environment variables, custom domains, SSL certificates, and rollback tools you'll need once the site is live.
What deployment actually is
Deployment means uploading your built application to a server that stays online continuously, has a public IP address, and is reachable through a domain name. Your laptop technically could do this — it has a network connection — but home internet connections rarely have a static IP, your ISP likely blocks inbound traffic on standard ports, and your computer isn't online 24 hours a day. Hosting platforms solve all three problems for free at small scale.
The modern deployment flow looks like this: you push your code to a Git repository (usually GitHub), the hosting platform detects the push through a webhook, it runs your build command in an isolated container, and it distributes the resulting files to a content delivery network (CDN) — a set of servers positioned in multiple geographic regions so users load your site from a nearby location rather than a single distant server. This is called continuous deployment, and it means every git push to your main branch can trigger a new live version automatically, without you touching a server console.
The three platforms compared in this guide sit in slightly different niches. Vercel is built by the team behind Next.js and is optimized for React-based frameworks with server-side rendering. Netlify predates Vercel by several years and built its reputation on static sites, serverless functions, and built-in form handling. GitHub Pages is the simplest of the three: it serves static files directly from a GitHub repository with no build server of its own for plain HTML/CSS/JS, though it can also render sites built with Jekyll or receive pre-built output from a GitHub Actions workflow.
A domain-name detail worth understanding up front, since it trips up nearly every beginner: DNS propagation. When you point a custom domain at your host, the record has to be published to your registrar's nameservers and then re-cached across recursive DNS resolvers worldwide. If your registrar sets a Time to Live (TTL) around 300 seconds, changes typically show up within a few minutes; the default TTL at most registrars is 3,600 seconds (1 hour), and depending on the resolvers your ISP uses, full global propagation can take anywhere from a few minutes up to 24–48 hours in edge cases (DNSimple).
How the build pipeline works, step by step
Understanding what happens between git push and a live URL removes most of the mystery — and most of the anxiety — from deployment. Think of it like a factory assembly line: raw materials (your source code) go in one end, a series of automated stations transform them, and a finished product (optimized, minified files ready to serve) comes out the other end, all without a human touching the machinery.
Step 1 — Detection. GitHub notifies the hosting platform through a webhook the moment you push a commit to a connected branch. This happens in under a second.
Step 2 — Environment provisioning. The platform spins up an isolated, ephemeral container with the Node.js (or other runtime) version your project specifies, then installs dependencies from your lockfile (package-lock.json, pnpm-lock.yaml, or similar).
Step 3 — Build execution. It runs your build command — typically npm run build — which compiles your source into static HTML, CSS, and JavaScript, or into a hybrid of static pages plus serverless functions for dynamic routes.
Step 4 — Optimization. The build step usually minifies JavaScript and CSS, splits code into smaller chunks so browsers only download what a given page needs, and processes images.
Step 5 — CDN distribution. The finished output is pushed to edge servers around the world so a visitor in Singapore and a visitor in São Paulo both load the site from a nearby node instead of a single origin server in one country.
Step 6 — Atomic swap. The new version replaces the old one instantly and atomically — visitors never see a half-updated site mid-deploy, because the platform routes traffic to the new build only once it's fully live.
How does Vercel or Netlify know which framework I'm using?
Both platforms inspect your repository's package.json and file structure for signatures — a next.config.js file signals Next.js, a vite.config.js signals Vite, and so on — then apply a preset build command and output directory automatically. You only need to specify these manually for unusual project layouts or custom frameworks the platform doesn't recognize out of the box.
Path 1: Vercel (best for React, Next.js, Vue, and Svelte)
Vercel is the most common choice for anyone building with Next.js, since the two are made by the same company and get first-class support for every new framework feature.
Step 1 — Create an account (about 2 minutes). Go to vercel.com, click "Sign Up," and authenticate with your GitHub account. This is faster than creating a separate username and password, and it's what lets Vercel see your repositories in the next step.
Step 2 — Import and connect your repository (about 2 minutes). From the dashboard, click "New Project," select the repository you want to deploy, and click "Import." Vercel auto-detects your framework and pre-fills the build command and output directory. For most projects, you can leave every setting on default and click "Deploy."
Step 3 — Get a live URL. Vercel assigns a free subdomain in the pattern your-project.vercel.app the moment the build finishes, typically within one to two minutes for a small app. From this point forward, every push to your connected branch triggers a new automatic deployment.
Step 4 — Add a custom domain (optional, about 1 minute of clicking, up to an hour of waiting for SSL). In Project Settings → Domains, type your domain and Vercel shows the exact DNS records to add at your registrar. Once DNS resolves, Vercel automatically requests and installs a free SSL certificate.
Vercel's free Hobby tier includes 100 GB of fast data transfer, 1 million function invocations, 4 CPU-hours of active compute, and 100 build minutes per month, alongside a firm 300-second (5-minute) maximum duration per serverless function (Vercel Hobby Plan docs). If you exceed a usage cap, Vercel pauses the affected feature rather than billing you unexpectedly — most limits reset after a 30-day rolling window.
Path 2: Netlify (best for static sites and built-in forms)
Netlify's strength is flexibility across frameworks that Vercel doesn't specialize in, plus form handling and split-testing tools baked directly into the platform.
Step 1 — Create an account. Go to netlify.com and sign up with GitHub, the same one-click flow as Vercel.
Step 2 — Connect your repository. Click "Add new site" → "Import an existing project," select GitHub, and choose your repo. Set your build command (commonly npm run build) and your publish directory (build/ for Create React App, dist/ for Vite, or out/ for a static Next.js export).
Step 3 — Deploy. Click "Deploy site." Netlify builds and publishes automatically, and every future push to your connected branch redeploys without manual intervention.
As of the platform's 2025 pricing overhaul, Netlify's free tier runs on a shared monthly credit pool rather than separate bandwidth-and-build-minute allowances: 300 credits per month, where a production deploy costs roughly 15 credits and each gigabyte of bandwidth costs roughly 20 credits, working out to somewhere around 15 GB of effective monthly bandwidth for a typical site (Netli.fyi pricing breakdown). Accounts created before September 4, 2025 may still run on the older model of a flat 100 GB bandwidth and 300 build minutes per month. Netlify serverless functions on the free tier are capped at a 10-second synchronous execution timeout, tighter than Vercel's 300 seconds — a meaningful difference if your backend logic does anything slow, like calling a third-party API with high latency.
Path 3: GitHub Pages (free, static sites only)
GitHub Pages is the simplest of the three because it has no build server of its own for a plain HTML/CSS/JS site — it just serves the files in your repository directly. It's the natural choice for a portfolio, project documentation, or any site that doesn't need server-side logic.
Step 1 — Enable Pages in your repository. Go to your repo on GitHub, open Settings, scroll to the "Pages" section, and under "Source" choose "Deploy from a branch." Pick the branch (usually main) and the folder (/root or /docs), then save.
Step 2 — Wait for the build. GitHub Pages runs a lightweight build (Jekyll processing if you're using it, or a direct copy if not) and your site becomes live at username.github.io/repo-name within a minute or two.
Step 3 — Add a custom domain. In the same Pages settings panel, type your custom domain and update your DNS records at your registrar as GitHub instructs, typically an A record pointing to GitHub's IP addresses or a CNAME record for a subdomain.
For projects that need an actual build step (a React app, for example), GitHub Pages can still serve the output, but you'll need a GitHub Actions workflow to run npm run build and push the resulting static files to a gh-pages branch, since GitHub Pages itself doesn't run arbitrary JavaScript build tools automatically the way Vercel and Netlify do.
Environment variables: keeping secrets out of your code
An environment variable is a named value your application reads at runtime instead of having hardcoded into the source file. API keys, database connection strings, and third-party service tokens all belong here — never directly in a file you commit to Git.
// Wrong — the key is now permanently in your Git history,
// visible to anyone with repo access, forever, even if you delete this line later.
const API_KEY = "sk-abc123xyz";
// Right — the value lives in the hosting platform's dashboard,
// injected into the running process, never written to a file in your repo.
const API_KEY = process.env.REACT_APP_API_KEY;
Think of environment variables like a hotel room key rather than a house key you cut copies of for everyone. The key works only inside that specific "room" (the deployment environment), it can be revoked instantly without changing the lock (your code), and losing one copy doesn't compromise every other room in the building.
To add one on Vercel: Project → Settings → Environment Variables → enter the key-value pair → save → redeploy so the new value takes effect. Netlify's flow is nearly identical, under Site Settings → Environment Variables. Both platforms let you scope a variable to Production, Preview, or Development separately, which matters once you're testing a pull request against a staging API key rather than your production one.
What happens if I accidentally commit an API key anyway?
Removing the line in a new commit does not remove it from Git history — anyone can check out an old commit and read it. You need to rotate the key immediately at the service that issued it (treat it as compromised) and then use a tool like git filter-repo or GitHub's secret-scanning remediation guidance to scrub it from history, though rotation is the step that actually neutralizes the risk.
Custom domains and SSL: how HTTPS gets turned on automatically
Buying a domain from a registrar like Namecheap or GoDaddy typically runs $9 to $15 per year for a standard .com. Once purchased, connecting it to your host takes three steps: enter the domain in your host's dashboard, add the DNS records the host displays (usually an A record pointing to an IP address, or a CNAME pointing to a hostname) at your registrar's DNS panel, and wait for propagation.
Type: A
Name: example.com
Value: 76.76.19.165 (illustrative — your host displays the current value)
Once DNS resolves correctly, your host automatically requests a free SSL/TLS certificate — nearly all of these platforms use Let's Encrypt, a nonprofit certificate authority that issues certificates through an automated protocol. Let's Encrypt issuance itself typically completes within 30 minutes to an hour once domain ownership is verified via DNS (DNSimple). The practical wait time you experience is dominated by DNS propagation, not certificate issuance — which is why platforms commonly quote "5 to 10 minutes" for typical cases but note it can stretch to a day if your registrar uses a long TTL or your ISP's resolver caches aggressively.
You can check propagation yourself from a terminal:
nslookup example.com
# Compare the returned IP against the one your host assigned
Every major platform in this guide issues SSL automatically and free of charge, redirecting plain http:// traffic to encrypted https:// by default. This wasn't always the norm — a decade ago, SSL certificates commonly cost $50 to $200 per year and required manual installation, which is part of why a meaningful share of the web still ran unencrypted well into the 2010s. Automated, free issuance through Let's Encrypt (which launched in 2015) is one of the more consequential quiet infrastructure shifts of the past decade.
Monitoring, failed builds, and rollbacks
Every deployment platform in this guide gives you a dashboard listing every build with a pass/fail status and full logs. When a build fails, click into it, read the error at the bottom of the log (usually the most specific message, since build tools print a stack trace top-down but the root cause is often the last distinct error), fix the issue locally, and push again — the platform redeploys automatically.
Rollback is the safety net that makes deploying without fear reasonable: if a new version breaks something in production, you don't have to scramble to write a fix under pressure. On Vercel, open the Deployments tab, find the last known-good build, click the menu, and select "Promote to Production" — the old version is live again within seconds, because the platform keeps every previous build's static assets cached rather than deleting them. Netlify calls the same feature "Publish deploy" from its Deploys tab. This is fundamentally different from traditional server deployment, where rolling back often meant SSH-ing into a machine and manually restoring a backup — here it's closer to undo in a text editor.
Common mistakes beginners make
Deploying before testing locally. Running npm run build on your own machine first catches most errors before they show up in a platform's build log, where debugging is slower because you can't set breakpoints in a remote container.
Committing .env files. Add .env, .env.local, and similar files to .gitignore before your first commit, not after. A .gitignore entry added after secrets are already in history doesn't retroactively remove them.
Mixing staging and production on the same branch. Most teams keep main as the deployable branch and use feature branches with preview deployments (both Vercel and Netlify generate a unique preview URL per pull request automatically) for anything not ready for real users.
Assuming "it works on my machine" means it'll work in production. Differences in Node.js version, missing environment variables, or case-sensitive file paths (macOS is case-insensitive by default; Linux servers are not) are the most common causes of a build that succeeds locally and fails on the platform.
Ignoring the free-tier commercial-use restriction. Vercel's Hobby plan is explicitly non-commercial — a project that starts generating revenue, even modestly, is expected to move to a paid plan under the platform's terms (Vercel Hobby Plan docs). This surprises beginners who launch a side project for free and later start charging for it.
Comparing the three platforms
| Platform | Best for | Free bandwidth (approx.) | Function timeout | Custom build step |
|---|---|---|---|---|
| Vercel | Next.js, React, Vue, Svelte apps | 100 GB fast data transfer/month | 300 seconds | Auto-detected |
| Netlify | Static sites, forms, split testing | ~15 GB via 300 monthly credits (new accounts) | 10 seconds (sync) | Auto-detected |
| GitHub Pages | Portfolios, docs, static-only sites | ~100 GB (soft limit) | Not applicable (static only) | Manual via GitHub Actions |
Table: free-tier deployment platform comparison, based on official documentation as of July 2026. Figures change frequently — verify current limits on each platform's pricing page before committing to one for a long-term project.
Real example: deploying a React app end to end
# 1. Scaffold a new project locally
npx create-vite my-app --template react
cd my-app
# 2. Initialize Git and push to GitHub
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/my-app.git
git push -u origin main
# 3. Deploy on Vercel
# Go to vercel.com → New Project → select "my-app" → Deploy
# Vercel detects Vite automatically and runs `npm run build`
# 4. Result: live within roughly 1–2 minutes at
# my-app.vercel.app
From an empty terminal to a public URL, this whole sequence realistically takes under 10 minutes for someone doing it for the first time, and under 5 once you've done it a couple of times and aren't second-guessing each dashboard click.
Frequently asked questions
Q: Is it really free to deploy a website? Yes, for personal and low-traffic projects. Vercel, Netlify, and GitHub Pages all offer free tiers with no credit card required at signup. The tradeoffs are usage caps (bandwidth, build minutes, function execution time) and, on Vercel specifically, an explicit restriction against commercial use on the free Hobby plan.
Q: Do I need to know how to use a server or Linux command line?
No. All three platforms in this guide manage the underlying server infrastructure for you. The most command-line work you'll do is git push, which you likely already know if you're using GitHub.
Q: What's the difference between static hosting and serverless functions? Static hosting serves pre-built HTML, CSS, and JavaScript files exactly as they are, with no server-side computation per request. Serverless functions run backend code on demand (for things like handling a form submission or querying a database) without you managing a persistent server — the platform spins up compute only when a request arrives.
Q: Why does my site show an old version after I deploy? This is almost always a browser caching issue, not a failed deployment. Hard-refresh with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) to force the browser to fetch the latest files instead of serving them from its local cache.
Q: How do I fix a 404 error on routes when using React Router?
Client-side routers like React Router handle navigation in the browser, but the server needs to know to serve index.html for any route it doesn't recognize as a real file. On Vercel, add a vercel.json with a rewrite rule sending all paths to /index.html; Netlify uses a similar _redirects file.
Q: Can I use a free custom domain? The domain name itself is not free — expect $9 to $15 per year from a registrar. What is free is connecting that domain to your host and getting an SSL certificate for it.
Q: How long does DNS propagation actually take in practice? Often just a few minutes if your registrar uses a short TTL, but it can take up to 24–48 hours in less common cases, particularly if your ISP's DNS resolver caches records longer than your registrar's configured TTL (DNSimple).
Q: What happens if I exceed my free-tier limits? Vercel pauses the affected feature rather than charging you unexpectedly, with most caps resetting on a rolling 30-day basis (Vercel Hobby Plan docs). Netlify's credit-based free tier similarly pauses sites once the monthly credit pool is exhausted, resuming the following month. Neither platform silently bills a personal account without an explicit upgrade.
Q: Should I choose Vercel, Netlify, or GitHub Pages for my first project? If you're building with Next.js or another React-based framework, Vercel is the most direct path since it's built by the same team. If you need built-in form handling or split testing without extra tooling, Netlify covers more ground. If your site is genuinely static — a portfolio, resume, or documentation set with no backend logic — GitHub Pages is the simplest and keeps everything in one place with your existing repository.
Q: Do I need a build step for a plain HTML/CSS/JS site? No. GitHub Pages and both other platforms can serve plain static files with zero build configuration — the build step only matters once you introduce a framework (React, Vue, Next.js) that needs to be compiled from source into browser-ready output.
What this means
Deployment stopped being the hard part of shipping a website years ago; the platforms covered here turned a process that once required renting a server, configuring Nginx, and manually installing SSL certificates into a sequence of dashboard clicks connected to a Git push. The remaining friction for beginners isn't technical difficulty, it's unfamiliarity with the vocabulary — environment variables, DNS propagation, build pipelines — and that vocabulary becomes intuitive after your first real deploy. Pick Vercel if you're in the React/Next.js ecosystem, Netlify if you want form handling and static-site flexibility, or GitHub Pages if your project needs nothing more than files served as-is, and treat the free tier limits as a signal to upgrade only when your traffic actually earns it.
Read next:
Follow new articles
Add SciHub101 to your feed reader to see new science and technology stories.
About the Author
SciHub101 is an independent science and technology publication founded and edited by Buğra Sözeri, a software engineer and app developer based in Türkiye. AI tools assist with drafting and research. Source documentation in the existing archive is uneven, and articles are being reviewed and corrected. The Editorial Team byline identifies editorial responsibility; it does not certify specialist or independent human review. Where we compare products, anything built by our own team is labelled as such — see the editorial guidelines and About page for how corrections and disclosures work.
Related Articles
Web Performance Optimization — Core Web Vitals 2026
Web performance optimization guide: Core Web Vitals, image compression, code splitting, caching, lazy loading. Real before/after numbers and tools.
Web Development Portfolio — 5 Projects That Get Hired
5 web development portfolio projects to get hired: beginner to advanced, GitHub best practices, README template, deployment, and recruiter-tested tips.
Docker Explained — Containers for Beginners
Learn Docker from scratch: containers vs VMs, Dockerfiles, docker-compose, and how to ship a Node.js app reliably across any environment.
Best Web Development Tools 2026 — Editors & Frameworks
Essential web development tools 2026: VS Code, Git, npm, React, Vite, Vercel, PostgreSQL. Complete free stack for building and deploying modern websites.
HTML, CSS, JavaScript Fundamentals — Web Dev Basics
Learn the three pillars of web development. HTML structure, CSS styling, JavaScript interactivity. Interactive examples.
How to Use Figma for Beginners: UI Design Crash Course 2026
Figma is a browser-based design tool used by 99% of product teams and freelance designers. Unlike Photoshop or Sketch, Figma runs entirely in the browser, eliminates version control chaos, and enables real-time collaboration. Core concepts: Frames (artboards), Components (reusable design elements), Auto Layout (responsive design without code), and Prototyping (clickable mockups). A beginner workflow involves creating a Frame, adding shapes/text, converting frequently-used elements to Components, applying Auto Layout for scaling, and prototyping interactions. Most beginners spend 60% of time fighting tools instead of designing. This article covers what Figma actually is, the five foundational concepts, a beginner's first-hour workflow, and practical keyboard shortcuts that save hours of clicking.