How does a website work? The five layers explained

Every website is five layers stacked up

Every website, from a one-page bakery site to a big online store, is built from the same five layers. From the bottom up they are the domain, the hosting, the platform, the design and the content. Once you can see the layers, website pricing, builder choices and the question “can I move my site later?” all get much easier to answer.

Think of it like a shop on a street. The domain is the street address. Hosting is the building. The platform is the shop’s fittings and wiring. The design is the paint and signs. The content is what is on the shelves.

Website builders bundle several of these layers into one product. That is what makes them easy. It is also what makes some of them hard to leave, because the layers are glued together.

What happens when someone visits your site

Here is the short version of what happens in the second after someone types your address:

1. The browser looks up your domain. The DNS system, the internet’s phone book, returns the address of the server that hosts your site.
2. The browser asks that server for the page. The connection is encrypted with an SSL certificate, which is what shows the padlock.
3. The platform builds the page. It pulls your content from storage or a database and wraps it in your design.
4. The server sends back files. These are HTML (the structure), CSS (the styling) and JavaScript (the interactive parts), plus images.
5. The browser draws the page. Many platforms speed this up with a CDN (content delivery network), a network of servers that keeps copies of your files close to visitors.

Speed matters here. Google’s Core Web Vitals call a page “good” when its main content loads in 2.5 seconds or less, it responds to taps and clicks within 200 milliseconds, and its layout shift score is 0.1 or less. And in September 2026, mobile accounted for 49.1% of US web page views, so the phone version matters as much as the desktop one.

Layer 1: the domain

The domain name is your address, like yourbusiness.com. You rent it by the year from a registrar. A .com renews for $11.08 a year at Porkbun, $18.48 at Namecheap and $22.99 at GoDaddy.

Who controls it: whoever’s account it is registered in. This is the one layer you should always hold yourself, because your email and your search rankings depend on it.

Can it move? Yes. 16 of the 17 platforms on our exit score get full marks for the domain. Square Online gets 1 point because its docs don’t confirm how to transfer a domain out. If the domain sits at your own registrar, you just point it at the new host. If a builder registered it for you, you transfer it out first.

Layer 2: hosting

Hosting is the always-on computer that stores your site and answers visitor requests. It also handles things like the SSL certificate, backups and uptime, the share of time your site is online.

Who controls it: on a builder, the builder does. On self-hosted WordPress, you choose a host, such as shared hosting with intro prices from $2.99 a month that renew at $9.99 to $17.99 a month on the entry plans we checked or managed hosting like Kinsta at $30 a month billed yearly.

Can it move? Only if the platform layer above it can run somewhere else. Wix’s help center says “your site must run on Wix’s servers.” Framer says it does not offer HTML export for self-hosting.

Layer 3: the platform

The platform is the software that runs your site and gives you an editor. It might be a CMS like WordPress, a hosted builder like Squarespace, or an AI tool that writes code for you, like Lovable.

The platform decides most of what you can do: blog, store, bookings, memberships, forms and SEO settings. It also decides what you can take with you.

WordPress is the most common platform by far. W3Techs reports it runs 40.2% of all websites. Shopify runs 5.4%, Wix 4.2% and Squarespace 2.4%. About 31.5% of sites use no CMS that W3Techs can detect.

Can it move? Open-source software like WordPress can be installed anywhere. Proprietary builders cannot. AI builders like Lovable, Bolt and v0 produce ordinary code that can run elsewhere, but you need a developer to run it.

Layer 4: the design

The design is how the site looks and is laid out: the template or theme, colors, fonts, spacing and any custom code. Our template vs theme entry explains the difference.

Can it move? This is where most builders lock you in. On self-hosted WordPress the theme is a set of files you own. On Squarespace and Wix, the design cannot leave the platform at all. Webflow can export a static copy of the design as HTML, CSS and JavaScript on paid workspace plans.

Layer 5: the content

Content is everything you wrote or uploaded: pages, blog posts, images, videos, products, form entries and customer lists.

Can it move? Usually in part. The common formats are:

