Build a Website Without a Website Builder: the Full Walkthrough.

Skipping this step is the single biggest cause of bad results. Without clear inputs the session turns into 40 rounds of "hmm, not quite", you burn your usage, and the site still looks generic. Gather these first:

1. Your website copy, written by you, final, in 1 Google Doc. This is the real work of the whole method and nobody can do it for you. Every word that will appear on the site, in your own voice, written as if it were already live. The site can only sound like you if the words are yours. Do not ask Claude to write this part: left to itself it pads everything with filler words, and your site ends up reading like everyone else's. The prompt below exists to hold it to your doc, word for word.

2. Your brand assets. Logo files, exact colour codes, font names. If you have a brand guideline from a designer, even an old one, use it. If you have nothing, pick 2 colours and 2 fonts before you start, not during.

3. Your sections. The ordered list of what the page contains, top to bottom. The next section of this guide gives you 2 proven structures to steal.

4. Your links. Every social, every project, every external page you will point to, gathered into 1 file. Hunting for links mid-build is how half-finished buttons ship.

5. Your design references. 3 to 5 sites or screenshots you love, ideally with a note on what you love about each: the scroll feel, the type, the spacing. A Pinterest board works. "Make it beautiful" does not.

Here are 2 structures pulled from live sites built exactly this way. Steal whichever matches what you are.

For a personal brand (this is juneaye.com): 5 full-screen sections, each with exactly 1 job and at most 1 link out.

Hero. Your name or monogram, 1 line of what you are, 1 line of credibility, and a scroll cue. No paragraph. Nobody reads a paragraph before they know who you are.

01, Why. Your mission in 2 or 3 sentences, numbered like a chapter. 1 link out to wherever the deeper story lives.

02, What. What you do and for whom, with your credibility markers. 1 link to the business or offer.

03, Who. The personal paragraph. Where you are from, what your life looks like, the human details people actually remember. 1 link to your long-form home, a Substack or a blog.

Links. The final section holds the socials and the newsletter. Everything collected in 1 place, so no section above it needed a link wall.

The discipline is the design. 1 job per section, 1 link per section, and the page stays calm.

For a business or content brand (this is less-tools.com): the argument is the hero.

Lead. Open with your thesis argued in full paragraphs, not a slogan over a stock photo. The 1 belief your business runs on, stated plainly enough that the wrong visitor leaves and the right one keeps scrolling.

The product. Show the actual thing: the stack, the service, the offer, laid out in full rather than teased.

Depth sections. 1 section per topic you want to own, each linking into its own page.

The library. Your directory, archive, or catalogue. Proof of work.

The latest. Fresh content, pulled in automatically, so the page never looks abandoned.

The opt-in. The email form, on every page, wired to your list. More on that below, because it is the step everyone forgets.

These are written for Claude Code, which writes files directly onto your machine. The chat version works too, you just save the files yourself.

Prompt 1, the brief. Run this once you have the 5 things gathered:

Build me a single landing page as 1 HTML file that I can open locally in Chrome before anything goes live. Follow the copy in this Google Doc exactly: [link]. Do not rewrite it, do not add filler words, and do not add sections I have not asked for. Brand assets and colours are here: [files or codes]. My links are here: [file]. Design references are here: [links or images]. Make it feel alive as I scroll, and build it mobile first. Show me the file locally and wait for my notes before changing anything else.

The 2 clauses doing the heavy lifting are "follow the copy exactly" and "wait for my notes". The first is the whole point: the copy is yours, and without that clause Claude will quietly rewrite it and slip in filler words of its own, which it generally does. The second stops it sprinting 5 versions ahead of your feedback.

Prompt 2, the revision loop. Look at the file in Chrome, then give notes in plain words, batched:

3 notes. The hero is too tall, I want the first section visible without scrolling. Section 02 feels cramped, add more padding. The buttons are too loud, make them quieter than the headlines. Change nothing else.

"Change nothing else" matters. Without it, every revision pass invents 2 improvements you did not ask for, and you spend the session undoing them.

Prompt 3, the phone pass. Before anything goes live:

