From Code to Cloud: A Complete Guide to Deploying Static Websites on Vercel, Netlify, and GitHub Pages
A hands-on walkthrough with real pitfalls, platform comparisons, and a decision framework — based on actual deployment experience across all three platforms.
You’ve built a static site. Maybe it’s a portfolio, a landing page, or a tool you generated with AI. The code works locally. Now comes the part that trips up most beginners: getting it online.
The good news? In 2026, you don’t need a server, a credit card, or a DevOps background. Three platforms — Vercel, Netlify, and GitHub Pages — will host your static site for free, with global CDN coverage and automatic HTTPS. The less good news? Each platform has its own quirks, and the “obvious” choice isn’t always the right one.
This guide walks through all three, with the specific details that actually matter: setup time, file requirements, common failure modes, and which platform fits which use case. Everything here is based on hands-on deployment testing, not marketing copy.
Why Static Site Hosting Became So Easy (And Why It Still Isn’t Trivial)
Static websites — pure HTML, CSS, and JavaScript — have always been the simplest thing to host. What’s changed is that the hosting layer itself became intelligent. Modern platforms like Vercel and Netlify don’t just serve files; they auto-detect project types, provision SSL certificates, and rebuild your site every time you push to Git.
But “easy” and “foolproof” are different things. The single most common deployment failure across all three platforms is the same: a missing or misnamed index.html file in the wrong directory. GitHub Pages adds another layer — it won't deploy from private repositories on the free tier. Netlify's drag-and-drop method won't accept folders inside folders. Vercel, despite being the most "developer-friendly" platform, has no direct ZIP upload option at all.
Understanding these constraints before you start saves hours of frustration.
Platform 1: Vercel — Best for Next.js and Developer Experience
What It Is
Vercel was built by the team behind Next.js, and that DNA shows. The platform’s core philosophy is “focus on your code, not your infrastructure” — and for static sites, it delivers on that promise with the fastest setup flow of the three.
Setup Time: ~3–5 Minutes
Vercel’s GitHub integration is its strongest feature. Once your repository is connected, every push triggers an automatic deployment. The platform auto-detects framework types, so for a pure static site, you can literally click “Deploy” without changing a single setting.
Step-by-Step: Deploying a Static Site on Vercel
Step 1: Prepare your project. Ensure your site’s homepage file is named exactly index.html and sits in the repository root. All CSS, JS, and image files should use relative paths — this prevents 404 errors after deployment.
Step 2: Push to GitHub. If you’re new to GitHub, create a repository, click “Uploading an existing file,” and drag your project in.
Step 3: Connect Vercel to GitHub. Sign up at Vercel using “Continue with GitHub.” When the authorization prompt appears, select “All repositories” — choosing only specific repos often causes Vercel to miss your project.
Step 4: Import and deploy. From the Vercel dashboard, click “Add New → Project,” find your repository, and click Import. Leave all defaults as-is and click Deploy. The entire process takes seconds.
Step 5 (Optional): Add a custom domain. In the Domains section, add your domain and create a CNAME record pointing to cname.vercel-dns.com. Vercel handles HTTPS automatically.
The Vercel Pitfall to Avoid
If you see a 404 after deployment, the cause is almost always the same: index.html is not in the root directory, or the filename has incorrect casing. Vercel is case-sensitive — Index.html will not work.
Free Tier Limits
Vercel’s free plan includes 100 GB of monthly bandwidth and unlimited static site deployments. For personal projects, portfolios, and tool pages, this is more than sufficient.
Platform 2: Netlify — Best for Beginners and Drag-and-Drop Simplicity
What It Is
Netlify pioneered the “drag-and-drop deployment” concept, and it remains the platform’s signature feature. If you can drag a folder into a browser window, you can deploy a website.
Setup Time: ~3–10 Minutes (Depending on Method)
Netlify offers two deployment paths: instant drag-and-drop (for one-off deployments) and GitHub-connected auto-deployment (for ongoing projects). The drag-and-drop method is genuinely faster than anything else — literally seconds from folder to live URL.
Step-by-Step: Deploying a Static Site on Netlify
Method A: Drag-and-Drop (Fastest for Beginners)
Sign up at Netlify (GitHub or email both work). From the dashboard, click “Add a New Project.” A large upload area appears. Drag your entire website folder — not a ZIP file — directly into this area. Netlify deploys it automatically and gives you a xxx.netlify.app URL within seconds.
Method B: GitHub Auto-Deployment (Best for Ongoing Updates)
Get Chengcharles’s stories in your inbox
Join Medium for free to get updates from this writer.
Push your code to a GitHub repository, ensuring index.html is in the root. In Netlify's dashboard, click "Add a new site → Import a repository," select GitHub, and choose your repo. Use these settings: branch = main, build command = leave blank, publish directory = . (a period). Click Deploy.
From this point forward, every push to GitHub triggers an automatic redeployment. This is the setup I’d recommend for anything you plan to update regularly.
The Netlify Pitfall to Avoid
The drag-and-drop method does not accept nested folders — you must drag the entire project folder, not its contents. Also, the folder must contain index.html at its top level, or you'll get a 404.
Free Tier Limits
Netlify’s free plan includes 100 GB of monthly bandwidth, automatic SSL, and unlimited sites. For individual blogs, portfolios, and static tools, it’s permanently free.
Platform 3: GitHub Pages — Best for Developers Already in the GitHub Ecosystem
What It Is
GitHub Pages is the original “free static hosting” solution. It’s built directly into GitHub — no third-party service required. The trade-off is a slightly more manual setup process and a hard limitation: the free tier only supports public repositories.
Setup Time: ~5–10 Minutes
GitHub Pages doesn’t have the one-click polish of Vercel or the drag-and-drop simplicity of Netlify. But if your code already lives on GitHub, it’s the most integrated option.
Step-by-Step: Deploying a Static Site on GitHub Pages
Step 1: Create a public repository. Upload your site files (with index.html in the root) to a public GitHub repo. Private repos cannot use Pages on the free tier.
Step 2: Enable GitHub Pages. Go to Settings → Pages (in the left sidebar under “Code and automation”). Under “Build and deployment,” set the source to “Deploy from a branch.” Select main as the branch and / (root) as the folder. Save.
Step 3: Wait for deployment. First-time deployments typically go live within 1–5 minutes. If it takes longer than 10 minutes, save the Pages settings again or check your repository for build errors.
The GitHub Pages Pitfall to Avoid
GitHub Pages is the most sensitive to file naming. The homepage must be index.html — case-sensitive. Index.html will produce a blank page. Also, do not upload the node_modules folder; it's unnecessary for static sites and can cause deployment timeouts.
Free Tier Limits
GitHub Pages allows up to 1 GB of storage per repository and 100 GB of monthly data transfer. For personal portfolios and documentation sites, this is generous.
Which Platform Should You Choose? A Plain-English Comparison
Here’s how the three platforms compare without the marketing gloss.
Vercel takes about 3–5 minutes to set up. It supports zero-config deployment and works well with private repositories on the free tier. It does not offer drag-and-drop uploads. Custom domains and HTTPS are included. It’s best for Next.js, React, and modern frontend frameworks. The free tier includes 100 GB of monthly bandwidth.
Netlify takes about 3–10 minutes depending on the method. It supports zero-config deployment, drag-and-drop uploads, and private repositories on the free tier. Custom domains and HTTPS are included. It’s best for beginners and static or Jamstack sites. The free tier includes 100 GB of monthly bandwidth.
GitHub Pages takes about 5–10 minutes and requires manual branch setup. It does not support drag-and-drop uploads or private repositories on the free tier. Custom domains and HTTPS are included. It’s best for GitHub-centric developers and documentation sites. The free tier includes roughly 100 GB of monthly data transfer as a soft limit.
A Simple Decision Framework
- Choose Vercel if you’re building with Next.js, React, or a modern framework and want the smoothest developer experience. It’s also the best choice if your repository needs to stay private.
- Choose Netlify if you want the absolute fastest path from folder to live URL, or if you’re not comfortable with Git workflows yet. The drag-and-drop method is unbeatable for quick deployments.
- Choose GitHub Pages if your code already lives on GitHub and you want zero third-party dependencies. It’s also the most “transparent” option — everything stays within one ecosystem.
The One File That Determines Everything
Across all three platforms, there is exactly one non-negotiable requirement: a file named index.html in the root directory of your project.
This isn’t a convention. It’s a hard requirement. The web server looks for index.html when someone visits your domain. If it's not there — or if it's named Index.html with a capital I — the server returns a 404. This single issue accounts for the majority of "my site deployed but shows a blank page" complaints across all three platforms.
The second most common issue is branch selection. On GitHub Pages and Netlify, you must explicitly set the deployment branch to main (or whatever your default branch is named). Vercel handles this automatically.
Final Thoughts
The barrier to publishing a static website has never been lower. All three platforms — Vercel, Netlify, and GitHub Pages — will host your site for free, with SSL and CDN included. The differences come down to workflow preferences: Vercel for developer experience, Netlify for simplicity, GitHub Pages for ecosystem integration.
Pick one, deploy something, and iterate. The best way to learn these platforms is to break them — and then fix what broke. Every 404 teaches you something.
For more detailed image-and-text guides, see MeowTool’s website deployment tag page.
