Why My Demo Sites Live on Subdomains

Most portfolios show you pictures of websites. A grid of screenshots, maybe a mockup floating on a laptop, and a paragraph explaining what you are looking at.

I stopped doing that. Now when I want to show a barbershop what their site could be, I send them barber.ericjokl.com. It is a real site. They can open it on their phone, tap through the booking flow, and see how fast it loads on a bad connection in the back of the shop.

That is a completely different conversation than "here is a JPEG."

A screenshot only proves you can make a picture

The gap between a design and a working website is where most of the difficulty lives.

A mockup does not tell you whether the page loads in under two seconds. It does not tell you whether the booking button is reachable with a thumb. It does not tell you whether the form actually sends. Those are the parts that decide whether a site earns anything, and they are exactly the parts a picture cannot show.

There is also a plainer problem: most business owners cannot read a wireframe. It is not their job to. Show someone a grey box diagram and ask if it works for them and you will get a polite yes that means nothing. Hand them a live site and they will tell you in about ten seconds — the same ten seconds their customers are going to give it.

What a demo site actually is

Mine are finished builds for a specific kind of business, hosted on their own subdomain:

• barber.ericjokl.com — services, pricing, and booking, built for someone deciding on their phone.
• podcast.ericjokl.com — episode pages, show notes, and every subscribe link in one place.

Neither is a business I run. They are examples. But they are not fake either — every link works, every page is real, and if a barbershop wanted it tomorrow the job is mostly swapping in their name, their services, and their photos.

That does two things at once. It shows a prospect what they would be getting, and it means the hard decisions are already made before the project starts. The page order, the booking flow, the way the phone number follows you down the screen — that work is done, which makes the build faster and cheaper than starting from nothing.

Why a subdomain rather than a folder

I could have put these at ericjokl.com/demos/barber. I did not, for one reason: a demo has to feel like a real site, and a page nested three levels inside somebody's portfolio does not.

When a barbershop owner opens barber.ericjokl.com, the address bar says something that looks like a website for a barbershop. The navigation is the barbershop's navigation. There is no portfolio header sitting on top reminding them they are inside somebody's showcase. The illusion holds, which is the entire point.

A subfolder would break that. It would also mean the demo's navigation and my portfolio's navigation are fighting over the same page.

The trade you are making

Subdomains are treated as mostly separate properties by search engines. Authority flows between them, but not as directly as it does inside a single site. So a subdomain does not launch with the full weight of the parent domain behind it.

For a demo, that is fine — I am not trying to rank barber.ericjokl.com for "barbershop near me." Its job is to be something I can send to a person.

But it means you should think about what the thing is for before you pick:

Same audience, same site → use a folder. A blog about web design and a services page for web design are read by the same person. Those belong together, and the folder inherits authority most directly.

Needs to feel like its own site → use a subdomain. Demos, docs, an app, a store with a completely different shape. Shared brand, separate experience.

Has to stand alone → use its own domain. Something you might sell, raise money for, or hand to a partner. Tying that to your personal domain creates a problem later.

The wrong answer is the accidental one: registering a new domain because it felt like the obvious move, then starting from zero on a site nobody links to.

Connecting them properly

Here is the part people skip. They set up the subdomain, launch it, and never link it to anything.

A sitemap can only list URLs on its own host. My sitemap at ericjokl.com cannot include barber.ericjokl.com. That surprises people. It means links are the only way those pages get discovered.

So three things have to be true:

1. Real links in the HTML, both directions. Every property links back to the main site; the main site links out to every property from the footer of every page. Ordinary anchor tags, present in the server-rendered HTML — not a button that only appears after JavaScript runs.

2. A hub page. One page listing every property with a sentence about what each one is. It gives visitors a map, gives crawlers a dense set of links in a relevant context, and gives you one URL to point at when someone asks what you do.

3. Honest structured data. Here is a mistake I made and then fixed: I originally put the demo URLs in the sameAs array of my Person schema. That was wrong. sameAs means "these URLs refer to the same entity" — it is for your LinkedIn, your GitHub, your social profiles. A demo site is not another home for me, it is a thing I made. Putting it in sameAs tells Google something untrue. The demos belong in an ItemList on the hub page instead.

Short paths for saying out loud

One small thing that pays off constantly: set up redirects on the main domain for the paths people will guess.

ericjokl.com/barber goes to barber.ericjokl.com. ericjokl.com/podcast goes to podcast.ericjokl.com.

Now there is one thing to say on a call, in a video, on the back of a card — and you never have to explain what a subdomain is to somebody who has never thought about it.

The actual point

The structure is not the interesting part. The interesting part is that building the demo forces you to finish the thinking.

You cannot host a fake booking flow. Either it works or it obviously does not. Committing to putting the thing online, at a real address, on a real phone, is what keeps a portfolio honest — and it turns out that is also the most persuasive thing you can hand somebody.