Check the whole page at phone width. Nothing should overflow sideways, tap targets need to be big enough for a thumb, and the hero must fit 1 phone screen. Fix what fails and tell me what you changed.

The gap between a generic result and a good one is mostly vocabulary. You do not need to design, you need to describe. These are the words worth knowing, each with a line you can say as-is.

Hero. The first full screen. "Make the hero just the headline, 1 line of subtext, and 1 button. Everything else moves down."

Above the fold. What shows before any scrolling. "I want the offer and the button above the fold on a laptop."

Section and panel. A section is 1 horizontal band of the page, a panel is a boxed block inside it. "Break the about section into 2 panels, story left, photo right."

Padding. The air inside a block, between its edge and its content. Cramped sites are almost always a padding problem. "Double the padding inside every section on desktop."

Spacing, or whitespace. The air between blocks. "More space between sections. Let the page breathe, I want it to feel expensive, not busy."

Sticky nav. A menu bar that stays put while you scroll. "Give me a sticky nav that appears after the hero and shrinks as I scroll."

Scroll interactions. Things that move as you scroll: sections fading in, images drifting slower than the page. "Fade each section in as it enters the screen, subtle, no bouncing."

Breakpoint, and mobile first. The widths where the layout rearranges, and the instruction to design for phones before desktops. "Build it mobile first, then show me the desktop layout."

And 2 ready-made direction prompts for when the first draft looks fine but flat:

The page reads well but feels static. Add 1 scroll interaction per section, all subtle: fades and slow drifts, nothing that spins or bounces. Keep every animation under half a second.

This looks like a template. Make 1 bold choice: an oversized headline, an off-centre hero, or an unexpected background colour on a single section. Show me 2 options as separate files.

Once the file looks right in Chrome, this is the part where you stop paying for a builder. Roughly an hour the first time.

1. Your domain is already sorted, wherever you bought it. You do not have to transfer it. If you want it somewhere cleaner, Spaceship renews at the price it advertises and has an AI assistant, Alf, that fixes DNS settings for you, which is genuinely useful in step 3.

2. Register for Cloudflare and add your domain. Free account, add the domain, and Cloudflare reads in your existing DNS records.

3. Update the nameservers at your registrar to the 2 Cloudflare gives you. This is the step that sounds scary and is actually 2 copy-pastes. It can take a few hours to settle. For a root domain like yoursite.com, Cloudflare Pages needs the domain on Cloudflare's DNS, so this step is not optional.

4. Push the files to a GitHub repo. New free repository, upload the folder. Claude Code will do this whole step for you if you say "put this site in a new GitHub repo and push it".

5. Connect the repo to Cloudflare Pages. Create a Pages project, point it at the repo, leave the build command empty for a plain HTML site, and add your domain in the custom domains tab. SSL is included and automatic, so the padlock is handled.

From here, every time the repo updates, the live site updates with it, usually in under a minute. That connection is also how you hand updates to someone else later: share the repo, not a login.

Wrangler is Cloudflare's command line tool, and a skill is a small instruction file that teaches Claude Code a repeatable job. Set one up right after launch and "add my analytics tag and publish it" becomes 1 sentence instead of a small project.

Strictly, the GitHub connection already deploys for you on every push. The skill earns its place because it gives Claude the whole lane: it knows where the site lives, how it deploys, and what to check after, so future changes need zero remembering from you. The prompt:

Set up a Wrangler skill for this site. Install and authenticate Wrangler, then write a skill file that records where this site's files live, how it deploys to my Cloudflare project, and what to verify after each deploy. From now on, when I say "publish", you publish and confirm the live URL.

First jobs to hand it: adding your analytics tag, and an SEO pass. Both are below.

Do this the day you go live, not later. The builder used to handle your form, and a site collecting emails into nowhere for 3 weeks is a loss you do not get back.

The important detail is syncing to a specific audience, not a general list. In Flodesk, create a segment for this site, then create a form attached to that segment and copy its embed code. Then:

Here is my Flodesk form embed code: [paste]. Wire it into the email section of the site, restyle it to match my fonts and colours, and keep the success message visible after signup. Do not change anything else on the page.

