As your business continues to grow and evolve, so will your online presence. For this reason, you’ll continually want to optimize your site’s appearance and functionality. This keeps visitors and customers returning for an excellent experience.

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.

Learn More About HubSpot's CMS Software

A staging site is easy to set up in conjunction with its live counterpart, and lets you experiment as much as you want with its 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.

Why should you use a staging site?

We’ve alluded to some of the benefits of using a staging site already. Let’s clearly lay out all the benefits below:

  • You can test both major and minor elements on a staging site, without negatively impacting the UX of your published site.
  • You can catch bugs and resolve errors before rolling out any changes to your published site.
  • You can use a staging site before your website is launched, or before a major website redesign.
  • You can use a staging site to learn all about the website building platform you’re using. Use every module in the editor, try out templates and extensions, add custom code, and so on.
  • You can use a staging site to test a major addition to your website, such as user accounts, membership areas, subdomains, forums, or knowledge bases.
  • You can try using different APIs — like the Twitter API — without fear that you’ll break your site.

Staging sites give you utmost freedom to experiment and troubleshoot, empowering you to create a better website that keeps users more engaged.

How to Create a Staging Site

Many hosting providers and even some CMS systems offer tools for staging. No matter what website building platform you’re using, the process of creating a staging site will be similar. Below are the general steps:

  1. Navigate to your CMS or site management software and create a staged version of your site in draft mode.
  2. Update the content or the design in accordance with your project’s goal (it could be as simple as testing a new feature, or as complex as redesigning the whole site).
  3. Publish the staging site to a private live URL.
  4. Troubleshoot any errors or bugs.
  5. Repeat steps 2-4 until the site is ready for publishing.
  6. Backup your current website in case anything goes wrong.
  7. Deploy the staging site to your live website.
  8. Consider A/B testing minor elements such as button colors, heading text, and CTAs to make sure your updated site is optimized for conversion.

However, the process will look and feel slightly different depending on the platform you’re using.

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. Click any of the links below to skip to that section.

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.

How to Get to the Content Staging Environment in CMS Hub

1. In your HubSpot account, navigate to Marketing > Website > Website Pages.

CMS Hub navigation menu leading toward the Website Pages option

2. In the lower-left corner, click the More tools dropdown menu and select Content staging.

More Tools option in Website Pages dashboard in CMS Hub

3. On the Content Staging dashboard, review your existing website and staged pages. Here’s what the dashboard looks like:

Content Staging dashboard in CMS Hub

  • 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.

How to Stage an Existing Page in CMS Hub

You can redesign your site in a few ways with content staging in CMS Hub. If you want to modify a page but retain some of the existing content on the page:

1. Hover over the page you want to stage, then select Stage to the far right.

2. In the Stage page dialog box, select Stage cloned page.

Stage cloned page pop-up in CMS Hub3. Click Stage page. This opens a clone of your live page in the content staging editor.

4. Edit your content in the page editor. Note that any changes to templates, global content, or stylesheets will impact existing live content.

5. After your edits, click Publish to staging.

How to Stage a New Page that Will Be Published to an Existing URL

If you want to create a completely new page to replace an existing URL on your site, you’d take the following steps.

1. Hover over the page you want to stage, then select Stage to the far right.

2. In the Stage page dialog box, select Stage blank page.

3. Click Stage page.

4. Select a template for your new staged page. Note that any changes to templates, global content, or stylesheets will impact existing live content.

5. In the pop-up, confirm that you want to select a new template by clicking Update page.

Selecting a new template and confirmation pop-up in CMS Hub

6. Edit your content in the page editor.

7. After your edits, click Publish to staging.

How to Stage a New Page that Will Be Published to a New URL

If you want to create a new page that didn't exist on your website before:

1. In the upper right, click Create a new staged page.

Create new staged page button in CMS Hub content staging dashboard

2. Select whether you want to stage a new Site page or Landing page.

Create new staged page dialog box in CMS Hub

3. Click Stage new landing/website page.

4. Select a template for your new staged page. Note that any changes to templates, global content, or stylesheets will impact existing live content.

5. Edit your content in the page editor.

6. After your edits, click Publish to staging.

Note: When adding a new page to your site, review your advanced menus and create a new navigation item for the new page.

How to Publish your Staged Pages

Finally, to deploy your staged pages:

1. In the Content Staging dashboard, click the Publish tab.

2. Write a Publish Job Name and Publish Job Description explaining what was changed and why. This will show in the Log tab of the content staging tool.

Publish to live domain pop-up box in CMS Hub3. Click Next.

4. Review the details of your publishing job, select the checkbox to confirm, then click Publish.

  • To publish a single page, hover over the page name and click the settings dropdown menu, then select Publish to live domain.
  • To publish multiple pages at once, select the checkboxes next to the page name. Then, click Publish # pages to live domain.
the publish tab in the CMS hub content staging tool

Image Source

To learn more about content staging in CMS Hub, see our knowledge base page.

Stage Content In WordPress

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 subscription packages. 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 Clone to Staging.

Bluehost staging dashboard inside the WordPress admin panel

2. When the staging site is ready, you’ll be given the URL for your staging site. Click the white circle next to the staging site URL.

3. You are now in your staging environment and can make changes without affecting your real website. You should see a Staging Environment message in the top banner.

Bluehost cloned-to-staging confirmation in staging environment

You can return to your live site by selecting Bluehost > Staging, then clicking the white circle next to your live site’s URL.

4. When you’re ready to deploy the changes on your staging site to your live site, go to Bluehost > Staging, then click Deploy All Changes next to the URL of your staging site.

Alternatively, you can click the downward arrow and choose Deploy Files Only or Deploy Database. Be very careful if you choose to copy the database, as this will overwrite your existing information on your live site.

5. Select your deploying option. A message will pop up.

Bluehost Deploy to Production pop-up message

Click Deploy.

6. Once the deployment is complete, a confirmation popup will appear. Return to your live site by selecting Bluehost > Staging, then clicking the white circle next to your live site’s URL.

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.

SiteGround staging site option on the cPanel dashboard

Image Source

2. Choose the website you want to stage and click Create.

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 ready, you can make edits to it.

5. After your edits, navigate back to your cPanel dashboard and select My Account > Original Website.

6. Click Push To Live.

WP Engine Staging Site

Staging sites are also included in managed hosting plans through WP Engine. To create one:

1. In your WP Engine User portal, select Sites and click on the site you’d like to stage.

2. Find the drop down with your site’s environment and click Add Staging.

3. Fill in the Environment options. You can create a new one, create one from a template, copy one from an existing environment, or move one from another site to yours.

4. Click Create environment.

5. After your staging site is created, you can access it under Sites.

6. After editing your staging site, you’ll need to copy it to your live site. Under Sites, select your staging site.

7. In the top-right corner, select Copy environment.

WP Engine copy environment button

Image Source

The following options will appear:

WP Engine copy environment options

Image Source

8. Select a backup point to save your changes to your live site before updating. 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 the existing information on your live site.

9. Click Preview Copy.

10. Double-check the information, then click Copy Environment.

WP Engine preview copy environment pop-up confirming the information

Image Source

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.

the main menu in the WP Staging WordPress plugin

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.

the staging environment in the WordPress plugin WP Staging

Use Staging Sites to Take Your Website to the Next Level

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.

Editor's note: This post was originally published in July 2020 and has been updated for comprehensiveness.

Discover videos, templates, tips, and other resources dedicated to helping you  launch an effective video marketing strategy. 

 cms software

Originally published Mar 16, 2021 7:00:00 AM, updated March 16 2021

Topics:

Content Management System