Git – a better way to make changes to your live WordPress site

I have resisted for a long time setting up Git or SVN on my projects because I thought they were too much hassle. But now I’m starting to see some real benefits and have decided to have git repositories on most of my projects (the ones I care about anyway). Why? Because git gives you a way to deploy changes without breaking your project – it uploads the files and then does a quick replace on the server while people viewing your project are using it – they will probably not notice the update. When you try this via FTP (my preferred quick and dirty method) users might be left with ugly error messages while the site updates.

I have to say also that git has some nice features such as enabling easier collaboration and version control (undo, redo history of changes if you will). But for me, they are nice to haves (maybe lifesavers down the road), but for now, I’m interested in deploying without breaking the project for my users.

Here is the setup I am using for most of my MVPs:

  • Digital Ocean Hosting (VPS)
  • Serverpilot to do the installation stuff on the server
  • WordPress as the main codebase for managing users and content
  • WordPress API (now standard) to connect Apps to the database (mobile apps and browser extensions)
  • My custom code generally lives in a custom WordPress plugin and I also usually create a modified WordPress Theme.

So, with the above in mind, on to – how the hell do you set up git on your server and local machine?

For this recipe you will need:

  • Digital Ocean droplet (VPS box of any size with Ubuntu installed or similar Linux Distro)
  • SSH access configured on your machine and VPS so that you can use the Command Line Interface (CLI) on the remote server
  • Some basic knowledge of CLI (navigate folders for example)
  • You have the software SourceTree installed on your local machine
  • sFTP access to the Droplet (to check if it all worked with your own two eyes!)

Conventions used in this post:

  • $ is a new line in CLI (the $ symbol should not be copied/pasted into the terminal)
  • Red text is what you need to change to your own credentials
  • My git repository folder will be /home/git/mvpguy.git – change this to whatever you want on your server
  • My live / production folder will be /srv/users/serverpilot/apps/mvpguy/public – change this to whatever you want on your server

Follow these steps at your own risk:

1) Install git on your VPS server (mine is ubuntu 14.04)

$ sudo apt-get update $ sudo apt-get install git

Configure GIT on the VPS

$ git config --global user.name "Your Name"
$ git config --global user.email "youremail@domain.com"

Verify that the install worked:

$ git config --list

This command should show your main credentials you just entered.

2) Create a git user on your server

I’m not sure you need to do this, but I do it anyway

$ su -
$ useradd git
$ passwd git

3) Create a git repository on your VPS server

This is where your files will be saved on your server. Choose a folder that is not accessible to people browsing your website, but also, choose a folder that won’t be overwritten!

This is what I went for:

First, create the directory where your repository will be saved

$ mkdir -p /home/git/mvpguy.git
$ cd /home/git/mvpguy.git

Then create the git repository files with the following command

$ git init --bare

4) Setting up SourceTree

Git can be used from the command line, but since I’m not so proficient, I prefer to have a graphical interface. I’m using SourceTree from the guys over at Bitbucket / Atlassian – it’s free and it works so that’s that.

Open SourceTree, then open the projects window -> +New Repository -> Clone from URL
Click the button “Clone a repository”
Your URL will look something like this

ssh://username@123.45.678.90/home/git/mvpguy.git

Destination Folder: This is the local machine folder to store your files – double check the path before adding, as Sourcetree likes to change the folder by itself even after you select a local folder – I don’t know if this is a bug, but it is annoying.
Choose an empty folder on the local machine (you can copy your files over later).

Now add a .gitignore file for files you don’t want to upload via git – even if they change. In my case, I’m using WordPress so I’ll only want to update folders I will be messing with, the rest I will update via the backend.

OK, now move or create your files into the local empty folder you selected in SourceTree.

Do an initial commit and then push to add files to remote server. If this is your first time doing this, you need to add files into the folder, then select them (stage files), then commit with a message (first commit or something similar) and then push to the remote repository – SourceTree should prompt you to choose where to push to.

4) Quick test?

At this point, I would suggest doing a quick test – add a file to the local folder, check that SourceTree recognises there has been a change and check that you have no errors committing and pushing the file to the remote server.

5) Now the fun starts – use git to push changes to your live site

Now, with a couple of lines of code, you will tell git that you want to copy any changes to your live site folder.
Navigate to your git folder on the server again and open the /hooks folder that is in every .git project. Now you will edit the post-receive file which will contain the hooks.

$ cd /home/git/mvpguy.git/hooks
$ nano post-receive 

Now add these 2 lines

#!/bin/bash
git --work-tree=/srv/users/serverpilot/apps/mvpguy/public --git-dir=/home/git/mvpguy.git checkout -f

Save and then tell the server that the file is allowed to execute commands with this command:

$ chmod +x post-receive

7) Done!

OK, now when you push to the live server it should push your files to the live production website! Bloody hell that was long winded! But from now on, you only need to commit and push to change files on your website / app / tech project. And now you have all the fancy stuff that comes from git.

Leave A Comment

Your email address will not be published. Required fields are marked *