Using Git

This post is for those who have never used Git and are afraid of the command line.  By the end of this post, you'll sort of know how to use Git and be only moderately scared of the command line.

What is Git anyways? Git is a version control system.  Let's say you push a bunch of code to your Squarespace site with Git, only to realize you need to revert back to the previous state of the site before the push because you've discovered a bug.  Well, this is what Git is for.  You can easily 'roll back' to the previous version while you figure out what went wrong.

1. Install Git

You can download Git here - if you're on Windows you'll need to take a few extra steps (which are outlined on Git's website).  Going forward, this tutorial assumes you are using a Bash-like Terminal application (this is standard on Mac and Linux machines).  Windows users will need to download a Bash client for the following commands to work.

Once Git is installed, open up your Terminal application (also known as a Command Line Interface, or CLI).  Type in the following:

git --version

This will return the current installed version of Git.  Anything you want to do in the CLI with Git must be preceded with the word 'git.'  So for example:

git --help


git add styles/styles.less

Now, let's go over a few useful CLI commands (not specific to Git, but for navigating through folders and filepaths on your computer).

  • ls - short for 'list' - when you type ls and hit enter, a list of files and folders in your current directory will appear.
  • cd [directory-name] - means 'change directory'.  This is how you move inside a folder in the CLI (similar to double clicking a folder if you were doing it the way you normally would on the desktop).  Don't put the actual directory name in square brackets.
  • cd .. - this goes up one level, or back (as if you hit the back button to go back to the previous files and folders).  
  • mkdir [directory-name] - means 'make directory', this creates a new folder at the current file path.
  • pwd - means 'print working directory', which just tells you the current filepath or folder you're in

Okay - that should be enough to move around your computer through the CLI and create files and folders where you need to.  Now let's mix in some Git.

2. Clone your Template Repository

A repository, or repo for short, is just a folder where all your template code and version history lives.  All Squarespace sites are a Git repository by default, which means you can easily clone the repo, make some changes, and push it back to Squarespace.  Ready for your first Git command?

In your Terminal, make a new directory somewhere (remember, mkdir [directory-name] and then move into it (remember, cd [directory-name]). On my own computer, the folder with all my Squarespace sites is in a directory called Squarespace. So here's what that would look like in my CLI:

mkdir Squarespace
cd Squarespace

Now you're inside the Squarespace directory.  Type pwd to be sure of your current path.  Now, type ls in the CLI.  Nothing appears?? That's normal - we just created the directory and there's nothing inside yet.  Let's clone your Squarespace site! Type this:

git clone https://[your-site-name] [your-site-name]

What just happened? You told Git (by starting with 'git') to 'clone' (or download/copy) the repository hosted at https://[your-site-name] and put it in a new directory called [your-site-name].  Remember to replace [your-site-name] with whatever your Squarespace URL is (and don't put it in square brackets).  

If you now type ls - you should see one new folder in your Squarespace directory, and that's where your Squarespace template repository lives!

Now, let's move into that new directory.  Type cd [your-site-name] and pwd to be sure of where you are.  Then enter ls to see what this repository has to offer.  It should look something like this:

Awesome.  Leave the Terminal app open for now, but let's open the repo in a text editor so we can make some changes.  You can do this through your Finder.  I don't have to explain this part.  Just open the folder in Sublime Text, or Coda, or whatever you have installed.

Once you've opened it, open your /styles folder and the base.less file.  Make any change at all to the CSS.  Change the background-color of the body element, for example.  Then save it.

Go back to to your Terminal app (CLI), and type in the following command:

git add styles/base.less 

What you're doing is telling git to 'add' the base.less file for git to track changes.  Now, you'll tell git to 'commit' the change to the repository, using the following command:

git commit -m "changed something in base.less"

The flag -m followed by the comment in quotes adds a commit message, so that you can remember what this commit was for.

Finally, push the commit to your Squarespace site using this command:

git push

And those are the basic commands you need to know to clone your repo, track changes, and push commits to your Squarespace site via Git and the CLI!

There are some other useful commands as well, such as git pull (and git pull --rebase origin master) - which pulls the latest code from the repository (in case you are working on the site from two different computers).  Be sure to read the Git documentation to know what you can really do with Git, as it's super powerful.