How to build a staging site in WordPress for beginners

Tutorials 0 lượt xem

As soon as your website is public for everyone to access, you definitely still need to improve and update the wesbite. When the website is already running online, we usually call it live site or production site.

Updating the live site always carries the risk of website death. Typical examples are white page errors. Or the more common situation is that after installing a new plugin, you get fired because it conflicts with the theme and other plugins.

The dead live site can affect the user experience. The consequences are more serious when your site already has a relatively large amount of daily traffic, especially e-commerce sites.

So what is the safe way to update and edit a published website?

You should create a staging site. Staging sites are non-public sites that can only be accessed by you or your team.

Editing on the staging site will also have no effect on the live site. This also takes some of the psychological pressure off when you need to fix a lot of code or deeply customize your site.

After you have thoroughly tested it on the staging site, you can safely deploy those changes to the live site.​

In this article, I will show you how to create a staging site in WordPress. We will use two methods.

The first way we will use a plugin and the other way is to create a manual staging site.

Create a staging site using the WP Staging plugin

This is a simple and fast way to create a stagin site. This is suitable when you want to test a theme or plugin for your website.

If you want to edit more especially the code, you should follow the manual staging site below.

First you need to install and activate the WP Staging plugin .

As soon as the plugin has been activated, you will see the sidebar of the WP Dashboard with a new section called “ WP Staging ”. Clicking on it will take you to an interface that allows you to create a staging site


staging site 4

Click the Create new staging site button . Next, enter a name for the staging site, such as staging. After entering, click on the Start Cloning button


staging site 5

The process of creating a staging site is fast or slow depending on the size of your site. Once the process is complete, click on the Open staging site button to login to the staging site. You still use your existing admin account to log in


staging site 6

To distinguish staging site from live site you will see orange admin bar for staging site


staging site 7

How to push changes to live site

Unfortunately this plugin does not support pushing your changes to the live site. You can only push changes manually.

But personally, I find manual pushing is also relatively difficult, especially the database part. This plugin clones the tables right in the live site db. The new tables will take the name of the old table which is prefixed with the name of the staging site you entered above.

This approach makes it difficult to use the WP Migrate DB plugin to migrate the db from the staging site to the live site. This is the main weakness compared to creating a staging site manually as shown below.

So creating a staging site using this plugin is only suitable for creating an environment for you to play around with plugins or themes for your website.

How to create a staging site manually

With this method, I will create a staging site on a subdomain. Then you will clone the live site to this subdomain.

Step 1: Create a subdomain using cPanel

First, you need to create a subdmain to host your staging site. You go to cPanel, and scroll down to the Domains section. Here you click on Subdomains


staging site 1

Then you enter the name of the subdomain such as “ staging


staging site 2

After you’ve created the domain in cPanel, you need to update the domain’s DNS. Since I use CloudFlare as an intermediate DNS, I will create a record like this in the DNS section of CloudFlare:


staging site 3

Step 2: Clone live site to staging site

a. Create a package containing the source code and database of the live site

To clone a live site to a staging site, you need to install and activate the Duplicator plugin in the live site.

Once the plugin is activated, go to Duplicator and click on the Create New button


staging site 8

Next, click on the Next button


staging site 9

The plugin will scan your website. You will probably have a few warnings. You can skip it by selecting Yes and clicking the Build button


staging site 10

As soon as the package is created, you need to download the 2 files Installer and Archive.


staging site 11

b. Create database for staging site

The next task is that you need to create a database for your staging site. Go to cPanel, click on MySQL Databases.


staging site 12

Enter the database name you want. Click on the button Create Database


staging site 13

Next, in the database creation screen, scroll down and enter the user’s information. Once done, click on the Create User button


staging site 14

Finally you need to assign the user to the database you just created.


staging site 15

In the permission management screen, remember to select all permissions for the user


staging site 16

c. Deploy source code and database to staging site

You need to upload the 2 installer and archive files you downloaded in the previous step to your staging site using File Manager.

Then you access the installer file with the following path: http://staging.yourdomain.com/installer.php . You will now see Duplicate’s deploy screen as shown below


staging site 17

You select the option “ Connect and Remove All Data ” and enter the database information you created in the step above. You can click the Test Connection button to check if the information you entered is correct. Click the Run deployment button to start the deployment process.

In the pop-up dialog box, you just need to click the Yes button


staging site 18

Duplicator will automatically replace the path of the live site with the staging site. Click on Run Update to continue.


staging site 19

The last step you need to click on the Save Permalinks button and clean up the generated duplicator files.


staging site 20

Step 3: Restrict access to staging site

Staging site is a site you do not make public for everyone to access. So you need to prevent the Google bug from indexing your site. To do so, you go to Setting -> Reading . Select the option as below. Remember to click the Save Changes button to save your changes.


staging site 21

If you want tighter access restrictions, you can use the Hide My Site plugin . At this point, visitors or search engines will need a password to access the staging site.

How to push changes to live site

As with the WP Staging plugin, with this method you do not have the option to automatically push changes to the live site. You need to do this manually.

But compared to the WP Staging plugin, I find it easier to migrate the database.

On this point, you can use WP Migrate DB plugin like below.

Pushing changes to the live site you need to do things:

First, you need to change the source code from the staging site to the live site. You can use File Manager or FTP. Using File Manager will be faster.

Finally you migrate the database from the staging site to the live site. ​

How to migrate database from staging site to live site.

You install and activate the WP Migrate DB plugin. After the plugin is activated, go to Tools -> Migrate DB

In the Replace  section you need to enter the live site path. So after migrating the database, the live site will work.


staging site 22

After you click on the Export button, you will get the sql file. You just need to use PhpMyAdmin in cPanel to go to the live site database and import the sql file. It’s done.

Epilogue

Creating a staging site is the safest way to make the changes you want to a live site.

You can use a plugin or a manual method to create a staging site. If you just need to test the plugin compatibility with your website, use the WP Staging plugin to create a staging stie.

In case you want to do more editing, create a staging site manually.

These are the ways I create a staging site. If you know any other tricks or good ways to create a staging site, please share in the comments section below.

icon made by http://www.flaticon.com/authors/madebyoliver from ww.flaticon.com

Bài viết liên quan