Clone a Drupal Git repo and set it up locally

Wednesday, 1st April, 2015

Part 1: If you've not used Git with Drupal yet, here's where to start.

This is part one of a three-part tutorial, where you will learn how to use a Git GUI with Drupal to make some theme tweaks on a live site. We will cover:

  • Setting up a local stack (in this case Acquia Dev Desktop 2).
  • Creating an SSH key in Terminal on the Mac
  • Cloning an existing Drupal site repository using Sourcetree
  • Downloading and connecting to your live site's Drupal database dump file
  • Applying theme changes to the cloned site with CSS
  • Merging and pushing your changes to live with Sourcetree

For those of you that have already done this, part two is here.

git flow illustration

Version control with Git

Have you ever lost or overwritten some work you’ve spent hours toiling over? Or even worse, someone else’s? This happens a lot when small teams use FTP to work directly on a live website or application. It's not a great way to work and it is can be dangerous, especially if you are human. Humans make mistakes.

Version control is the way most teams get round this, and Git is a standard that many dev teams use in development workflows. SVN is another relatively popular versioning system.

Believe it or not, FTP is still used in many web development teams to download and upload files to hosting environments. Yes, it is simple and quick to set up, but can be dangerous, insecure, and slow, especially when used in a team dev environment. Many cloud hosting environments use a Git workflow to provide a historical list of development changes made, and a record of who made the changes.

We've outlined a pretty simple way to get started by using an existing Drupal 7 site which needs some small changes to CSS on the front-end theme. The site is live and has had numerous developers working on it. I just want to use this to migrate a workflow

Set up your machine’s local environment

In order to work locally on your machine, theming and configuring Drupal sites without connecting to a hosting environment, you will need to set up a local development environment, often referred to as a ’stack’. Everyone has preferences about how their own stack is set up, but for complete local development beginners, it is best to use a pre-created LAMP stack installer.

As we are using a Drupal site to demonstrate this workflow, and as we are certified Acquia Partners, we therefore recommend Acquia’s Dev Desktop 2 (previously called DAMP) which can be downloaded and installed here:

www.acquia.com/downloads

A quick search online will reveal a wide variety of LAMP stack installers around such as MAMP, XAMPP, WAMP (for Windows).

Install the stack you decide to use (I am referring to Acquia’s Dev Desktop here).

The installer will close and Dev Desktop will be running. I find it’s useful to pin this to the dashboard for easy future access.

Acquia Drupal dev desktop default app

Now it’s safe to quit out of the Dev Desktop while we run through some preparation for the local changes we want to work on for the site.

Create your SSH key using Terminal

Create an SSH key on your local machine. You can easily do this by using Terminal to generate an SSH key on your mac.

  • Open Terminal by using spotlight search, typing ‘Terminal’ and hitting enter
  • Enter the following command in the Terminal window: ssh-keygen -t rsa
  • Press the ENTER key to generate the SSH key
  • The next prompt is to confirm a location to store the SSH key
  • Press the ENTER key to accept this default location

If you are using a pass phrase on your Mac (you should be!) then Terminal will prompt you for this now, and you will have to enter it twice, as prompted.

After a pass phrase is entered and confirmed, the system will generate the key pair. You will also see something like the random art image below.

SSH key randomart image in Terminal Mac OSX

Please remember not to share your secure private key with anyone. Not even your pet goldfish.

Your public key is saved to a file id_rsa.pub in the default directory you accepted in the Terminal command line, probably here on your system (if you're using a Mac) ../Users/YourName/.ssh/id_rsa.pub

This .pub file is the SSH public key file which you need to upload to your hosting environment so that you can connect securely when ‘pulling’ (downloading) repositories and ‘pushing’ (uploading) changes that you make.

Unhide your public SSH key

In order to choose your public SSH key for uploading, you will need to reveal it on the Mac which will by default hide the .ssh folder.

Again, open Terminal and then type the following on the command line:

defaults write com.apple.finder AppleShowAllFiles YES

Press the ENTER key and then navigate back to Finder. Here you will need to refresh Finder before you can see the previously hidden files. The files and folders that were previously hidden will be shown slightly faded (see image below).

Show hidden files on Mac OSX for developers

Upload your SSH key

Next, log in to your cloud hosting environment and navigate to your personal profile, which is usually where you will add your public key. In our cloud platform I can just click [+ Add a new key]

You will often need to open and copy the public key (I just drag the id_rsa.pub file into Chrome, or open in a plain text editor and cmd+c the text).

  • Paste the text into the text field that is provided by your hosting environment
  • Click [Upload] and the key should successfully be added

Well done for getting this far! Next steps continue from here in part 2 where we will clone the Drupal site repo with Sourcetree and problem-solve common local issues.

Curve
Drupal and UX Design Agency

UK Drupal Agency and UX Design Team with our very own usability testing lab in Leeds. We work with national charities, NGOs and private sector clients.