Version control and working on a WordPress website locally while being able to push the changes to live site with the click of a button is something that most of us (esp. those that have seen the benefits) appreciate the usefulness of. In this tutorial I share step-by-step details of the process I have pieced together to develop WordPress websites locally and then push the changes both in files and database to the remote server. No, you do not have to open a command line window or terminal in any step.
The overall workflow involves creating a Git repository at Bitbucket, cloning it onto a localhost site’s (created using DesktopServer) folder, pushing the local site’s files to Bitbucket via SourceTree, using dploy.io to automatically send these files from Bitbucket to the remote server (hosted by HostGator in this example), manually installing WordPress on the remote server and finally using WP Migrate DB Pro (commercial plugin) to push the database changes from local to remote.
Step 1 – Install SourceTree
Download and install SourceTree, a free Git client available for both Windows and Mac.
Step 2 – Install WordPress on your localhost
Create a new WordPress site using DesktopServer.
Complete the installation.
Note down the Username and Password you are going to enter in the next screen.
You may log in and do common tasks like setting ‘Post name’ as the Permalinks structure, removing unused themes like twentythirteen and twentyfourteen, activating your favorite theme and plugins.
Step 3 – WP Migrate DB Pro
Upload and activate WP Migrate DB Pro and optionally its Media Files Addon. This will be used to push database and optionally, the media addon for media files from local to remote.
Step 4 – Create a Git repository at Bitbucket
Sign up at Bitbucket which lets us host unlimited private Git repositories for free.
Create a private Git repository.
Step 5 – Empty the local site’s folder
In the next step we are going to clone the above repo on the local computer and for this, the folder must be empty. Therefore, move all the content inside the website folder, ex.: /Users/sridharkatakam/Documents/Websites/john-doe.dev to a temporary folder say, “temp” on Desktop.
Make sure you also move .htaccess file which may be hidden.
Note: Screenshot below does not show .htaccess in the files list being moved. After taking the screenshot, I have realized that I left it out and moved that file later.
Step 6 – Clone the repository on your computer
Click ‘Clone in SourceTree’ button.
Set the Destination Path to the local site’s folder and click Clone button.
Step 7 – Move the local site’s content back into the folder
Move all the content back into the website folder on localhost.
Step 8 – Push the local site’s files to Bitbucket
Switch to SourceTree, stage all the files by clicking the ‘Unstaged files’ checkbox, enter a Commit message, tick ‘Push changes immediately to origin/master’ and press Commit button.
This process may take 2 to 3 min to complete the first time depending on your internet connection’s upload speed since all the local site’s files will be uploaded to Bitbucket.
Step 9 – Set up deployment from Bitbucket to your site’s server using dploy.io
So far we have set up the system to push the file changes from local to Bitbucket. We are going to use dploy.io to automatically push the files received by Bitbucket to the live site’s server using FTP. Create an account at dploy.io.
Click on ‘Connect a repository’, then under Bitbucket click on ‘Connect new account’. Once you have authorized Bitbucket to connect to dploy.io, select the repository and click ‘Connect’.
Click ‘Create an environment’.
Enter a descriptive name for your FTP/sFTP server, select ‘Automatic’ deployment mode, leave the Branch at master and Save.
Select FTP or SFTP depending on what your hosting server offers and click ‘Next Step’.
Give a descriptive name for the environment and enter the corresponding login info. In this example, I am deploying the site to http://websitesetuppro.com/demos/john-doe. Hence created a ‘john-doe’ directory under ‘demos’ under public_html in my HostGator account using a FTP client and specified the Destination path as /public_html/demos/john-doe.
Click Save.
Go back to the Dashboard and click Deploy.
In the next screen, click ‘Start deployment’.
Step 10 – MySQL Database
Log into your host provided cPanel and create a new MySQL database.
Create a new MySQL user. You might want to open up the wp-config.php file of your local site and use the same password.
Add the user to database while granting all privileges.
Step 11 – Upload wp-config.php from local to remote and edit it
Ensure that your initial commit has been successfully sent from dploy.io to your remote site.
Using a FTP client or your host’s cPanel file manager, upload wp-config.php from your local site’s folder to the remote site’s root.
Edit the uploaded file on the remote server and update the database connection values per the previous step.
Step 12 – Access the live site and complete WP installation.
Visit the URL of your live site and complete the WordPress installation.
The Username and Password need not match those on the local install because after a few steps we are going to overwrite the remote’s database with that of local. But to keep things simple, I used the same.
Activate WP Migrate DB Pro.
Tick ‘Accept push requests allow this database to be overwritten’. Copy the Connection Info.
Step 13 – Create a migration profile to push db from local to remote on demand
In the local site, go to WP Migrate DB Pro’s settings, tick ‘Accept pull requests allow this database to be exported and downloaded’.
Switch to Migrate tab, select Push, paste the Connection Info, optionally tick Media Files, tick ‘Save Migration Profile’ and click ‘Migrate & Save Profile’ button.
This will push the entire local database to the live site and at this stage the live site should be a mirror of local one.
From this point onwards, after you make any changes in your local site whenever you want to push them live, stage all the changed files in SourceTree, commit and push them and use WP Migrate DB Pro to push the database changes.
While researching on how to set up all the above, I saved the following URLs in my notes:
http://stackoverflow.com/questions/2950107/git-push-into-production-ftp
https://github.com/banago/PHPloy
https://wordpress.org/plugins/wp-cfm/
https://github.com/level-level/wp-cfm-acf
http://ftploy.com/pricing
https://www.deployhq.com/packages
