But modifying a website is risky. No matter how big or small a change might seem, there’s a chance of something breaking as a result. If your updates cause difficulties or poor performance on your website, visitors will opt for a less-buggy experience elsewhere.
Luckily, we have staging sites. A staging site keeps your website looking and performing its best, even with changes happening behind-the-scenes. In this post, we’ll discuss what a staging site is, when to use one, and how to set one up with CMS Hub and WordPress.
What is a staging site?
A staging site (also known as a “testing site,” “development site,” or “sandbox”) is a private copy of your live website. You can use your staging site to test changes to your website without the risk of breaking your public-facing site.
A staging site is easy to set up in conjunction with its live counterpart, and lets you experiment as much as you want with content, functionality, and appearance. When you edit this hidden website and not your actual site, your visitor experience stays untouched.
After implementing an update to your staging site, you can deploy your new changes to your live website for the public to see. This instant change limits downtime and harm to SEO from a faulty live site.
As you might have guessed, you don’t want users ending up on your staging site — they might see unpolished changes or gain access to potential security vulnerabilities. To prevent this, keep the URL of your test site private and different enough from your real URL so visitors won’t find it by accident.
When should you use a staging site?
Depending on how comfortable you are introducing changes to your website, you might need to use your staging site often or only on occasion. Newer administrators might choose to use their staging site for most changes. Those with more experience might utilize a test site less frequently and prefer to publish smaller tweaks straight to their main site.
However, you should always test major website updates on your staging site before deploying them publicly, especially if you have many users who rely on your website. For example, install major updates to your CMS in your staging area before your main site. Big technical problems will affect your reputation, so it’s better to be safe than sorry.
How to Create a Staging Site
Many hosting providers and even some CMS providers offer tools for staging. In this section, I’ll cover how to stage your content in CMS Hub, HubSpot’s own content management system. I’ll also go over staging content in WordPress with several hosting services and a plugin.
Stage Content in CMS Hub
CMS Hub allows you to build out a brand new site without touching your existing web presence in the content staging tool. With content staging, you can build safely in a separate staging area, test changes, and seamlessly take the new design live.
To open the content staging environment in CMS Hub:
1. In your HubSpot account, navigate to Marketing > Website > Website Pages.
2. In the lower-left corner, click the More tools dropdown menu and select Content staging.
3. On the Content Staging dashboard, review your existing website and staged pages.
In the domain dropdown at the top, view your existing pages for a domain. The domain selected here is where your redesigned pages will be published.
In the All page types dropdown, filter for landing pages only, website pages only, or all page types.
The Manage tab contains the existing pages on your site.
The Publish tab contains redesigned pages published on your sandbox domain.
The Log tab contains any pages that have been moved over to your live website.
The tabs on the left sidebar menu include:
Unmodified: existing pages that haven't been modified in the tool.
Staged draft: pages that you've started to stage but haven't yet published onto your staging domain.
Staged proof: pages you've published on your staging domain. You’ll review your pages here before deploying them to your live site.
More tools contains additional tools for managing your site.
With straightforward and virtually endless customization options, WordPress lends itself to tinkering and optimization. However, since most WordPress add-ons are made by third parties, one tool might cause another to break. So, it’s a good idea to test any update to your WordPress website.
We recommend setting up a staging site through your WordPress hosting provider if possible. This is because it’s best to test in the same environment as your real website — otherwise, you might miss errors caused by your host.
Bluehost Staging Site
Bluehost WordPress hosting plans offer site staging out-of-the-box on its. To create a staging site on Bluehost:
1. Navigate to the Bluehost staging site setup page. From your WordPress dashboard, select Bluehost > Staging, then click Create Staging Site.
2. When the staging site is ready, you’ll be given the URL for your staging site. Click Go To Staging Site.
3. You are now in your staging environment and can make changes without affecting your real website. You can return to your live site by selecting Bluehost > Staging, then clicking Go to Production Site.
4. When you’re ready to deploy the changes on your staging site to your live site, go to Bluehost > Staging in your staging site, then scroll down to Deployment Options.
5. From here you can choose to Deploy Files Only, Deploy Files & Database, or Deploy Database Only. Be very careful if you choose to copy the database, as this will overwrite your existing information on your live site. Select your option and then click Yes! Let’s Deploy.
6. Once the deployment is complete, a confirmation popup will appear. To return to your live site, select Bluehost > Staging, then click Go to Production Site.
SiteGround Staging Site
SiteGround is another popular WordPress hosting provider with a staging tool. To create a test site with SiteGround:
1. Navigate to your SiteGround cPanel dashboard and select Staging under WordPress Tools.
2. Choose the website you want to stage and click Create Staging Copy.
3. You’ll be given the option to protect your staging site with a username and password. We recommend this, since it will block search engines from crawling your staging site and damaging your SEO. Choose the Password protect option, enter a username and strong password, then click Continue.
4. After your staging site is created, you can access it under Sites.
5. After editing your staging site, you’ll need to copy it to your live site. Under Sites, select your staging site.
6. In the Copy to dropdown in the top-right corner, select Production.
7. Select a Backup point to save your changes to your live site before updating.
8. Choose whether or not to include your database in the deployment. Be very careful if you choose to copy the database, as this will overwrite your existing information on your live site.
9. Click Preview Copy.
10. Double-check the copy information, then click Copy Environment.
Staging With a WordPress Plugin
If your hosting plan does not include staging, consider using the free WordPress plugin WP Staging to stage your content. This plugin works by duplicating your entire site and storing it in a subfolder of your main WordPress installation.
To create a staging site with a WordPress plugin.
1. Install and activate the WP Staging plugin under Plugins > Add New.
2. You’ll see a new WP Staging tab in the left-side panel. Select WP Staging > Sites / Start.
3. Click Create New Staging Site.
4. Name your staging site, then click Start Cloning. It will likely take a few minutes to clone your entire site.
5. When the staging site is ready, click Open Staging Site and log in with your WordPress credentials. You’ll be taken to the staging site where you can make changes. The orange bar across the top will tell you when you’re working in your staging environment.
It might take a bit more time and even cost a little extra, but it’s almost always a good idea to maintain a staging site in addition to your real website. A basic testing environment will prevent the instant regret of pushing a buggy update into the world, so keep the business up front and tweaks in the back.
Originally published Jul 7, 2020 7:00:00 AM, updated July 07 2020