How to build a website and put it online

If you’ve been wanting to make your own website, let’s build a little one together! We’ll start with a page on your computer, make it your own, and then put it online so other people can visit it.

You don’t need to understand every part before you begin. We’ll introduce each tool as we use it, so you can see what it does and how it fits into your project. By the end, you’ll have a website you can share and know how to update it when you want to add something new.

For this walkthrough, we’re making a simple personal website with an introduction and a place for your projects.

Already have a website, perhaps one you made with AI? Keep that project. Open its folder in VS Code and check its README and package.json for setup instructions. If it uses React + Vite with npm, install its packages with npm install, then join us at Step 3. You can skip the sample edits in Step 4. If your site already runs locally, start at Step 5 to prepare it for publishing. Other setups, such as Next.js or plain HTML, need their own build settings rather than the Vite settings below.

1 Give your website a place to live on your computer

Before a website is something you visit in your browser, it’s a collection of files. Those files contain things like the words on the page, the colors you’ve chosen, and the instructions for what happens when someone clicks a button.

We’ll keep those files together in a project folder. Create a folder called website-projects in Finder on Mac or File Explorer on Windows. You can put it somewhere easy to find, like your Documents folder. If you already have other coding projects, make this a separate folder rather than putting it inside one of them.

Next, install and open VS Code. This is our code editor: the app we’ll use to look at the website’s files and make changes to them. Choose File → Open Folder and select website-projects.

Your folder will be empty for now, and that’s exactly where we want to start. Next, we’ll add the files that turn it into a website.

2 Choose how you want to build

There are several ways to make a website. You don’t need to learn all of them before starting! It helps to think about what you want your site to do, then choose a setup that fits.

Here are six places you can start. The suggestions about when to choose each are a starting point, rather than rules about what these tools can do.

• HTML, CSS, and JavaScript: a good place to learn the basics or make a small site without a framework. HTML describes the content, CSS styles it, and JavaScript adds behavior. Try MDN’s first website guide if you want to understand those pieces directly.
• React with Vite: useful if you want to learn React and build an interactive page from components. React is a UI library; Vite is the tool that runs and builds the project. This combination is our walkthrough’s learning setup. For a larger new application, React’s own guide recommends considering a framework. React’s setup options explain the difference.
• Next.js: a React framework to consider when you want connected pages and features that run on a server as well as in the browser. It adds structure and tools around React. Start with the Next.js guide, rather than the Vite commands below.
• Astro: worth exploring for a blog, portfolio, or other site where the main focus is content people read. You can add interactive components where you need them. See Astro’s introduction.
• Vue: another framework for building interfaces from components. If you’re comparing ways to write interactive pages, try a small example in its getting-started guide and see how the template-based approach feels to you.
• SvelteKit: a framework for building a complete site or app with Svelte components, including page routing and server features. Its introduction walks through how those parts fit together.

If you already have a working project, you don’t need to switch just because another option sounds interesting. Keep building with what you have. If you’re starting fresh and want to follow this tutorial exactly, choose React + Vite, then use Vercel for hosting and its included address first. You can decide on a custom domain once your page is ready.

Set up the React and Vite example

We’re going to use React to build our page. React lets you describe parts of a website as components, which you can reuse as your project grows. We’ll start with just one component for our page.

To help us run it, we’ll use Vite. Vite creates a starter project, shows us a preview while we work, and prepares our website for publishing later.

These tools need Node.js installed on your computer. Download the current LTS release from the official Node.js website. It includes npm, which downloads the packages a project needs. A package is a bundle of code someone has made available for other projects to use.

Once Node is installed, restart VS Code. Open your website-projects folder again, then choose Terminal → New Terminal. The terminal is where we can type instructions for our computer to run. It normally opens inside the folder you’ve selected in VS Code. You can read more in VS Code’s terminal guide.

First, check that Node and npm are ready. Type each line below and press Enter:

node --version
npm --version

Each should show a version number. If a command isn’t recognized, check that Node finished installing and restart VS Code before trying again. Using the current LTS release helps you meet Vite’s version requirements.

Now run:

npm create vite@latest my-first-website -- --template react --no-interactive

If npm asks to download create-vite, confirm it. This makes a new folder called my-first-website and adds the files for a React starter project.

Next, run these lines one at a time, waiting for each to finish:

cd my-first-website
npm install

