Filtering by Category: Tools

Helpful Cloning Command in Terminal

I often find myself writing the same line every time I clone a Squarespace site in terminal:

git clone site && cd site && subl .

This is annoying and violates all DRY principles.  So I lightly jumped into the world of bash scripting and came up with a terminal command that will do all of this in one go.


You'll need a Mac, Sublime Text 2 (or 3) and Git installed, and a Squarespace site in Developer Mode.  If you're using Sublime Text 3, see the note underneath step 2 below.


1.  Open up terminal

2.  Assuming Sublime Text is in your Applications folder, run this command (it lets you open up files/folders by typing subl {file} into terminal):

ln -s "/Applications/Sublime Text" /usr/local/bin/subl

NOTE: If you're using Sublime Text 3, run this command instead:

ln -s "/Applications/Sublime" /usr/local/bin/subl

3.  Edit your .bash_profile by running this command:

nano .bash_profile

4.  Scroll to the bottom and paste this in on a new line:

function ssgit(){
git clone https://"$1" "$1";
cd "$1";
subl .;

5.  Hit control, hit Y, hit enter

6.  Open a new terminal window (command + n)

7.  Change to a directory where you normally clone sites and try it out:

ssgit your-site-name

And that's it! You'll clone your site, cd into it, and automatically open up the directory in Sublime Text.

No Comments

Chrome Extension: Squarespace Collection / Block Identifier

There are developers on Squarespace who take full advantage of the Developer Platform and build from scratch.  Then there are the more casual types (myself included) who only want to customize some CSS of a template without flipping on Dev Mode, downloading the repo, and pushing code.

Let's say you wanted to change the line height of an individual text block, or the background color of an individual page.  These are usually not options on Squarespace built templates.  Traditionally, the way to accomplish this would be to inspect the element of each page, and grab the Collection ID (the body ID) or the Block ID to write element specific CSS.  That's a pain.

So I've written a Chrome Extension that allows you to easily see and copy the Collection ID or the Block ID of the page you're viewing so you can forget about digging through the inspector.  Just turn on the extension, find the collection ID or the block ID, click the overlay button, and it's copied to your clipboard.

You can install it here

It should work when logged in or out. Feel free to email me if you find any bugs.

No Comments