LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • Adding a custom domain
  • 1. Add a new domain to your Project
  • 2. Add the DNS records
  • 3. Verify and publish
  • Publish to Staging
  • Standardizing on root or www using Cloudflare
  • 1: Add a DNS record for the other domain
  • 2a: Redirect root to www
  • 2b: Redirect www to root
  • Exporting Projects
  • Removing a domain
  • Domain issues
  • DNS provider doesn't allow CNAME flattening
  • Worker not found
  • Adding a domain with a country code like .co.uk

Was this helpful?

Edit on GitHub
  1. university
  2. Foundations

Publishing & Custom Domains

Learn how to connect a custom domain to your Project.

PreviousShare Links & Transferring ProjectsNextCore Components

Last updated 6 months ago

Was this helpful?

If your DNS provider doesn’t allow you to add a CNAME at the apex, jump to .

Adding a custom domain

These steps will show you how to add a custom domain to your Project.

1. Add a new domain to your Project

Click "Publish" in the top bar, then “Add a new domain”.

Enter the domain or subdomain you want the site to be available at, for example, www.example.com or example.com.

After entering your domain, you will be provided with DNS records, which can be manually added to your DNS or automatically through Entri.

2. Add the DNS records

Next, you need to add the DNS records to your DNS provider either manually or automatically.

Option 1: Manually add DNS records

You can configure your custom domain manually by adding the provided CNAME and TXT records to your DNS.

  1. Open your DNS provider

  2. Create a CNAME record

    1. Add a new record.

    2. Set the type to CNAME.

    3. Copy the Name and Value from Webstudio.

    4. Paste them into the corresponding fields in your DNS provider. Note that the DNS provider might label the Value as "Target" or "Content."

  3. Create a TXT record

    1. Add a new record.

    2. Set the type to TXT.

    3. Copy the Name and Value from Webstudio.

    4. Paste them into the corresponding fields in your DNS provider. Note that the DNS provider might label the Value as "Content".

Option 2: Automatically add DNS records with Entri

The Entri option makes configuring your domain extremely simple — no puzzling registrar UIs. You can do it without leaving Webstudio Builder in just a couple of clicks.

  1. Click “Configure automatically”.

  2. Click “Continue” on the Entri configurator. This process will analyze your root domain and detect your DNS settings.

  3. Click on the Authorize button to redirect you to your DNS provider site. Log in, if required, and approve the configuration.

  4. Return to Webstudio and complete the setup.

3. Verify and publish

Click "Check status" and once it's verified, republish your site.

Verification may take up to 24 hours but usually takes only a few minutes.

Publishing currently takes around 45 seconds. During publishing, your Project is built into a JavaScript app and deployed to 300+ servers around the world.

Once your site is live, you can visit it by clicking the open icon next to the green checkmark.


Publish to Staging

You can publish your Project to a separate domain for testing before going live by only checking your staging domain, which can be the default Project subdomain or a custom domain.

Every Project comes with a subdomain ending in "wstd.io". You can use this subdomain as your site’s staging environment. The domain is automatically no-indexed if you add a custom domain.

When publishing the site, optionally select the domain(s) you want to publish to. The workflow for testing/approval would be:

  1. Make changes in the Builder

  2. Open the publish dialog

  3. Ensure only your subdomain is checked

  4. Publish and share with your team/client

  5. Upon approval, reopen the publish dialog and check your live/production domain.

  6. Publish


Standardizing on root or www using Cloudflare

This will show you how to standardize on either www or your root domain using Cloudflare.

Root domain is synonymous with apex, bare, and naked. An example is example.com.

  1. Choose whether you want to use www or your root domain

  2. Add your choice to Webstudio (e.g., www.example.com or example.com)

  3. Add the provided records to your DNS

  4. Redirect the domain you did not add to the domain you added by following the next sections.

1: Add a DNS record for the other domain

Cloudflare rules can't apply to traffic that isn't proxied through Cloudflare. Therefore, adding a DNS record for the domain you are not using is essential. Cloudflare offers an IP address for this exact use case.

Create an A record and point it to 192.0.2.1.

Next, follow one of the subsequent options depending on your desired setup.

2a: Redirect root to www

If you are using www then it's important to redirect the root domain to it. For example, redirect example.com to www.example.com.

2b: Redirect www to root

While www is merely a subdomain and not technically different than xyz.example.com, old habits die hard, and some users may still type in www to get to your site. Therefore, it's good practice to redirect it to your root so they can reach your site.


Exporting Projects

Webstudio can be self-hosted, putting you in control of your hosting, pricing, security, and compliance.


Removing a domain

To remove a domain from Webstudio:

  1. Click “Publish” in the top bar.

  2. Click your domain.

  3. Click “Remove domain”.


Domain issues

Below are common issues when adding custom domains and how to resolve them.

DNS provider doesn't allow CNAME flattening

Providers that don't support CNAME flattening

This list is not comprehensive.

  • GoDaddy

  • Hostinger

  • Squarespace

  • DigitalOcean

  • Namecheap

  • IONOS

Option 1: Change your DNS provider

You can move the DNS (where the DNS records are managed) without moving the registration (where the domain is purchased), though it may make sense to move both.

Option 2: Publish your website on a www subdomain

Video Tutorial

The above options are shown in the following video.

Worker not found

You may see "Worker not Found" message when opening the site, like this:

Worker not found is due to one of the following reasons:

  1. You haven't published your Project after adding a custom domain.

  2. Your domain was not properly connected or you need to republish.

Adding a domain with a country code like .co.uk

Using a second-level domain (SLD) within a country code top-level domain (ccTLD) such as .co.uk is fully supported. However, the DNS records provided when adding a domain in the Builder are incorrect.

Here are the provided records and correct records when adding example.co.uk:

Record Type
Provided Value
Correct Value

CNAME

example

@

TXT

_webstudio_is.example

_webstudio_is

You must publish your site after the domain is verified, or else "" will show on the site.

This address does not route traffic to an origin server but allows Cloudflare to apply rules, redirects, and Workers to incoming traffic. The equivalent IP address for an AAAA record is 100::. -

Follow to redirect your root domain to www.

Follow to redirect www to your root domain.

For more information about exporting and self-hosting, view .

While modern DNS providers like support using CNAME at the apex, such as example.com (aka CNAME flattening), others only allow using CNAME with a subdomain, such as www.example.com.

The easiest way to work around the CNAME limitation is to switch your DNS control over to a provider like . This process takes about 10 minutes and once you have migrated, you can use the original process to configure it..

Go back to , but this time, prefix your domain with www.

You clicked on publish, but it is still in the process of deployment. It usually takes 1 minute to distribute your Project across the globe. Webstudio is utilizing advanced Edge network.

⚛️
🌐
Cloudflare
Cloudflare's guide
Cloudflare's guide
Self-Hosting
Cloudflare
Cloudflare
Cloudflare's
Worker not found
Step 1
this section
CNAME and TXT records from new domain
Publish to staging with production unchecked
Worker not found