Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
27th November 2012

Deploy a live site with Git

Learn how to deploy sites using the Git version control system, allowing for easy branching and rollbacks

There are many version control systems, such as SVN, Aegis and Mercurial. One of the newer, but very popular choices, is Git. Git was developed by Linus Torvalds who created the Linux kernel. While it’s possible to use Git purely locally, or over a LAN, its also great for deploying changes to a live or development website. This tutorial will assume a basic knowledge of how Git works, but will take you through all the steps needed to set up a local GitHub to server workflow allowing multiple users to collaborate, track changes and make branches as they see fit. Git also makes it very easy to roll back any changes you have made, in case any mistakes are made. Using GitHub you can easily see what changes each collaborator has made, and when, which is incredibly helpful when bug fixing. Git recently introduced a new GUI interface for OS X and Windows, which makes using Git even easier to designers and developers, although this tutorial will focus on using the command line, as it’s more powerful.

Deploy a live site with Git

Sign up for Git
Deploy a live site with Git

The first thing you will need is a Git account. Signing up for public repositories is free. If you want to keep them private you’ll need a paid account, but the rates are very reasonable. Go to: github.com/plans.

Install Git

To install Git on Linux enter ‘sudo apt-get install git’. For OS X you can download binaries from: bit.ly/xCCrm, and Windows from here: bit.ly/P3owfw – double-click on the EXE or DMG to install.

Complete install
Deploy a live site with Git

Depending on your operating system, the install process may be a little different, but shouldn’t take too long. There is a GUI for GitHub available, but we’ll be using the command line mostly. To test the install, in OS X or Linux open Terminal/Console, on Windows CMD, and enter ‘git’. You should see the help messages.

SSH Keys

We need to make sure that our server is secure and that only we can make changes to it. For that we use a special file – an SSH key. SSH stands for Secure Shell, and using a key file is more secure than a simple password.

Create Git key

In Terminal enter the command below, obviously replacing the email with the one you used to sign up for your Git account. You will be prompted on a location for the key; hit Enter to use default, and an optional passphrase. Once done, the key will be made, along with a fingerprint.

001  ssh-keygen -t rsa -C “kieron@kieron.com”

Copy the keyfile
Deploy a live site with Git

We then need to copy the keyfile to our clipboard. You can do this manually if you want, or just enter the following into Terminal. If you put your key elsewhere, replace the ~/.ssh/id_rsa.pub part with its location. Once you’ve run that, you’re ready to add it to GitHub.

001  pbcopy < ~/.ssh/id_rsa.pub

Git account settings
Deploy a live site with Git

In your browser go to github.com, and then click on Account Settings in the top-right corner. Then in the left-hand column click on the SSH Key tab. Click Add SSH Key and give it a name, then paste the key into the key area. Then add the key.

Test out SSH access

Now we can test out our SSH access. In Terminal enter the code below, and then press Y and Enter to add the RSA key to your known hosts. You should then see a message similar to Hi kiksy! You’ve successfully authenticated, but GitHub does not provide shell access.

001 ssh -T git@GitHub.com

Create a repository
Deploy a live site with Git

Back on github.com click on New Repository to make a new repo. Enter in a name and description and choose whether to make it public or private. For commercial development it might be wise to keep it private, but for personal projects or ones you wish for others to collaborate on, choosing to go public is a great option.

Clone repo to local
Deploy a live site with Git

Now we want to clone that empty repo to our local machine, which can be done by entering the command below. Replace the kiksy part with your own username, and then the my-dev-repo with the name of the repo we just made, not forgetting to add the .git.

001 git clone git@GitHub.com:kiksy/ HYPERLINK “https://GitHub.
com/kiksy/my-dev-repo”my-dev-repo.git

Create project

You should then see the repo copied to your home directory, ready to be worked on. By default it will only contain a readme, and a gitignore if you choose to add that. Create a simple index.html page to test out the deployment process. We will then add this to our Git stage.

Initial commit
Deploy a live site with Git

Once we have created our first file, we can add it to version control with the commands below. You will need to cd into the directory first – eg
cd home/my-dev-repo. The add command adds everything in, then the commit -m command makes our commitment with a message. Finally git push origin master means we push the changes back to where they came on the master branch.

001 git add .
002 git commit -m “Initial commit”
003 git push origin master

View changes
Deploy a live site with Git

Head back to GitHub: github.com/kiksy/my-dev-repo, and you should see the new index.html file we just created appear in the main window. Next to it you should see the commit message that we just made in the command line. Clicking on the file will show you its contents.

Live server setup

Now lets set up our live server ready to receive changes (you’ll need to have SSH access already set up). SSH into it, and enter the commands below, replacing the my-dev-repo with your own repo. This folder will be where we push to, but the actual files will be linked using a hook.

001 mkdir Repos 
002 cd ~/Repos
003 mkdir my-dev-repo.git

Create a bare repo

Now we need to create a bare repo. This will contain a special post-receive file, which we will use to trigger the copying of files once we push to it from our local setup. Enter the code below to see a success message.

001 cd my-dev-repo.git
002 git init –-bare

Add remote

A remote is a place where you can push or pull files or changes from another Git repository. Run the following commands, replacing the my-developement-site.com part with your own site’s URL, and the my-dev-repo with your own repo. The command adds a remote called live, which can then be pushed or pulled from.

001 git remote add live ssh://my-development-site.com/home/Repos/
my-dev-repo.git


Create working directory

Now, it is time for us to create the actual location on the server where the files will be placed. Note there is no need to add a new directory, the git clone will automatically make one for us. Once this has completed we are ready to edit our hooks files.

001 cd ~/www/my-dev-site.com/web
002 git clone /home/Repos/my-dev-repo.git 

Edit hooks

From the Repos directory, change into the relevant Git repo ie my-dev-repo and then cd into the hidden hooks directory. We then need to create a new file called post-receive, which will run everytime we push to the live server. Here we are using the nano text editor to create it, but you can use  Vi or whichever is your favourite.

001 nano post-recieve

[then copy the following to the file]

002 #!/bin/bash
003 export GIT_DIR=/var/www/test/testdev/.git/
004 export GIT_WORK_TREE=/var/www/test/testdev/
005 cd /var/www/test/testdev/
006
007 git fetch
008 git merge origin/master
009 git submodule update –init –recursive

Change permissions

It’s very important to make sure that every file and directory has the correct permissions so that the code executes properly. We need to change the permissions on the post-receive file that we just created, but also make sure the working directory and Git repos are writable by your user.

001 sudo chmod a-x post-receive

Adding the user

Adding the user to our group ensures that we can push the files, and the post-receive hook runs, and then the files can successfully be moved and copied by the server user. Here we are changing the group and permissions for the ubuntu user, but you would change this to whichever you log in as.

001  sudo chgrp -R ubuntu *
002 sudo chmod -R g+ws *
003 git config core.sharedRepository true

Push to live

Now you can make some changes to your local site, and then push them up to live. Add some new lines to our index.html and then commit them with a message. Git push to the remote, and then the branch (by default master). You should then see the progress of the push.

001 git commit -a -m “some new changes”
002
003 git push live master

View results!
Deploy a live site with Git

Now you can open your site and view the changes. You can use the git log command to view a list of commits, and then roll back to them if you want to undo any changes that you or other people have made.

001 git log

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • mina

      that’s bazaar :)