Back in college, I worked on a lot of projects. Other students did the same, but I gained an edge by learning hosting and cloud services early. That sent me down a rabbit hole of free VPS services, Dockerfiles, and whatever else I could find.

Classmates and strangers on reddit kept asking me to help them host their college projects, freelance gigs, or new SaaS products.

So here it is: a guide to free hosting. Everything here either provides a free tier or has a freemium pricing model.

Frontend

At this point, most people know how to host a website. But if you're looking for alternatives, here's what I've used:

  1. Vercel - Serverless functions, free PostgreSQL (via Neon), image optimization with Next.js.
  2. Github Pages - Easy static deployment.
  3. CloudFlare - Great for websites and serverless functions, needs a bit more setup.
  4. Netlify - Serverless functions and server config.

Hosting a static site is straightforward until it isn't. A few things I've learned the hard way:

  • Use GitHub Pages if you only have simple HTML files and are experimenting with things. There's a lot that can be done using GitHub Pages and Jekyll (also, while you're here, study static site generators and try one).
  • Don't create a brand-new Vercel project for a "Hello World" index.html.

If you're hosting a simple Vite (React) project, you might run into an issue where reloading a random page or entering a route directly results in a 404 error. This is common in the React ecosystem. If you use Next.js you've probably never heard of it.

Here's a popular Stack Overflow thread from where I learned about this: Link. So, What's the solution I used? I created a catch-all and called it a day as it was just my college project and no one cared except me. It did help me during an interview, though.

Here's the code which worked for my vercel deployment. Just create a vercel.json file and put it the root directory. Example project here.

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

For Netlify, create a netlify.toml file and place it in the root directory:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = false

Bonus

If you don't really trust these providers to host your website or you want to try something different, consider running Coolify or Docker locally on your own machine.

Authentication

If you're here, chances are your web application needs users. Even if it's just one person every other week, you'll need a basic authentication layer to:

  • Prevent API spam
  • Avoid database flooding with junk requests

So here are my top picks:

Better Auth is open-source auth that lives in your code and database. No vendor lock-in, no per-MAU pricing. Works with any framework: email/password, social login, passkeys, 2FA, anonymous auth, all included. Self-hosted so you own your user data. The dashboard is optional and paid, but the library itself is completely free.

Auth0 is drop-in auth and authorization with multiple identity providers and solid docs. Free tier covers 25,000 MAU, advanced features are paid.

Auth.js (NextAuth) is open-source auth for Next.js supporting OAuth, magic links, email and credentials. The newer versions can be tricky to set up and you might not get everything you need out of the box.

Clerk offers pre-built auth components with multi-factor auth and social logins. Free tier covers 50,000 monthly retained users, advanced features are paid.

Build Your Own - if you go this route, a few things I learned:

  • Use OTP-based sign-in. Never store passwords. No passwords means no password leaks.
  • OTP sign-in also removes the need for a "Forgot Password" flow entirely.
  • When using JWT auth, always extract the user from the JWT payload instead of sending it separately in the body, URL, or query params. This avoids data leaks.
  • Don't forget about authorization: roles, user types, organizations.
  • Think about account merging. What happens when a user signs up with email but later uses Google OAuth?

Here's my GitHub project using Auth.js.

Before copy-pasting anything, check the version and follow the docs.

Read Part 2 for backend, database and storage.


Next: Part 2: Backend, Database & Storage Solutions