How to build a modern website from scratch: GitHub, Vercel, and your domain (a true beginner's guide)

We wrote a post on how valgard.com was built and what it took. Several people said the same thing back: 'Great — but I don't even know where to start.' So this is that post — the true beginner's version. If you've never made a website, never touched code, and don't know what half these words mean, this is for you. We'll go slowly, in order, and explain every term the first time it shows up.

By the end you'll understand the four moving pieces and how they fit together: a place to store your site's code (GitHub), a service that turns that code into a live website (Vercel), a web address (your domain, bought somewhere like GoDaddy), and an AI assistant that writes the actual code for you (like Claude or ChatGPT). You don't have to be a programmer. You have to be patient and willing to follow steps.

The 30-second mental model

Here's the whole thing in plain English, so the steps make sense as you go:

• Your website is a folder of files (the 'code'). An AI assistant writes those files for you.
• GitHub is where that folder lives online — think of it as Google Drive, but built for code.
• Vercel watches your GitHub folder. Every time the files change, Vercel rebuilds your live website automatically. It's the thing that makes your site actually appear on the internet.
• Your domain (yourname.com) is the address people type. You buy it from a registrar like GoDaddy and point it at Vercel.

That's it. Four pieces. Let's set them up one at a time.

Step 1 — Create a GitHub account and an empty repository

GitHub is free. A 'repository' (everyone shortens it to 'repo') is just one project's folder.

1. Go to github.com and sign up. Pick a username you won't be embarrassed by later.
2. Once you're in, click the '+' in the top-right corner and choose 'New repository.'
3. Give it a name (like 'my-site'). Leave it set to 'Private' if you want, and check the box that says 'Add a README file' — that just makes sure the repo isn't completely empty.
4. Click 'Create repository.' Done. You now have an online home for your website's files.

You don't need to understand Git commands yet. If you use an AI coding tool, it handles the technical parts of putting files into this repo for you.

Step 2 — Sign up for Vercel and connect it to GitHub

Vercel is the service that turns your repo into a live website. It also has a generous free tier — you can run a real site for $0 until you get meaningful traffic.

1. Go to vercel.com and click 'Sign Up.' Choose 'Continue with GitHub' — this links the two accounts so Vercel can see your repos.
2. Approve the permissions it asks for. This is normal; it's how Vercel watches your code.
3. Click 'Add New… → Project.' You'll see a list of your GitHub repositories. Pick the one you just made.
4. Vercel will ask about build settings. If your site is a standard framework (like Next.js, which we recommend), it detects everything automatically — just click 'Deploy.'
5. Wait a minute. Vercel gives you a live link that ends in '.vercel.app'. Click it — that's your website, already on the internet.

At this point you have a live site at a temporary address. Now let's give it a real one.

Step 3 — Buy a domain and connect it (GoDaddy → Vercel)

A domain is your address, like valgard.com. You rent it (usually ~$12–$20/year) from a 'registrar.' GoDaddy is one of the most common, so we'll use it — but the idea is identical anywhere.

1. On GoDaddy, search for the domain you want and buy it. Skip the upsells (you don't need their website builder, email, or 'premium DNS' for this).
2. Now go back to Vercel → your project → 'Settings' → 'Domains.' Type your domain (yourname.com) and click 'Add.'
3. Vercel will show you the DNS records to create. For GoDaddy, you'll add these in GoDaddy under 'My Products → your domain → DNS → Manage DNS.'

The two records Vercel asks for are almost always these. In GoDaddy's DNS screen, add:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

The 'A' record points your bare domain (yourname.com) at Vercel's servers. The 'CNAME' points the 'www' version at Vercel too. Save both. If GoDaddy already has a default 'A' record on '@' pointing somewhere else (it often does — a 'Parked' page), edit that one instead of adding a duplicate.

Then wait. DNS changes can take anywhere from a few minutes to a few hours to spread across the internet ('propagate' is the jargon). Vercel's Domains screen shows a green checkmark when it's working. Don't panic during the wait — this step scares everyone the first time and then just works.

Beginner gotcha: pick ONE version of your domain as the real one — either yourname.com or www.yourname.com — and let the other redirect to it. Vercel does this for you; just don't fight it by setting conflicting records.

Step 4 — The part that used to require a developer: let AI write the site

Here's the shift that makes this possible for non-coders. You don't have to write the code — you describe what you want to an AI assistant (Claude, ChatGPT, or a coding-focused tool), and it writes the files. Your job becomes directing and reviewing, not typing code.

The single most useful thing is a good starting prompt. Copy this, fill in the brackets, and paste it into your AI assistant to scaffold the framework of a real site:

You are helping me, a non-developer, build a marketing website. I will
deploy it on Vercel from a GitHub repo.

Set up a Next.js project (App Router, TypeScript) styled with Tailwind CSS.
Requirements:
- A fast, responsive, single-page homepage with: a header/nav, a hero
  section with a headline and a call-to-action button, three feature
  cards, and a footer.
- A clean, professional color scheme: [navy #043F63 and gold #C9A94A].
- Placeholder copy for a company called [COMPANY] that does [WHAT YOU DO].
- Good SEO defaults: a page title, meta description, and clean headings.
- It must deploy to Vercel with zero extra configuration.

Work step by step. For every file you create, show me the full file and
explain in plain English what it does and why. Assume I have never coded.
At the end, tell me exactly how to get these files into my GitHub repo.

Notice what that prompt does: it sets the tools (Next.js, Tailwind, Vercel), the exact page layout, the colors and copy, and — most importantly — tells the AI to explain everything to a beginner and end with how to get the files into GitHub. Specific prompts get good results; vague ones ('make me a website') get generic mush.

Step 5 — The loop: how you make changes from now on

Once the site is live, every change follows the same simple loop, forever:

1. Tell the AI what you want changed ('make the hero headline bigger and change it to say X').
2. It updates the files.
3. The files get pushed to your GitHub repo (the AI tool or a one-click button does this).
4. Vercel notices the change and automatically rebuilds your live site in about a minute.
5. Refresh your site — the change is live.

That's the whole workflow professionals use, minus the parts you don't need yet. Describe, review, push, auto-deploy.

A few honest warnings before you start

• Be patient. Your first setup will have a confusing moment — a DNS record that won't verify, a build that fails with a red error. That's normal. Copy the error, paste it to your AI assistant, and ask 'what does this mean and how do I fix it?' It almost always knows.
• Never paste passwords or secret keys into your code. If something needs a secret (an API key, for example), it goes in Vercel's 'Environment Variables' settings, never in the files themselves. Your AI assistant will tell you when this applies.
• Free is fine to start. GitHub, Vercel's hobby tier, and an AI assistant's basic plan will get a real site live for the cost of the domain. Don't buy things you don't need yet.
• Change one thing at a time. When you're learning, big sweeping requests are hard to review. Small changes are easy to check and easy to undo.

That's the whole thing

Four pieces — GitHub to store it, Vercel to serve it, a domain to name it, and an AI assistant to write it. None of them require you to be a programmer. They require you to follow steps and stay patient through the one or two confusing moments. If you want to see what's possible once you're comfortable, poke around the live, working software demos on this site — they were built the exact same way, just with more steps stacked on top of this same foundation.