On today’s episode, we are going to talk about how you can save yourself some headaches with setting up a staging server, right here on Your Website Engineer Podcast Episode No. 396.

Hello and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler, and I am here for the 396th time in a row on a Wednesday, and we are here to talk about staging sites and duplicate servers or a clone of your website, and we’ll talk all about that in just a few minutes. I’ve got an announcement to share with you and a plugin of the week, so let’s go ahead to the announcement.

This week, in the news, there’s only one big thing that happened; nothing really going on with the WordPress software that much. We’re still working on Gutenberg and trying to get that ready to go and shipped out the door. But the big news that we got this week was WP Engine, one of the, I guess, premium hosting companies − they have managed hosts for WordPress, and they are sponsors of most Word Camps and whatnot – they acquired StudioPress, who’s the creator of the Genesis theme platform.

So, there hasn’t been a lot of news about what this is going to mean, like what is this partnership, or what does this acquisition actually mean for end users who use Genesis or use some of the StudioPress themes. No one really knows. It hasn’t really been talked about too much. But that’s the big news that happened this week.

In other news, it’s not really WordPress specific, but it’s Your Website Engineer specific, is I took a little bit of time today and I installed Gutenberg on my live or my cloned site. Let’s talk about that. The staging site or the server that I have set up for running tests and updates and whatnot, I went ahead and I updated that with Gutenberg today. And it was really – it was quite a seamless process. I went to the WordPress repository, I grabbed Gutenberg, I installed it and I activated it, and nothing changed. Nothing really changed until I went to start a new post or start a new – a blog post, and then that’s when I started to see, oh, okay, here’s all the new visuals. Here’s how to set up and configure and whatnot.

Then just for interesting – just to see what it did on my own site, I went back to a previous post that I had already published last week, and I took a look at that, and it had basically one block. We’ve talked about Gutenberg and how it has all of the content in different blocks, so the header or the title’s a block and then the first paragraph is a block and the second paragraph’s a block, and if you have a short code, that’s a block. If you have block quotes, that’s a block. That’s how Gutenberg is set up, and that’s how our sites will be, our pages and our posts will be formatted here in the future when Gutenberg is part of our everyday lives.

But mine was just like one block, and it had all the stuff in, and it was interesting. I went and looked at the code. I switched to HTML view, and everything looked exactly the same. It was just like I had pasted it right in there. But then there was three little dots next to the area, and it’s real close to, you know, it’s in the upper right-hand corner of the block that was in, and it said, “Convert to blocks.” So, I clicked on that just to see what would happen. And it ended up it took all of my little pieces and snippets within that big block and turned it into individual blocks.

So, I put the short code. It created its own block at the top, and then that’s where my podcast player. And then it took the plugin of the week, and that’s its own little block now. And then it took the next section and made it a block, which was really cool. So, now it was really easy once I did that, and then I could click and drag and I could move it around. So, if I wanted to move the podcast player all the way to the bottom, now that it’s in its own block, I could just drag it from the top to the bottom. It was pretty slick and kind of cool to see what that looks like.

As you scroll down the page, there was the meta options area at the bottom where all the meta fields and Yoast and all of those plugins would display their data down below. And so, it looks a little bit different, but it still looked and functioned just like it would with the classic editor with just this new advanced layout.

Now, I haven’t tried to build a show notes template yet. That’s on my testing to see what that looks like, just to get a feel for what is this gonna look like in the future? How am I gonna have to change my process to get a blog post up for every podcast episode that I produce? So, that’s just one of the updates that I did this week, and it was really exciting to kind of see the future and what’s coming with WordPress 5.0.

Okay. Well, let’s talk about the plugin of the week. This one is called WP Server Stats, and this is a plugin that will give you the ability to monitor your WordPress site at its cord level. You can get server stats like allocated memory, real-time memory, CPU usage, and you can identify things that are wrong with some of this information that you get.

So, you don’t have to contact your host every time you have a little minor issue. You can see your server stats, and you can do all kinds of things right there from the plugin. You can see the server O/S, the server software, the server IP address, server port, location hostname, document route. All of this is server-level information. You can see the number of CPU usage, total RAM, RAM percentage.

There’s a lot of stuff that you can do with this plugin. It’s a fairly popular plugin, 6,000 active installs. It’s not very old. It hasn’t been on the WordPress repository too super long. But if you are interested in figuring out what’s going on behind the scenes with your website, this would be a plugin to check it out. So, it’s called WP Server Stats. You can find a link in the show notes for Episode No. 396, or you can just search for it on the WordPress repository.

All right. Moving on to probably one of my favorite topics, I don’t know why it’s my favorite, but I just – I like tinkering with things, and I like setting up and configuring, and just in the past week I’ve redone yet again my system for creating staging sites. And staging sites is just kind of a – I think it’s a term when it comes to the software industry of like this is your code getting ready to be staged. It’s almost ready to be deployed in production. And so, in WooCommerce support and a lot of different places, we just call a duplicate version of your website a staging site. Sometimes people call it a clone site. But in general, it is just a version of your website, a copy of your website.

