Locally running SquareSpace

squarespace

What is SquareSpace?

Squarespace is a content management system that enables users with little to no technical experience easily build, manage and host a website or blog.

If the default templates and behavior isn’t quite what you’re looking for, the platform offers “Developer Mode.” Turning this mode on for your site allows you to write custom templates and code snippets to modify your site’s default look, feel and behavior.

Tip: If you turn OFF developer mode, all that custom code disappears into the aether.  More about that here.

Why run locally?

As anyone with development experience knows, changes don’t always look or behave as planned and bugs happen.  To remove the risk of deploying a change that could break your site (or your client’s site) during the development process, it’s great practice to develop those changes locally, test them, and then push them to your live site once you’re sure they’re production ready.

Getting Setup

Install the Prerequisites:

  1. Install Git (Guide)
    New to git? Checkout this primer.
  2. Install Node Package Manager (NPM) (Guide)

Install the SquareSpace Developer Platform:

While I found there to a few more steps (listed below), the official SquareSpace Guide is just the right place to start after you have your prerequisites installed.  Check it out here: https://developers.squarespace.com/local-development/

Finishing the Setup (The stuff the guides don’t tell you)

Site Name

If you follow the directions linked above verbatim, at the end of it you might find you have this:Screen Shot 2016-08-31 at 12.52.25 PMThis means you still need to update your template.conf with your site name. In this example, I am using the domain name demotesttest.squarespace.com.  When you open template.conf you’ll find that it doesn’t yet have a server section.  You’ll need to add a server property and within it add the siteURL property/value to the object.

    "server": {
        "siteUrl": "https://demotesttest.squarespace.com"
    }

Add the above snippet (updating for your site’s actual name) to template.conf
Tip: Don’t forget the comma before and/or after the server section.  See the full template.conf below for more help.

What is my site’s name? How do I change it?

You can view and change your site’s name on Squarespace.com by navigating to
Settings -> Domains.
Recommendation: You might want to make your site’s name something a bit easier to remember than the auto-generated name.
More Information here: https://support.squarespace.com/hc/en-us/articles/206541717

Authentication

After updating your template.conf and restarting the SquareSpace server, you might find yourself staring at a message like this one:

Screen Shot 2016-08-31 at 1.09.54 PM

SquareSpace essentially wants to pull down and cache everything from your live site to run it locally and to do to that it needs permission to get at your git repo.

So your new login command should be:

squarespace-server https://demotesttest.squarespace.com --run-authenticated

After the server starts up, it will prompt you for your SquareSpace email and SquareSpace password:

Starting DevelopmentServer

           _
       /  /      _
      /  /  /  /   \
     /  /  /  /  /  |    Squarespace Inc.
    |  /  /  /  /  /     Local Development Environment
     \ _ /  /  /  /
              /  /
            -

Version 0.4.5
Squarespace email: <your squarespace email>
Squarespace password: <your squarespace password>

Style’s not loading?

Opening http://localhost:9000 in your browser should have all your content.  I found if you followed along with the setup from the basic template, you might find all your content is there and none of your styles.

I found that the base style needs to be explicitly listed in the template.conf when running locally.  To do that ,we’ll add base.less to the stylesheets array in template.conf.

Open template.conf, find the stylesheets section and add base.less to the array:

"stylesheets":[
    "base.less"
   ],

Voilá

This time when you start your server, everything should be loading as expected.

You’re all set to begin development: alter code and refresh your browser to view the updates (you do not need to continually quit & restart your server to see changes).

Once your local changes are ready for prime time, you have to use git to commit them and push them up. (Git Primer)

Happy Coding!

Full Template.conf:

{
   "name":"Developer Platform Beginner Tutorial",
   "author":"Squarespace",
   "navigations":[
      {
         "title":"Main Navigation",
         "name":"mainNav"
      }
   ],
   "layouts":{
      "default":{
         "name":"Default",
         "regions":[
            "site"
         ]
      }
   },
   "stylesheets":[
    "base.less"
   ],
    "server": {
        "siteUrl": "https://demotesttest.squarespace.com"
    }
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s