It’s a developer’s nightmare: You spend weeks building a business website only to find out it is riddled with bugs and other issues that render it unusable. Thankfully, using a staging website can ensure that you avoid that risk.
These test sites can safely optimize your site’s appearance and functionality. A staging site keeps your website looking and performing its best, even with changes happening behind the scenes.
In this post, we’ll explain what a staging site is, when to use one, and how to set one up with Content Hub and WordPress. If you know the basics of staging a website, you can skip ahead to the information you need by clicking any of the links below.
- What is a staging site?
- Who should use a staging site?
- How to Create a Staging Site
- Stage Content in Content Hub
- Stage Content in WordPress
- When should you make a staging site?
- Why should you make a staging site?
What is a staging site?
A staging site is easy to set up in conjunction with its live counterpart, and it 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 remains 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 SEO harm 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 actual URL so visitors won’t find it by accident.
Development Sites vs. Staging Sites vs. Production Sites
All websites exist in different versions before they finally go live. These versions ensure that the final product is bug-free and achieves the website’s goals. The three main versions are development sites, staging sites, and production sites. We’ll explore each below.
Development Sites.
As the name implies, this version is where development occurs. The development site is an isolated version or environment that’s used for the initial testing of any of the website’s new features.
It’s isolated, meaning that whatever changes you make to this website version won’t carry over to other environments except when the developers export the changes.
Staging Sites
The staging site is closer to the final version of the website than the development site. Any errors are corrected here, and changes are ready to go live.
The staging environment is where you deploy changes to the website and see the effect of these changes before the website goes to production. The staging environment’s goal is to test the entire website before the changes are published to the live website.
Production Sites
Production sites are the released version of the website and are accessible to the end users. It’s the website that your visitors see and interact with.
You ensure the production site is error-free and usable by using the development and staging environments.
Development and staging sites are only accessible to the internal team and can’t be accessed by users or search engines like Google or Bing. You’ll increase your chances of having a problem-free website by ensuring quality on the staging site.
Who should use a staging site?
Staging sites are helpful for anyone that runs a website. They are particularly useful for anyone whose website’s performance is vital to their business performance.
For example, anyone running an ecommerce website won’t want anything to alter its functionality and performance or even render it unusable for potential customers.
Thus, staging sites are essential if your website is vital to the service you provide, the products you sell, or the website’s users.
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 use, the process of creating a staging site will be similar. Below are the general steps:
- Navigate to your CMS or site management software and create a staged version of your site in draft mode.
- Update the content or design per your project’s goal. It could be as simple as testing a new feature, or as complex as redesigning the whole site.
- Publish the staging site to a private live URL.
- Troubleshoot any errors or bugs.
- Repeat steps 2-4 until the site is ready for publishing.
- Back up your current website in case anything goes wrong.
- Deploy the staging site to your live website.
- 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, depending on your platform, the process will look and feel slightly different. We’ll share additional information on building sites in Content Hub and WordPress below.
Stage Site in Content Hub
Content Hub allows you to build a brand new site without touching your existing web presence in the content staging tool. Content staging allows you to 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 Content Hub
1. In your HubSpot account, navigate to Marketing > Website > Website Pages.
2. Click the More tools dropdown menu in the lower-left corner and select Content staging.
3. Review your existing website and staged pages on the Content Staging dashboard. Here’s what the dashboard looks like.
4. 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.
5. In the All page types dropdown, filter for landing pages only, website pages only, or all page types.
6. The Manage tab contains the existing pages on your site.
7. The Publish tab contains redesigned pages published on your sandbox domain.
8. The Log tab contains any pages that have been moved over to your live website.
The tabs on the left sidebar menu include the following:
- Unmodified, or existing pages that still need to be modified in the tool.
- Staged draft, or pages you’ve started to stage but still need to publish onto your staging domain.
- Staged proof, or 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 Content Hub
You can redesign your site in a few ways with content staging in Content Hub. If you want to modify a page but retain some of the existing content on the page, follow these 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 cloned page.
3. 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
Here are the steps to follow to create an entirely new page to replace an existing URL on your site.
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 the Update page button.
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, follow these steps.
1. In the upper right, click Create a new staged page.
2. Select whether you want to stage a new Site page or Landing page.
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, here’s how 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.
3. 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, click the settings dropdown menu, and 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.
To learn more about content staging in Content Hub, see our knowledge base page.
Stage Site in WordPress
With straightforward and virtually endless customization options, WordPress lends itself to tinkering and optimization. However, since third parties make most WordPress add-ons, 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. This is because it’s best to test in the same environment as your actual 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, use the following steps.
1. Navigate to the Bluehost staging site setup page. Next, from your WordPress dashboard, select Bluehost > Staging, then click Clone to Staging.
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 actual website. You should see a Staging Environment message in the top banner.
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 the existing information on your live site.
5. Select your deploying option. A message will pop up.
Click Deploy.
6. Once the deployment is complete, a confirmation pop-up will appear. Next, 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, follow these steps.
1. Navigate to your SiteGround cPanel dashboard and select Staging under WordPress.
2. Choose the website you want to stage and click Create.
3. You’ll be able to protect your staging site with a username and password. We recommend protecting your staging site 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 edit it.
5. After your edits, navigate 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, follow these steps.
1. In your WP Engine User Portal, select Sites and click on the site you want 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.
The following options will appear.
These indicate where you want to copy data or content from and where you wish to copy the content to.
8. Select a backup point to save your changes to your live site before updating. Next, 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.
You can choose between the following options:
- All database tables and file system
- Specific database tables and file system
- File system only
9. Click Review and confirm.
10. Double-check the 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 duplicates your entire site and stores it in a subfolder of your main WordPress installation.
To create a staging site with a WordPress plugin, follow this guide.
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.
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 use 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 many users 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 lay out all the benefits below:
- You can test both major and minor elements on a staging site without negatively impacting the user experience (UX) of your published site.
- You can catch bugs and resolve errors before rolling out 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 your website-building platform. 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 significant 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 the utmost freedom to experiment and troubleshoot, empowering you to create a better website that keeps users more engaged. Let’s take a look at the advantages and disadvantages of staging sites below.
Staging Sites Pros
Here are some of the benefits of using a staging site:
- It helps you to build better websites.
- You can identify errors and bugs internally and not on a live website.
- You can make changes without the risk of breaking your website.
- A staging site is relatively easy to create.
- A staging site allows you to test new features for your website.
- It offers the ultimate quality assurance check that ensures end users get the best version of your website.
Staging Sites Cons
Here are some reasons why you might not want to use a staging site:
- Using a staging site increases the time it’ll take to get your website up and running.
- It might be expensive to pay for a staging environment identical to a production environment.
- It might lead to multiple changes bundled into larger releases.
- A staging site can’t test the website for the stress of high levels of traffic that occurs in the live environment.
Use Staging Sites to Level Up
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 actual website. A basic testing environment will prevent the instant regret of pushing a buggy update into the world, so keep the business upfront and tweaks at the back.
Editor's note: This post was originally published in November 2021 and has been updated for comprehensiveness.
.png)