So, what I wanted to talk about today is just how to save some headaches from deploying onto a live site. We get a lot of customers that come to WooCommerce support, and it’s like, “Oh, I just updated this plugin, and now my website’s broken, and I can’t take any orders,” or, “My payment gateway doesn’t work, and now I’m losing all this money,” or, “I updated this, and now my shipping rates aren’t coming back,” and this, that, and the other. And it’s just like, oh, you could save yourself so many worries and headaches if you would test on a staging environment first and then go ahead and roll those, make sure that everything works properly, test some things, and then roll it to your live production server.

So, let’s talk about some of the benefits, and then we’ll talk about different ways to set up a staging site. A staging site, they’re great because you can test plugin updates without showing the world. This is probably the best feature that you can use. You can test those plugin updates to showcase and make sure that a plugin that updates isn’t gonna break some functionality on your website.

Another thing that staging sites are good for is as testing and debugging. Once you do update a plugin, or you do something that, all of a sudden, your site isn’t working right, with a staging site, you can deactivate all your plugins, you can change to a different theme, and you can see if it works. And then if it does, then you can slowly turn plugins back on, change your theme back, and try to figure out what of those things that you did, which one was the culprit, which one caused the issue.

And so, you can do that on a staging site, and that’s not going to affect – you know, if you take your live site and then change it to the 2017 theme, the layout’s gonna be way different, and people won’t be able to navigate, and the menus won’t work right, and it’s just not a good experience for the customers looking at your website, your viewers to your website. So, that is one of the things that’s great about a staging site.

Another place is you can test and you can make sure that things are working properly, as in, oh, I wanted to add this functionality, like it’s pulling this information to the database. I wanna make sure that it’s being displayed in the right spot. Oh, I’m gonna test and make sure that this custom CSS that I’ve used, I want to hide something, or I’ve moved this. I wanna make sure that it looks good on tablets or on mobile devices. I wanna test and make sure that this stuff is working as I expect it before it gets sent out there for all the eyes in the world to look at your website. So, that’s a great thing to do with a staging site.

It’s great for prototyping and tinkering. I love doing this. You know, oh, I really want to add this widget area, or I want to add a new inline area for a signup form. Okay. How do I do that? So, I start adding the code, and it’s like, okay, this doesn’t quite work right. And, okay, yes, now the visuals are working. Okay. Now let’s test and make sure the form actually works. Can I put in an email address and a name, and will it submit, and will I get the confirmation message, and all those things.

You can do that on a staging site and not worry about when you’re done for the day, like when you run out of time or you have to stop or whatever, you have the ability to just stop and you don’t have to take that page down from your website or just worry about anybody actually looking at the main part of your website.

When something breaks on the staging site, your live site isn’t affected. This is kind of obvious and kind of stated earlier. But the great thing about those staging sites are you can work, and if you have to leave, or dinnertime is at 5:00, or you have to take your kids somewhere, or you have a hard stop, or you wanna go to bed, or you just need a mental break, any of those things can be great reasons to stop.

But if you have a live site that’s broken, those are not good reasons to stop. You’ve got to keep working and make sure that the live site is recovered or roll back all of your changes that you did to the last previous known good state on your live site. But if you’re doing it all on a staging site, if it breaks, you can just quit. You can walk away. You can come back with fresh eyes, and then you can fix things.

Then the other thing then I saw when I was doing a little research for this episode is that your live site search rankings are not affected. So, what do I mean by this? This means that your live websites, you’re making sure that you’re preventing bots from encouraging or from encountering any error-ridden pages or offline website or something that doesn’t look right to Google. So, you don’t want Google to be crawling your website and then it finds this broken page because you’re working on it and you’re tinkering it, and you don’t really care because you’re just working on it right now.

So, that’s another thing that a staging site is really good for. You don’t have to worry about getting dinged by the SEO folks and Google and all that kind of stuff because you’re not breaking any parts of your live site.

So, those are some of the benefits. I’m sure that there’s a lot more. I think that one of the benefits too that I know that I like using a staging site, especially running locally on my computer, that a staging site is way faster. So, if you’re making code changes on a live server somewhere, you would have to – you would make the changes with the code, you’d save it, you’d FTP it, or you’d somehow push that code up to the server, and then once the server has it, then you can refresh, and you can check to make sure that it works.

Well, if you’re doing it on a local environment, then you can just save the file on your computer and then refresh the browser, and it just works. In some instances or some setups, you can even have it set up so whenever you hit save, your browser will automatically refresh. So, by the time you toggle from your code editor to your browser, you’re already seeing the newest version, which is pretty cool, so you can do that as well.

So, those are some things, those are some reasons that staging sites are good. And it saves a lot of time and headaches when trying to debug and trying to figure out, and you just don’t have to worry about breaking the live site. That’s the big thing. You don’t want to break your main website, especially if it’s making money or especially if you have lots of people viewing your content. Those are the reasons why you should have a staging site.

Now, how do we set up one of these staging sites? There’s a few different ways, and it depends on how you wanna set this up. And usually, a staging site or a cloned version of your website, you want it to be exactly the same as your live version. And so, you wanna make sure that you’re running the same version of PHP, and you’re using the same server technology, and you’ve got the same amount of RAM and all that kind of stuff. You wanna make sure that it’s as apples-to-apples as you possibly can be.

