So if you’re a developer worth your feed, you version control your projects. When I started using Git to version control my projects (custom WordPress themes) I quickly discovered deploybot.com, which let me deploy all updates and changes directly to the Wanderoak staging server where we test/debug sites and share with the client before an actual launch. It’s also the best way for my business partner, Bobbi, to view what I’m up to and give design feedback if I need it.
DeployBot is awesome, but you can only have one free repository and we usually have more than one project going at once. I almost signed up for the paid tier, but you see, I’m a cheap-skate sometimes, so I figured, there has to be a way for me to do this with git natively, I mean remote pushes are something I do all the time!
It took about 2 hours, 7 billion Chrome tabs and a lot of frowning at my computer but I figured it out! This is only the first version so it may be a bit more verbose than it needs to be, but it works and is easy to replicate.
Here’s the situation:
I work on projects on my computer where I host a local git repository (called repo from now on). I backup my work on BitBucket. I have a staging server that I also want to be able to push all updates to.
What I’m working with:
- local git repo
- BitBucket repo
- staging server hosted on Dreamhost
Note: This tutorial requires a basic working knowledge of Git and some familiarity with the command line.
First initialize a new git repo in your project folder if you haven’t already.
git init
Now go to BitBucket (or GitHub, etc, I’m just going to refer to it as BitBucket) and set up the repo there. Since you already have an existing local repository, you’re going to be adding your BitBucket repo as a remote. It’ll be something like:
git remote add origin [url of BitBucket repo here]
Go through your usual routine to connect the two and test it so it’s working.
Now you need to set up a git repo on your staging server.
Note: You may have to refer to your hosting provider’s docs on how to set up and access a git repo, the following instructions are pretty general but you may need to do extra things depending on your provider.
Dreamhost has some pretty amazing documentation, it’s never failed me. You can check out their Git instructions for further explanations if the following doesn’t make sense to you.
Dreamhost servers come with Git preinstalled. If you aren’t already accessing your server using ssh or sftp, you have to go into your C-Panel and set that up first, because in order to do the rest, you have to ssh into your server.
Log into your server:
ssh [email protected]
You’ll be prompted for your password and then you’ll be logged in. The first thing you have to do is set up your Git identity.
git config --global user.name "Aurooba Ahmed" git config --global user.email [email protected]
I work on a lot of themes, so I decided to create a folder in my root directory called theme-gitrepos
and inside this folder I’ll create new repos for each of my themes. Let’s say I’m working on a theme called Mint
:
mkdir theme-gitrepos cd theme-gitrepos mkdir mint-repo
Now I’m going to initialize a bare repo in this directory. A bare repo doesn’t have a working directory, it’s structured differently and used to share work. We don’t need working files in this repo, we just need to share our work and transfer it to themes/your-theme-folder
(make sure you’ve created a folder for your theme inside the themes
folder!) from here.
git init --bare
Every time we push a new update, we want this repo to export all the files to themes/your-theme-folder
of our wordpress directory. In order to do that, we are going to use a git hook. Git hooks are custom scripts that fire every time a particular action occurs. In this case, we want something to happen when the action post-update
occurs.
So we’re going to navigate to the hooks folder inside our bare repo and create a file called post-update
.
cd hooks vim post-update
The vim editor is going to open up, now if you don’t know how to use the vim editor, I’m going to walk you through it, don’t worry.
Click a
, this allows you to start inserting text. Here’s what you’re going to write:
#!/bin/sh export GIT_WORK_TREE=../../path/to/your/live/files git checkout -f
Note the path to your live files. In my case, I have to jump out of the current folder, back to my root and THEN navigate to my themes
folder, hence the ‘../../’. You change that path to reflect how you set things up.
This checks out your files to the themes/your-theme-folder
folder. (If you don’t know or need to refresh your memory on what checkout is in git, here you go.)
To save the file and quite vim, hit ESC
, and then type :x
.
Now in order for the hook to fire when we push an update, we need to make sure the hooks have permission to execute.
//if you're in the hooks folder, navigate out one level cd .. chmod ug+x hooks/*
Now everything is set up on our staging server and we just have to connect it to our local repo.
Open up a new tab in Terminal (or iTerm 2 in my case) and navigate to your local project folder.
Quick refresher on how remotes work in Git.
git remote add [alias] [url]This sets up the url for pushing and fetching changes, and you make it happen by going:
git push origin // origin is the alias in this case, which is what most of us useHowever, most of us only use one remote so we can easily get away with:
git pushWhen you have multiple remotes, you can specify which remote you want to push changes to:
git push [alias]
We are going to add the staging server as another remote with the alias staging
git remote add staging [email protected]:your/path/to/repo
You’ll be prompted for your password perhaps, and you can enter it. (To save the ssh password and not keep retyping it, follow these super helpful instructions from GitHub.)
Now any time you want to push updates to the staging server you can just go:
git push staging
But you see, I’m pretty lazy and I want to be able to type in a single command that pushes changes to both BitBucket and my staging server. To set that up, we’re going to create a remote alias called all
that points to both urls. This requires a little bit of vim work again. Make sure you’re in the local project folder.
vim .git/config
Once again, you’ll press a
so you can edit the file, then navigate to the bottom of the file and add this:
[remote "all] url = add bitbucket url here //(e.g. https://[email protected]/wanderoak/repo.git) url = add staging server url here //(e.g. user@server:/path/to/git/repo.git)
You’ll be able to type in git push all
and update both BitBucket and the staging server.
Except that’s still too much typing for me. So we’re going to create a command line alias for it. Now, you may already have many aliases and know how to add them, or this may be your first one! If you use git a lot, I recommend creating aliases for your most used commands. git add
may not seem like a lot of typing, but when you’re working on a large project and you have to type it at least 7000 times in a day, it gets old really fast, so I use ga
.
If you don’t know how, basically you’re going to navigate to your home folder, check if a file called bash_profile exists, and if not, you’ll create one using the Terminal text editor Nano and add aliases to it:
cd nano .bash_profile
Now, to create an alias gpa
that executes the command git push all
you type in the following:
alias gpa='git push all'
Save your changes by pressing ctrl + o
and exit Nano by pressing ctrl + x
Now quit your command line program (Terminal, iTerm, etc), re-open and navigate to your project folder and test the alias! Here’s a really intense and cool bash_profile to check out, if you want.
Now go test everything. It should all work, beautifully. 🙂 If you have questions, ask! This was my first foray into a technical tutorial, I tried to be as clear and thorough as possible, but I’m open to improving it.