cd means “change directory.” Here, we’re moving the terminal into our new website folder. Then npm install downloads the packages listed in that project.

You should now have a folder full of files. You don’t need to open all of them yet! Choose File → Open Folder and open my-first-website itself. We’ll work inside this folder from now on.

3 See your website in the browser

With my-first-website open in VS Code, open a new terminal and run:

npm run dev

This starts a development server on your computer. Its job is to serve your website’s files to your browser while you’re working on them.

The terminal will show a Local address, usually http://localhost:5173. Open the exact address it gives you. If that port is already being used, Vite may choose another one.

You should see the starter page. Yay, you have a website running!

For now, it’s running locally. Localhost means this computer, so that address tells your browser to look for a server on your own machine. If a friend opens the same address, their browser looks on their computer instead. That’s why a localhost link won’t let them see your page.

We’ll give your website a public home later. First, let’s make it yours. Keep the development server running as you edit. If you stop it with Ctrl+C, you can start it again with npm run dev.

4 Add your own words and style

In the file list on the left, open src/App.jsx. This is the component that describes our page. For the new practice project, replace its contents with:

export default function App() {
  return (
    <main>
      <p className="eyebrow">HELLO, INTERNET</p>
      <h1>I'm Alex. I make things.</h1>
      <p>
        Welcome to my little corner of the web.
        I'm learning to build useful, playful projects.
      </p>
      <a href="#projects">See what I'm working on</a>
      <section id="projects">
        <h2>My first project</h2>
        <p>A place to share what I'm learning.</p>
      </section>
    </main>
  )
}

Change Alex to your name and write a little introduction. The link points to #projects, which matches the section’s id. When someone clicks it, the browser moves to that section.

Save the file and look at your browser. You should see your new content appear.

Now let’s change how it looks. Open src/index.css and replace its contents with:

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fff8ef;
  color: #252238;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}