Then test it like you mean it. Submit a real address, watch it land in the right segment, and check the confirmation behaviour before you tell a single person the site exists. A form that looks wired but posts nowhere is the silent version of the 3-week loss above.

A builder does this plumbing silently. Built this way, the site has exactly the SEO you asked for and none you did not, so ask once, properly:

Run an SEO pass on this site. Every page needs a unique title under 60 characters and a meta description under 155, open graph tags with a social share image, a favicon, 1 h1 per page, canonical tags, a sitemap.xml and a robots.txt. List everything you changed so I can review it.

The 2 pieces worth checking by hand: the title and description, because they are your ad in Google and Claude's first draft of them is usually flat, and the share image, because that is what shows when anyone posts your link. Then create a free Google Search Console account, verify the domain, and submit the sitemap so Google actually knows the site exists rather than finding it eventually.

A builder hands you visitor stats and a cookie banner on day 1. Build it yourself and you get neither until you ask, which is mostly fine, because the free version is better than what most builders bundle.

Start with analytics that need no banner at all. Cloudflare Web Analytics is free, sets no cookies, and is 1 script tag from the same dashboard already serving your site. No cookies means no consent banner is required. For a brochure site or a portfolio, that is the entire job.

You only need Google Analytics if you are tracking a specific action, like clicks out to an app store, a booking page, or an affiliate link. It sets cookies, and the moment you add it, you owe your visitors a banner.

Here is the part almost everyone gets wrong. The banner's default should depend on where the visitor is, not be 1 setting for the whole world. The UK and the EEA require you to ask before you store anything. Most of everywhere else, the US included, lets you default to on and offer a way out. Pick a single global default and you lose either way: deny everyone and you throw away most of your data for no legal benefit, accept everyone and you are offside in the country you probably live in.

The prompt that gets it right the first time:

Add Google Analytics 4 with measurement ID [yours], plus a cookie banner. Use Google Consent Mode v2 with 2 default calls: everything denied for a region list of the EEA plus GB and CH, everything granted for everyone else. Both must run before the config call. Show the banner on every page rather than only the homepage, and store the answer in localStorage. Important: if someone has already declined, actively re-deny on every page load, because outside the opt-in countries the default is granted.

That last sentence is not padding. The obvious way to write this is to read the stored answer and stop there, which quietly leaves tracking switched on for someone who clicked Decline, because the granted default was never overridden. Nothing looks broken, which is the worst kind of bug.

Worth knowing before you agonise over the wording: under Consent Mode, denied is not off. Google keeps sending cookieless pings, so your visitor counts and traffic sources survive people saying no. You lose the ability to follow individuals, not the ability to count. If you later run ads on Meta, TikTok or Reddit, their pixels hang off the same switch: keep the pixel IDs in 1 place in your code, leave them blank until you actually have an ad account, and have the banner load them only after consent.

The trade you are making is the content management system. A builder gives you a dashboard anyone can log into. Static files give you a repo, and in practice you will ask Claude for every change, which takes a minute and works fine, but it is only ever your minute. So keep the builder when:

Somebody else updates the site. A partner, an assistant, a client. Sharing the GitHub repo works for a team that can use it, and for everyone else this is the single best reason to keep paying.

The site already has SEO history. Years of WordPress behind it, rankings you built slowly, analytics with real data in them. You do not restart that to save $200 a year. That is not a saving, it is setting fire to an asset you spent years building. This method is for simple sites that mainly house your information, and a personal brand site is the clearest case, because it was never going to win on search anyway.

The design is the product. Showit, Framer and Webflow do things that are the reason someone hired a designer in the first place. If the look is what the site is selling, that is not overhead.

You sell physical products. Inventory, shipping, tax, abandoned carts. Do not build that. Use Shopify. The same goes for a funnel that is already deeply integrated and converting: fill the funnel, do not rebuild the plumbing under it.

You publish often. Every post is a new file here, with no scheduling and no drafts view. A real blog with a real CMS is worth paying for if you use it weekly.

You want to never think about it. Legitimate purchase. Some people should pay $200 a year to make a category of problem disappear. Our pick for that case is in the best website builder review, and if you are cancelling, check the renewal date first so you are not throwing away 11 paid months. The subscription audit covers what else is quietly renewing.