And so, the first way to do this is to just create a duplicate of your site on your host server. So, this is really great if you’re on a shared hosting account. You can just create another folder on your account or inside your hosting plant, and then just do a complete clone and then duplicate all your files. So, that would be like I could create YourWebsiteEngineer.com/newtheme or plugintest or whatever, and then I could run an entire brand-new WordPress installation from that page.

Now, if you’re doing it live like that, I would recommend making sure that it’s a private site. Make sure that if folks would happen to stumble upon that page, they’re not gonna be able to see anything. It’s gonna be private, or put a maintenance mode plugin or something like that up, so that they know that it is a staging site indeed.

So, that’s one way you could do it. It’s a little bit – that’s probably one of the more tedious ways to do it is to duplicate that, or if you’re using Blue Host or something that has a C-panel, you can go in and you can create this new folder, and then you can automatically use the one-click installation to get WordPress up and going, and then you can import all your content, and it would take a little while to get set up. So, that’s one way you can do it.

Another way to do it is you can have it automatically set up with managed hosting. So, folks over at WP Engine or Flywheel, I think Site Ground, I think a lot of them are coming to this point where it will give you the ability to do a staging site. And so, I know on Pressable where I’ve got my websites hosted, there’s a button that says, “Create a staging site,” and you click the button, and it automatically duplicates your entire site and gives you a staging URL, super handy, super fast, and it works really, really cool. And so, that’s another way.

If this is something that’s really of interest to you, but you don’t want to spend a lot of time configuring and setting up this thing, then this is what I would recommend. I’d recommend finding a host that has this built in, so one of those options I just mentioned, and make sure that they have that ability, so you can easily create that staging site.

The cool thing about a staging site with a company like Flywheel is you can create the staging site, you can do your testing, you can do the updates. Then you’re like, okay, I’m all done, and then you can just turn off, and you can delete that staging site. And then, when you’re ready to do some more testing and some more updates, you can spin up another staging environment, you can do your test, and then you can delete it. So, it makes it really, really easy.

The other way that you can do it, and this is the one that we recommend for anyone that has a support ticket inside of Automatic or inside of WooCommerce, if we’re trying to figure out and debug, we recommend a plugin called WP Staging, and it is a database and file duplicator and migration plugin. It basically gives you the ability, you install this plugin and then there’s a button inside or on the left-hand side all the way down towards the bottom, and it gives you the ability to clone your website. And it creates a brand-new site for you, and you can have multiple clones, and it’s cloning you all on the same server.

So, it’s kind of like the Option 1 with creating a manual one, kind of merged with the automatically one setup. It’s just a couple steps to do, and then you can work on your tests and do the fixes that you need, and then you can delete or destroy that staging site. And it’s really cool; it works really well. It’s a neat way to do this if you need a staging site very, very quickly. It’s a great plugin to do that. So, that’s the third way.

So, the first is manually create it; the second is it’s automatically set up with your hosting plan; and the third is to use the WordPress plugin. And then the last way is you can create a local copy on your computer. You can use desktop server or Local by Flywheel.

And my new thing that I’ve been using for the last probably week and a half is called Valet Plus, and it’s a complete command line tool. And I’ll have to talk about this in an upcoming episode, but Valet Plus is – it is so fast. I cannot believe how fast. Just navigating within WordPress is you click on a link, and it’s automatically loaded. It’s just really fast. It doesn’t have a lot of overhead like some of these others do. It’s a little bit more technical to get set up, but once it’s set up and configured, it is really cool, and it is so fun to use.

And so, that’s just the new technology, the new thing that I’ve moved all my sites to. So, I’m sure there will be something in the future that I will want to move as well. But I like to keep things locally, like I said earlier, because it makes it really, really easy for me to test things. I can save, I can do a refresh and see if those things actually happened, or if those refreshes, all those changes are there. I don’t have to worry about some sort of host caching my website. That’s another problem that you sometimes run into is a cache version of your website. You make a change, you refresh, and you don’t actually see the latest version because it’s cached somewhere on the server. So, I really like using a local version to run all my websites. So, that way, I have an extra copy on my computer. My computer’s backed up. I just – it makes me feel so much better that I’m not gonna lose a website.

That’s what I wanted to share today. I just wanted to talk about staging environments and getting one of those set up. And I recommend thinking through this weekend, just trying to figure out, okay, is this the best way to – what’s gonna be my strategy or my plan if I run into an issue? Am I gonna use a plugin, or am I gonna manually create, or just have a plan.

You don’t need a staging server right away. It’s just great to have when you start updating plugins and you’re changing things within WordPress. You just wanna make sure that you’ve got this backup copy that you can run some tests on to make sure that it doesn’t affect your live site. That’s the whole purpose of having a staging environment, and that’s why I recommend that everybody has a staging environment when you’re getting ready to update things on your website.

So, that’s what I wanna share with you this week. Take care, and we’ll talk again next week. Bye-bye.