This tutorial will setup a development environment that will include a local server with MAMP, a real server (Host Gator), and setup version control with git and GitHub. We will easily be able to deploy our local changes to our live server with simple git commands. Setting up an awesome work environment is key for any web developer, but it is also a very tedious process, so this is the golden roadmap for starting your next big project. Make sure to bookmark this page, and also share it with your friends and enemies. I hope you enjoy it.
The Walkthrough Videos:
When you’re developing a website you want to be able to keep track of all of the different versions that you have released because at some point you may have to revert back to a previous version if your newest release breaks some functionality, or worse, the entire site. You also don’t want to make your changes on the live server, because of Murphy’s Law, so we want to use free software like MAMP (mac preferred, and used in this tutorial) or XAMPP. MAMP or XAMPP will set up a local server, php, a mysql database, and whatever you need to mimic what your actual server looks like. Therefore, we will test all of our changes on our local server before we push them to our live server. Lastly, we need the ability to show our changes to the world so we need to be able to push our repo to a live server, such as a Host Gator server (yes, that is an affiliate link and you should use it if you’re looking for hosting, because Host Gator is by far the best hosting service there is). We could use some type of FTP program to upload our new changes to the live website, but that tend to be a slow and tedious process. Instead, we will use a couple of git commands to update our live server with all of these changes. This tutorial will walk you through all of this and show you how to connect everything together with SSH access. If you have a hosting service besides Host Gator, that shouldn’t be a problem, but you may have to do a little research to make sure you can SSH into your server (if you have no idea what I’m talking about, don’t worry I’ll catch you up to speed).
Setting up a GitHub account
Even though this tutorial won’t really talk about how to setup or use git, you will need to make sure you have a Github account setup. In this tutorial we will use very simple git commands and you will be able to recognize what is going on even if you haven’t used Git or Github before. If you want to learn more about Git and GitHub, you can checkout our mini series that covers the basics of Git and GitHub. That mini series will also help you setup and configure your GitHub account on your local system. For this tutorial, you probably won’t even have to learn the basics of Github, but if you’re on Windows, you want to make sure you’ve downloaded GitHub and Git bash; on mac, you can just use your Terminal to run your Git commands.
The Basic Principal of setting up our Work Environment
We will have a git repository in three locations. The main repo will be stored on GitHub, then you will be able to clone that repo onto your local system to make changes which MAMP or XAMPP will display on localhost. If you like the changes you’ve made, you’ll be able to commit those changes back to GitHub. Lastly, you will pull the GitHub repo onto your live server (Host Gator), which will update your live site. Here’s a picture to display the concept… as well as my terrible photoshop skills:
Setting up a local apache server with MAMP or XAMPP:
Now, that we have a GitHub account, we will need setup our local apache server. Like I’ve mentioned I will be using MAMP, but you can use XAMPP if you’re on a Windows operating system; it shouldn’t make much of a difference. Just download and install whichever one you choose. If you choose XAMPP and want some more information on how to set it up, you can checkout how to setup an XAMPP Apache server and MySQL for Android tutorial. All you really need to know is that your test location will be in /Applications/MAMP/htdocs (or /Applications/XAMPP/htdocs). We will setup our project here when we have created our main GitHub repo which we will do next.
Setting up your GitHub Repository with local SSH key
Now, we want to actually setup our Git repo and setup SSH keys which allows a secure connection between GitHub and our local computer. We will eventually setup the SSH key for our server as well so that our Host Gator server can connect with GitHub as well.
Go to http://www.github.com and login to your account and create a new repository, by clicking that little green button.
Give the new repository a name. I’m going to name my repo TEST just for the purpose of this tutorial. Click the create button and you should be redirected to a page that shows you how to get things setup. You also have the option to clone the repo via SSH or HTTP. We want SSH, and it should look something like this:
1. Checking for a SSH Key
Now we need to setup our SSH keys to make a secure connection from GitHub to our local computer. From GitHub, click on your “Account Settings” wrench icon and then select “SSH Keys” from the sidebar.
We need generate an SSH key on your local computer and add it here. Open up Terminal if you’re on Mac (Applications > Utilities >Terminal) or Git Bash if you’re on Windows (I think) and change directories (cd) to ~/.ssh to see if you already have generated an SSH key. Just run the following commands:
cd ~/.ssh ls
“ls” will list all of the items in this directory, if you see id_rsa.pub or id_dsa.pub you can skip the next step because you already have a generated SSH key on your computer.
2. Creating a new SSH Key
Now, that we know you don’t have an ssh key already setup, let’s create one. Type in the following and just press enter when it asks for where you want to save the ssh key.
ssh-keygen -t rsa -C "email@example.com" Generating public/private rsa key pair. Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Just Press enter] ssh-add id_rsa
Enter a passphrase (password) for access to this key. *Make sure you remember this*
Enter passphrase (empty for no passphrase): [Type a passphrase] Enter same passphrase again: [Type passphrase again]
You should see something like this:
Your identification has been saved in /Users/you/.ssh/id_rsa. Your public key has been saved in /Users/you/.ssh/id_rsa.pub. The key fingerprint is: 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db firstname.lastname@example.org
3. Adding the SSH key to GitHub
If you try to list (ls) the contents of your ~/.ssh folder you should now see “id_rsa.pub” as one of the files. Let’s copy the contents of this key by typing the following command into Terminal:
pbcopy < ~/.ssh/id_rsa.pub
This will copy your key. Go back into GitHub and “Add SSH Key” from where we left off (Account Settings > SSH Keys > Add SSH Key). Just paste the Key (Command + V on mac, or Control + V on Windows) and give the Key a name, such as “Travis’ Macbook” or something more clever.
Cloning, Changing, and Pushing a Git Repo
Now, that our local computer has access to clone and push data to GitHub, let’s clone our repository into a location where MAMP can recognize it. In Terminal find the “htdocs” folder that MAMP or XAMMP setup and change directories into that location.
Now, we need set up our Git repo in this location (if you want to make it in a sub-directory, feel free to) run the following git commands to update the README, connect with the git repo that we started, and push the commits to that repo. *Make sure to use your repo instead of mine (email@example.com:TravisCornelius/TEST.git)*:
touch README.md git init git add README.md git commit -m "first commit" git remote add origin firstname.lastname@example.org:TravisCornelius/TEST.git git push -u origin master
If you refresh the page on GitHub, you should see there is a new file called README.md within our repo. Now you can add files into our local htdocs directory and push these changes to GitHub. Generally, you would throw in whatever framework you’re using (for example CodeIgniter) for your project in the htdocs folder an push that to GitHub, but for this tutorial we are just going to create a simple index.php file. Open your favorite text editor (I use Aptana for web development) and create a simple php file and save it within the MAMP/htdocs/ folder as index.php:
<?php echo "I'm testing MAMP"; ?>
Once you have this file saved, make sure MAMP is running, and you can open up any browser, such as chrome and type in the URL: http://localhost:8888. If everything is setup properly, you should see the output of our simple php file we created.
Now, let’s push this change back to GitHub. Your Terminal window should still be open, but if it’s now open a new Terminal window or Git Bash and change directories (cd) back into the /Applications/MAMP/htdocs and make your git commands to push the changes back to GitHub (Again, you can learn the basics of Git and GitHub if you really want to understand the git commands)
git add -A && git commit -m "added index.php" git push
Now, we have pushed the changes back to GitHub. The next thing to do is to setup our live Host Gator server’s SSH keys and git directory so we can deploy these changes on our live web site!
Setting up Shell Access to Host Gator and SSH Key
If you’re not using Host Gator, you may have to do some research to see if you can use SSH Access, maybe even customer service can help setup access. For Host Gator you are able to, but by default it is shut off. For the sake of simplicity, I would pull up the email your hosting service sent you when you signed up with them. After changing some values, it should look something like this:
Thank you for your order with HostGator.com!
You can login to our billing system at http://gbclient.hostgator.com/login, using the email address we sent this email to, and the password sdfsdfucjsdfjkcs
Shared Plan: Business
Your Control Panel: https://gator8392.hostgator.com:09d9
First, we have to Enable SSH Access from Host Gator. You will have to go to http://gbclient.hostgator.com/login and log in with the billing password, in this example it’s “sdfsdfucjsdfjkcs”. Once you are logged in you want to:
- 1. Under Hosting Packages, click View Hosting Packages.
- 2. Find the package you want to modify and click on Enable Shell Access.
That’s it! Simple enough. Now we need to setup our ssh key on the server so that our Host Gator server and GitHub can communicate. It may take a couple of minute for the enabled SSH access to take affect, but you can try to make a connection to your Host Gator server from Terminal to make sure that it is in fact enabled. Open a new Terminal window and type in your Host Gator username and password (from the email) into the appropriate place:
Note: depending on your server, you may enter through a port other than -p 2222. Check your hosting service for details.
ssh -p 2222 crazyUser@yourdomainname.com password: [ENTER YOUR PASSWORD EX] sdfsdfasdfas
If your server is successful you should be in your Host Gator server. You can do a quick test to list the server’s directories, and you’ll see something like this:
crazyUser@yourdomainname.com [~]# ls ./ .bash_profile .emacs .lastlogin etc/ tmp/ ../ .bashrc .ftpquota .pki/ mail/ www@ .attracta/ .contactemail .gemrc .ssh/ perl5/ .bash_history .cpanel/ .gitconfig .trash/ public_ftp/ .bash_logout .dns .htpasswds/ access-logs@ public_html/
Yep, that’s all the junk in our server. Let’s find the location of our server’s authorized ssh keys:
cd .ssh ls
You should see something called authorized_keys, we want to append your local public key (~/.ssh/id_rsa.pub or ~/.ssh/id_dsa.pub from your local computer) to the file~/.ssh/authorized_keys in the server. Create new authorized_keys file if it doesn’t exist and add contents. Back in a new Terminal window (or a Terminal window that isn’t connected to the HG server), type in the following command to copy the local computer’s key and append it to the server’s ssh authorized_keys file (again note to change your username and hostname:
cat ~/.ssh/id_rsa.pub | ssh -p 2222 crazyUser@yourdomainname.com "cat >> ~/.ssh/authorized_keys"
That will add the connection from our local computer to our Host Gator service so we don’t have to enter our server password every time we SSH to the server ( ‘ssh -p 2222 crazyUser@yourdomainname.com’.)
Cloning, pulling, and updating our Git repo on the server
The last thing we have to do is clone our git repo onto our server and test that it is working properly. Let’s SSH into our server. You should already be familiar with this, or even already have a Terminal window open that’s SSH’ed in, but if not run : ssh -p 2222 crazyUser@yourdomainname.com and go into your main directory where your web site will be, generally it is in the www location, or var/www and clone your git repo. The problem with this is that it will clone your project into a sub-directory “TEST” and therefore your site’s url would be yourdomainname.com/TEST if you wanted to see anything. But there is a way to strip out the contents of the directory when you are cloning your into the current directory if you just add a “.” at the end of your clone (but the directory you’re cloning into has to be completely empty):
ssh -p 2222 crazyUser@yourdomainname.com cd www git clone email@example.com:TravisCornelius/TEST.git .
Sometimes either GitHub or your server won’t allow you to run the previous command to clone in your repo. So, you may have to do it the long way and using the http clone (found on your GitHub’s repo page), and then change into that directory and move all files and folders up to the previous directory, then move back to the previous directory and lastly removing that now empty folder. You’ll only have to do this the first time you setup your repo on your server:
ssh -p 2222 crazyUser@yourdomainname.com cd www git clone https://github.com/TravisCornelius/TEST.git cd TEST/ mv * .[^.]* .. cd .. rm -rf TEST
See it in action!
Now that we have everything set up, let’s see how easy it is to make changes to our local repo, github repo, and then deploy it to our live server.
Go back and edit that index.php file we created in /Applications/MAMP/htdocs to say something like:
<?php echo 'Updated content'; ?>
Save it and go to your localhost:8888 and see that has changed locally. If you approve of the changes add them and commit them to GitHub from the Terminal:
cd /Applications/MAMP/htdocs git add --all git commit -m 'updated index.php' git push
Now, that our git repo on GitHub is caught up with our changes, let’s deploy it live! In terminal SSH into the server and pull the repo:
ssh -p 2222 crazyUser@yourdomainname.com cd www/ git pull
That’s it! We have now deployed all of our local changes onto our live site! You also have an awesome work environment set up to create your next amazing website!
I hope you enjoyed this walkthrough and it is of use to you. Feel free to donate if you can, so we can continue to produce awesome content! Also, feel free to send any recommends to us as well!