Whether you’ve developing WordPress websites offline or in an online environment, at some point you’re going to want to publish your masterpiece. At this point you’ll probably start feeling a little anxious about this process but by the end of this tutorial you should be able to neatly package your site and deploy it on the live server with great confidence.
In this tutorial, I’m going to discuss four things:
- Why you shouldn’t develop on the client’s hosting account,
- The development environment,
- Tips of building a portable site,
- The tools for moving your site to it’s live environment.
Don’t Do It – Developing on Your Client’s Hosting Account
While it may be tempting, it’s often a bad idea to develop a site for a client on their hosting account. There are a number of reason why you shouldn’t:
- Client might be running on an inferior hosting account,
- If things go south for whatever reason between you and your client, they can hijack the site and cut your access off,
- You can stipulate that you’ll only transfer the site on receipt of 80% (or whatever amount you’re comfortable with) of the final bill.
So, unless it’s not an option, don’t do it!
Development Environment Options
Okay, so you’ve got your ducks in a row and it’s time to start building your next website. At this point you have a few options:
- You could setup a webserver on your PC. There are a few ways you can go about doing this:
- If you’re on a Mac, you can follow the tutorial Installing WordPress Locally on Your Mac With MAMP from the WordPress Codex,
- If you’re a Windows user you can achieve the same with XAMPP, and there are Linux and Mac versions available too,
- In this scenario, what I’ve found to be a quick and easy solution is Local By Flywheel. It’s a clean and easy way to develop WordPress sites locally.
- If you prefer not to work on your local machine, you could opt for a free online hosting environment like Pilvia, a hosting company based in Belgium that use Google’s Cloud Platform. Pilvia has become my go-to solution for developing sites before making them live. They give you the essential tools you need to be able to create you site (ftp access and MySQL database access through phpMyAdmin), there’s no time limit (at least at the time of writing), and best of all, they’re fast, very fast!
- Lastly, if your hosting package allows, you could setup a subdomain (e.g. dev.mydomain.com) and install WordPress on the subdomain. This does however cost you in storage space and your hosting package would also need to allow for more than one database and have sufficient storage space for the site you’re going to build.
Once you’ve settled on the development environment and have set it up, you can begin to install WordPress and your chosen theme as per your normal routine. Of course, if you’ve opted for Local By Flywheel or Pilva.com, WordPress will be installed for you.
Building For Portability
When you build a site in a development environment, the chances are that you won’t be using the actual domain name of the site but rather sometime like http://localhost or if you’ve opted for Pilva, something like https://mydevsite.demo.site. Local by Flywheel is a little different in that you can define your actual domain name, but I’d recommend that you don’t if you need to access the live site while you’re developing the new site as Local by Flywheel will con your browser into believing that it is visiting the real site while it’s actually only visiting a local one.
Now because you’re not developing on the final URL, things could get messy when you create hyperlinks to other parts of the site or when you use files from your media library. This is because, in most cases, the absolute path will be used rather than the relative. The absolute path would look something like https://mydevsite.demo.site/blog/wp-content/uploads/2018/04/MyImage-300x120.png. As you can imagine, this won’t work so well when you move the site from the development environment to its final destination. So, because of this, you should rather use relative paths. The relative path for the same file would look like this: /blog/wp-content/uploads/2018/04/MyImage-300x120.png.
The plugins I mention below do offer a degree of cleaning this sort of thing up, but I prefer building my sites with relative paths so that they are easy to transfer.
Tools For Making The Site Live
Okay, you’ve finished building the site and you’re ready to go live. What you’re about to do is probably the simplest part of the whole process. There are a number of routes you could take here but my personal favourite is to use one of two plugins: All-in-One WP Migration and Duplicator.
All-in-One WP Migration
All-in-One WP Migration is ideal if you already have WordPress installed on the live hosting account. It allows you to easily export your WordPress website including the database, media files, plugins and themes and then import it on the other side.
Duplicator allows you to migrate, copy, move or clone a site from one location to another and also serves as a simple backup utility. With Duplicator, you don’t need an existing WordPress installation, you just need to create a blank database and then run the installer file you’ve uploaded to the new site.
Both videos are quite short, so watch both of them and see how easy they make it to transfer a site from one hosting environment to another.
Wrapping It Up
And there you have it, two easy ways to move your site from your development environment to it’s live environment. To be honest, the first time I did this was quite nerve wracking but by the end of it, I was astounded by how easy it really is. Something I’ve recommend is that you don’t build the site in a multisite network environment (one WordPress install hosting multiple sites) as they’re a nightmare to migrate.
Support Divi Notes
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.