Occasionally, clients will want to see the progress of their beautiful new website. Or maybe you just want to show off some new changes. But you don’t want the changes to be indexed by search engines, and you don’t want them accessible to the public [yet].
Fortunately, you can have a password-protected custom staging domain for a Webflow-hosted website with a few quick and easy steps. This way you can show off your work at staging.example.com instead of staging.webflow.io.
You can skip the first two steps if your site’s already setup with Webflow Hosting.
1. Buy Hosting
Connecting any project to a custom domain requires Hosting [otherwise everyone would just proxy their domain to their Webflow.IO staging subdomain without paying for server costs]. You will not need a Lite or Professional Account Plan for this.
Any Webflow Hosting Plan [Basic, CMS, or Business] will work, although we ask that you don’t use Webflow in your domain.
2. Add your domain & setup DNS
You will need these three records when using SSL:
Two A records:
@ → 34.193.69.252
@ → 34.193.204.92
One CNAME record:
www → proxy-ssl.webflow.com
We have a helpful, step-by-step tutorial on setting up your custom domain that I would highly recommend here:
3. Add an additional CNAME record for staging
Here’s what my Webflow DNS records look like:
4. Add your subdomain under Hosting Settings
Add your staging subdomain under the Custom Domains section just like any other subdomain:
5. Enable Password Protection and publish to staging
First, I always try to make a manual backup version before I make any changes to the staging site. Because I have definitely broken things in the past. And restoring backups can be a lifesaver. You can do this within the Designer with ⌘+Shift+S (or Ctrl+Shift+S on Windows).
You can learn more about backups here:
Next, navigate to the General Settings of your project. Scroll to the section where it says Website Password to enable and set a site-wide password.
Click the dropdown arrow on the Publish button and publish only to your staging domain:
Now your staging domain has site-wide password protection, and the content won’t be indexed by search engines or accessible to people who don’t have the password, but your production site will still be operating as usual:
Make sure you don’t publish to your production domain, or else your changes [and the password protection] will be on your live site.
6. But what if I need to publish to my production website?
When ready to publish changes to your live site, simply disable password protection from your project’s General Settings and publish to your live domains from the dropdown menu.
Aaaaaand that’s it!
Because site-wide password protection is applied after publishing – and it only applies to the domains you publish it to – you can use this to have a password protected custom staging domain that won’t be accessible to the public.
Hope you find this to be helpful, and feel free to reach out to me [or any of our Customer Success Team members] if you have questions! We’re always happy to help!
- Andrew