• WordPress XML (WXR): pages, posts and comments. WordPress, WordPress.com and Squarespace export this. It links to images rather than including them.
• CSV files: spreadsheet-style lists of products, orders, contacts or CMS items. Shopify, Squarespace, Wix and Webflow offer some of these.
• Source code: on Lovable, Bolt and v0, the content is part of the code, and data sits in a database.

Content is what you spent the most time creating. Know how it leaves before you build.

Where each builder bundles or separates the layers

This table shows how each platform handles the layers. The more a platform bundles, the less you manage, and usually the less you can take with you.

The all-in-one builders

Squarespace, Wix and Framer bundle hosting, platform and design into one plan and require you to stay on their servers. That is why they are simple to start with. Squarespace includes hosting, a free first-year domain on annual plans, and on Core and up, one Google Workspace account for the first year. Framer’s hosting includes pre-rendering, image optimization and a global CDN that you never configure.

The price of that simplicity is portability. Squarespace scores 5 out of 10 on our exit score, Wix 3 and Framer 2. Square Online, which ties a store to Square’s registers and payments, also bundles every layer and scores 2.

The builders with an escape hatch

Webflow also bundles hosting, but paid workspace plans can export your site as static HTML, CSS and JavaScript. That copies the design layer, though the CMS, forms and store stop working outside Webflow. Shopify lets your products, orders and customers leave as CSV files, but its Liquid themes run only on Shopify. Duda (Agency plan and up) and Carrd (Pro Plus) can also download a static copy of your site, though features that need their servers, like forms or a store, stop working.

The separated stack: self-hosted WordPress

With self-hosted WordPress, every layer is a separate choice. You pick the registrar, the host, the theme and the plugins. It takes more setup and upkeep, but you own every file and the database. We build on WordPress every week for exactly that reason: no layer is tied to one company. It scores 10 out of 10 on our exit score.

WordPress.com sits in between. It is WordPress with the hosting layer managed for you. Content exports in the same XML format as self-hosted WordPress, and Business and Commerce plans can download a full backup.

Two more platforms follow the same open model. WooCommerce is a free store plugin for WordPress, so the store sits in your own database. Ghost is open-source publishing software you can run on Ghost(Pro) or your own server; posts export as JSON and members as CSV.

The code generators: Lovable, Bolt and v0

AI app builders write real code for you. The platform and design layers are in that code. Lovable syncs to GitHub and documents how to deploy elsewhere. Bolt has two-way GitHub sync. v0 makes your GitHub repository “the source of truth” and deploys to Vercel, whose hosting is billed separately.

The catch is skill, not access. You get everything, but someone has to run a database, set up hosting and keep the code updated.

One site, three ways: a worked example

Picture a small bakery that wants a five-page site with a menu, an about page, a contact form and a blog. Here is how the layers line up on three very different platforms.

On Squarespace

The bakery buys one plan. Squarespace Core at $29 a month billed yearly covers hosting, the platform and the design, and the domain is free for the first year. Content is the only layer the owner really manages. If the bakery leaves, the pages and one blog export as WordPress XML, but the design stays behind.

On self-hosted WordPress

The bakery buys a domain from a registrar, hosting from a host, and picks a theme. That is three bills and three logins. Someone has to run updates and backups. In return, every layer can be copied to another host, and the theme and plugins are files the bakery owns.

On Lovable

The bakery describes the site in a chat, and Lovable writes the code, hosts it and adds a database if needed. The design and content live inside that code. Custom domains need a paid plan, such as Pro at $25 a month billed monthly. If the bakery leaves, it gets the full code through GitHub, but it needs a developer to host and maintain it.

None of these is wrong. They put the work, the cost and the control in different places.

Why the layers matter when you choose

Ask three questions about any platform before you commit:

1. Which layers does it bundle? Bundled layers mean fewer bills and less upkeep.
2. Which layers can I keep if I leave? At minimum, keep the domain in your own account and make sure your content can export.
3. Who will look after each layer? If you do not want to manage hosting and updates, pick a platform that handles them.

Our exit scores rate all 17 platforms on how much of each layer you can take with you.

What to do next

• Get the domain and hosting layers right with our domains and hosting guide.
• Price all five layers over three years in how much a website costs.
• Pick a platform with the builder decision guide.