main { max-width: 760px; margin: auto; padding: 64px 24px; }
h1 { font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.1; }
.eyebrow { font-weight: 700; letter-spacing: 0.12em; }
a { color: #5836a3; font-weight: 700; }
a:focus-visible { outline: 3px solid #5836a3; outline-offset: 4px; }
section { margin-top: 64px; }

CSS controls the page’s appearance. Here, we’re choosing colors, adding space around the content, and letting the heading resize with the screen. Save again to see the difference.

Keep src/main.jsx as it is. The starter uses that file to load our component and this stylesheet. In the project’s index.html, change the text inside <title>...</title> to your website’s name. That’s what appears in the browser tab. You can also remove the starter favicon link if you don’t want the Vite logo there.

Try this: add another project, change the background color, or make the introduction a little more you. Make one change at a time and look at what happens. This is a lovely way to get familiar with the files.

If you want a little help from AI

Once you have a working page, you can ask an AI coding assistant to help you change it. Give it the relevant files and tell it what you want to keep as well as what you want to add. For example:

I’m building a one-page React + Vite portfolio. Keep the existing setup. Help me add three project cards in App.jsx and style them in index.css. Make them easy to read on a phone. Don’t add new packages or external services. Explain the changes so I can understand them, and tell me how to test them.

You can adapt this prompt to your project. Read the changes, ask about anything you don’t understand, and check the result in your browser. For a first site, keep features simple. A contact link is easier to set up than a form, which needs somewhere to send or store the submitted information.

5 Prepare the page for other people to visit

Now that the page looks how you want it to, we’ll prepare a version for publishing. This is called a production build. Vite takes our project and produces the files that the hosting service will serve to visitors.

Stop the development server with Ctrl+C, then run:

npm run build
npm run preview

If the build succeeds, you’ll see a new folder called dist. The preview command lets you look at that built version locally, usually at http://localhost:4173. Open the address printed in the terminal. This is still a local preview, not public hosting. Vite’s deployment guide explains both commands.

Check your links, make the browser narrow to see how the page fits a phone screen, and use Tab and Enter to try the link with your keyboard. Replace any sample text you don’t want to publish. If the build shows an error, fix that before moving on.

Once you’re happy with the page, we’re ready to take it online.

6 Save your project to GitHub

We’ll use GitHub to store a copy of our code online. That gives us a place to keep the project and lets our hosting service get the latest version when we update it.

GitHub works with Git, a tool that records versions of your files. Each saved version is called a commit, and the project’s files and history together are called a repository.

Install Git and create a GitHub account if you need one. Restart VS Code after installing, then run git --version in the terminal to check that it’s available.

Before uploading, review the files. Don’t include passwords, API keys, or private information. This example doesn’t need any secrets. If you add an API later, remember that Vite’s VITE_ environment variables are exposed to browser code; they aren’t a safe place for secret keys. See Vite’s environment-variable guide and GitHub’s upload guidance.

The starter’s .gitignore tells Git which files to leave out. Keep its exclusions for node_modules and dist. We want to upload the source files, package.json, and package-lock.json; the hosting service can install the packages and create its own build.

For this new project:

1. Open Source Control in VS Code and select Initialize Repository if it isn’t initialized already.
2. If Git asks for your author name and email, follow the VS Code Git quickstart. That email is recorded in your commits, so use your GitHub no-reply email if you want to keep your personal address private.
3. Review the changed files. Use the + controls to stage the files you want in your first version, enter Create my first website as the message, and select Commit.
4. Open the Command Palette with Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows. Run Publish to GitHub, sign in, and choose an available repository name. You can keep the repository private.
5. Open the repository on GitHub and check that your files are there.

If your project already has a GitHub repository, push your commit to that one rather than creating another. VS Code’s repository guide covers both options.

Your code now has an online copy. Next, we’ll use it to publish the actual website.

7 Choose a home for your website

Hosting means keeping your website somewhere browsers can reach it over the internet. Once it’s hosted, the page can stay available even when your laptop is closed.

Our example produces a static site: files that can be served directly to the browser. “Static” doesn’t mean nothing can move or respond to a click. Browser JavaScript can still make the page interactive. A site that runs code on a server for each request needs hosting that supports that server-side setup too.

Here are four options to compare:

• Vercel: our main walkthrough, with Git-connected deployments and support for static sites and supported server-rendered frameworks. Check your plan: Hobby is for personal, noncommercial use, not every kind of website.
• Netlify: another option for Git-connected deployments, static sites, and supported server-side framework features. Follow its framework setup guide for your project and check the current usage and pricing limits.
• Cloudflare Pages: an option for publishing a static site through Git or direct upload. Its Pages guide explains both. If you want a new full-stack application, also look at Workers Static Assets, Cloudflare’s route for hosting static assets alongside server code.
• GitHub Pages: useful for a personal page, project documentation, or a static learning project hosted from a repository. It doesn’t run your application’s server code. Check its repository requirements and usage restrictions; it isn’t a general-purpose free host for online businesses or SaaS.

You can host our React + Vite example on any of these with the appropriate setup. If you choose another framework, use that framework’s deployment instructions: the build command, output folder, and server requirements may change. Also check what happens when you reach a plan’s limits before relying on it for your site.

Deploy the example with Vercel

We’ll continue with Vercel so you have one complete path to follow.

Create a Vercel account, then choose Add New → Project in the dashboard. Import your GitHub repository, giving Vercel access to the project you want to deploy. Check that you’re using the right account and review the plan and usage terms before continuing. Vercel’s project guide describes this setup.

For our example, the settings should be:

• Framework Preset: Vite.
• Root Directory: the folder containing the app’s package.json. In our standalone repository, that’s the repository root.
• Build Command: npm run build.
• Output Directory: dist.
• Install Command: keep the detected default unless your project needs something different.

Vercel usually detects these settings for you. We’re checking that they match our project rather than changing them unnecessarily. See Vercel’s build settings.

When you’re ready for the website’s content to be accessible online, select Deploy. Your code repository can stay private even when your website is public.

Once the build succeeds, open the project’s production domain, usually ending in .vercel.app. This is your website’s address. You can use it as it is; a custom domain is optional.

Try that link in a private browser window while signed out of Vercel. If it asks you to log in, check that you copied the production domain rather than a protected deployment URL. You can review Settings → Deployment Protection to see who has access, keeping any private previews protected. Vercel explains those settings here.

Your public page should open without your account and continue working after you stop the local server. Once you’ve checked that, you have a link you can share. You did it!

8 Choose a domain if you want your own address

Your .vercel.app address already works, so this step is optional. A custom domain gives your site an address you choose, such as yourname.com.

The domain is the address; hosting is the service that makes the website available. You can buy the domain from one company and host the site with another. You don’t have to buy a hosting bundle just because it appears beside a domain at checkout.

The company where you register a domain is called a registrar. Here are a few places to compare:

• Namecheap: lets you compare registration and renewal prices across extensions. It includes domain privacy for eligible domains, which helps keep your personal contact information out of public registration records.
• Porkbun: lists registration, renewal, and transfer prices together, which makes ongoing costs easier to compare. It also provides privacy for supported domains.
• Cloudflare Registrar: offers registration and renewal at registry and ICANN cost, without a registrar markup. You must use Cloudflare’s DNS while the domain is registered there. You can still host the website elsewhere, including Vercel; see its registrar FAQ.
• GoDaddy: another option to compare, especially if you already manage domains there. Check the renewal total and any optional extras. Its privacy guide explains how eligible domains’ contact information is protected.

Start by searching for the same name and extension at a few registrars. Compare the first-year price and renewal price, not just the introductory offer. Check whether the name is marked premium, how many years you’re buying, and whether privacy is included for that extension. Prices can change, so use the current checkout details rather than an old price list.

For a first domain, you might compare Namecheap and Porkbun, then choose the one whose ongoing price and account setup suit you. Cloudflare is another option if you’re comfortable keeping DNS there. There’s no need to move an existing domain just to follow this tutorial.

Register the domain in an account you control, verify your contact email, and set a renewal reminder or enable auto-renew if you want it. Domain registration is renewable, not a one-time purchase that lasts forever.

You can often transfer a domain to another registrar later, but transfer rules and waiting periods apply. That’s different from connecting it to a new host, which usually only needs DNS changes. ICANN’s transfer FAQ explains the distinction and restrictions.

Connect your domain to the Vercel site

Now we’ll connect the address to the page you deployed. DNS records tell the internet where services for your domain are located, including your website and email.

For this setup, keep DNS with your current provider and update the website records there:

1. In your Vercel project, open Settings → Domains and add the domain you own.
2. Add the www version too if you want it to work, and choose which address should redirect to the other.
3. Vercel will show the DNS records needed for your project. Copy the exact type, name, and value it gives you rather than copying values from another tutorial.
4. Open DNS management at the provider that currently manages your domain’s DNS. That may be your registrar, or another provider such as Cloudflare. Add or update the matching website records. If Vercel asks for a verification record, add that too.
5. Return to Vercel and check the domain status. DNS changes can take time to appear. Once the configuration and certificate are ready, open your new address with https:// and check the page and any redirect.

Follow Vercel’s domain connection guide alongside the records in your own dashboard.

You may also see an option to change nameservers. That changes which provider manages the domain’s DNS as a whole, rather than just pointing the website to a new host. You don’t need to make that switch for this walkthrough. Leave email records and other unrelated settings alone. If you intentionally move DNS providers later, copy all existing records first, including email and verification records. Vercel’s DNS guide explains the options.

Once the domain works, it stays connected as you update the website. You can share your own address and keep improving the page behind it.

9 Keep adding to it

When you want to update your website, open the same project in VS Code. Start npm run dev, make your changes, and check them locally. Then run npm run build again.

If everything looks good, stage and commit your changes in Source Control, then push them to GitHub. With Vercel’s Git integration, a push to the configured production branch triggers a new production deployment. Wait for that deployment to succeed and check your public page. Other branches can produce preview deployments. Vercel’s Git guide explains how the branches connect to deployments.

So the process becomes: make a change on your computer, save a version in Git, send it to GitHub, and let Vercel publish it. You don’t need to set up a new website each time.

A few things to check if you get stuck

The terminal can’t find package.json. Make sure you opened my-first-website itself, then start a new terminal in that folder.

The local page won’t open. Check that the server is still running and use the address it prints, including the port number.

The Vercel build fails. Read the first useful error in the build log. Check the root directory, supported Node version, and whether all the files were committed. Also check capitalization: an import of Photo.png may fail if the file is actually named photo.png.

A page such as /about gives a 404 on refresh. Our example uses a section link, so it doesn’t need extra routing. If you later add client-side routes, follow Vercel’s Vite routing instructions for that setup.

You can keep building from here, one small change at a time. Add a project you’re proud of, a little more about yourself, or something useful you want to share. You now know how to make a page, see your changes, and put them online. Have fun making it your own!