Vite, Netlify, Vercel and AWS Amplify: hosting a DIY website

Vite is not a host. It is the build tool that turns your project into fast, ready-to-serve files, and it is what many AI-built React sites use under the hood. Netlify, Vercel and AWS Amplify are the hosts: they connect to your GitHub repository, run the build, and serve the result worldwide over a CDN. For most DIY business sites, we suggest Netlify or Vercel. Choose Amplify when you are already invested in AWS.

How the pieces fit together

A modern DIY website moves through three stages:

1. Build tool (Vite, or a framework like Next.js or Astro) turns your code into static files and any server functions.
2. Repository (GitHub) stores the code. See our introduction to GitHub.
3. Host (Netlify, Vercel, AWS Amplify) watches the repository, rebuilds on every push and publishes the site.

When you ask Claude to "build a React site", it will often scaffold a Vite project. When you run the build, Vite outputs a dist folder of plain HTML, CSS and JavaScript. That folder is what gets hosted.

What Vite does

Vite gives you a very fast local development server, so changes appear in the browser almost instantly while you work, and an optimized production build. It works with React, Vue, Svelte and plain JavaScript, and several frameworks build on top of it.

One thing to watch: a plain Vite and React project is a single-page app. The browser receives a mostly empty page and JavaScript fills it in. Search engines and AI crawlers handle that better than they used to, but pre-rendered HTML is still safer for SEO. If search traffic matters, ask Claude to use a framework or plugin that pre-renders each page (static site generation), such as Astro or Next.js with static export. We explain why speed and rendering matter in Core Web Vitals for small business websites.

The three hosts compared

Plans and limits change, so check current pricing and terms before you launch, and set spend alerts on anything usage-based.

Netlify

Netlify is the gentlest start for a DIY site. Connect GitHub, accept the detected build settings, and the site is live with SSL on a netlify.app address. Built-in form handling means a contact form works without a separate service, which suits brochure sites. It also offers redirects, headers and serverless functions in a simple config file. This site runs on Netlify.

Vercel

Vercel builds and stewards Next.js, so new Next.js features tend to work there first with no setup. The preview workflow is excellent for reviewing changes on a phone before publishing. Read the plan terms: the hobby tier is intended for non-commercial use, so a business site generally belongs on a paid plan. Our Netlify vs Vercel comparison goes deeper.

AWS Amplify Hosting

Amplify Hosting is Amazon's Git-based host for static sites, single-page apps and server-rendered frameworks including Next.js. It deploys to AWS's global CDN with atomic deploys, feature branch environments, pull request previews and password-protected branches. Its strength is everything around it: if your business uses AWS for data, email or identity, Amplify keeps the site in the same account and billing. The trade-off is complexity. The AWS console, permissions and pay-as-you-go billing are more than most first-time DIY builders need.

Which one should you pick?

• First site, mostly static, contact form: Netlify.
• Built in Next.js, using newer server features: Vercel.
• Company already on AWS, or IT needs everything in one cloud account: AWS Amplify.
• Need logins or a database: any of the three, paired with a backend like Supabase. See what Supabase is and how authentication works.

If you outgrow static hosting and need a WordPress or PHP site instead, that is a different kind of host. Our guide to choosing web hosting covers shared and managed WordPress hosting.

Launch checklist for any of the three

1. Connect the GitHub repository and confirm the build command and output folder (dist for Vite).
2. Add environment variables in the host dashboard, never in the code.
3. Add your custom domain and update DNS as instructed. Leave your MX and email TXT records alone.
4. Confirm HTTPS is active and force redirects from http and from www (or to www, pick one).
5. Add security headers in the host's config.
6. Set up a 404 page and redirects from any old URLs. See redesigning without losing SEO.
7. Turn on two-factor authentication for the host account and set a spending alert.
8. Test the contact form end to end.

Costs to watch on modern hosts

Git-based hosts price differently from traditional hosting. Instead of one flat monthly fee, you usually pay for a plan plus usage. The usage lines that surprise DIY builders most:

• Bandwidth. A viral page, large videos or uncompressed images can push you past your plan's included transfer. Compress images and host video on a video platform.
• Build minutes. Every push triggers a build. Dozens of small pushes a day add up. Batch changes, and ask Claude to keep builds lean.
• Functions and server rendering. Pages rendered on each request and serverless functions are billed by invocations and compute time. Pre-render what you can.
• Seats. Team plans often charge per member who can deploy.
• Add-ons. Analytics, password protection, image optimization and extra form submissions can each carry a separate charge.

Set a spending limit or billing alert on day one, and check the usage page monthly for the first few months. Add your expected hosting costs to the website cost calculator so they sit alongside your domain, email and tools.

The short version

Vite builds; Netlify, Vercel and Amplify host. Start on Netlify for a simple site, choose Vercel for Next.js, and choose Amplify if you live in AWS. Whichever you pick, keep the code on GitHub so you can move later. Back to the main guide: how to build your own website with Claude. Want it set up for you? Start a project.