Saturday, October 28, 2017

Setting up Sqarespace Local Development

By now most everyone in the web design or hosting space knows of Squarespace. It's a great place for anyone who wants a well designed website without having to do much leg work for a beautiful and simple design. The only problem with templates though, is that someone could have the same looking website and could be easily mistaken for yours. In comes designers, and for anyone wanting to use Squarespace and have a custom template, they make it pretty easy to setup a local development server with Node.js, npm, and git.

Primarily I run Linux on my laptop, Ubuntu 16.04.3 LTS to be exact and setting up the local development server wasn't too difficult after installing Node.js and npm. There are various ways to install Node.js, the one that I would not recommend is installing it through the Ubuntu apt package manager. These are usually a few versions behind the latest, and may not work (at least it didn't work for me). The easiest way was using the nodesource package manager to do the install. These are not maintained by the Node.js core team, rather their respective maintainers.

For Ubuntu, the guide here outlines the install in a two easy steps

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash
sudo apt-get install -y nodejs

The above commands download the latest 6.x version and adds the nodesource repository to the apt package manager source list, then running the normal apt-get install will pull from the repository to install. After Node.js installs, the next step is to configure the environment variables and change npm's default directory.

Some installations may require changing of the permissions to npm's directory. In my case, I needed to change the default directory. When running the command:

npm get prefix

It returned the location as /usr instead of other configurations where /usr/local was the default directory. In this case it is recommended to change the location rather than change permissions on /usr because you may inadvertenly change something that would make your system not work properly.  To change it:

1. Make a directory for global installations:
mkdir ~/.npm-global

2. Change npm configuration to use the newly created directory path"
npm config set prefix '~/.npm-global'

3. Open or create ~/.profile and add the following:
export PATH=~/.npm-global/bin:$PATH

4. Update system variables with the command in terminal:
source ~/.profile

Now you can test by downloading a package globally without using sudo:

npm install -g jshint

... or move on to the installation of the Squarespace local development.

npm install -g @squarespace/server

That's all. Now you can use the local development server to create Squarespace templates that are custom for your site.