My Squarespace workflow - From beginning to end

I started using Squarespace about three years ago. Coming from an IT background, I’m well aware that other services exist, all of which would allow me to customize my site to my liking and really get into the code; generally things Squarespace doesn’t allow (or necessarily want) you to do. Yet I still went with Squarespace because I just wanted to focus on the content. I didn’t want to bother with any updates or making sure my site is HTTPS compliant and the like. While Squarespace isn’t perfect, it has allowed me to focus on content and not on code. Just a quick heads-up: This post won’t be interesting or useful to anyone who doesn’t use Squarespace, so if you’re on Wordpress or any other services, there won’t be a lot of value in the following lines.

Throughout the years, I’ve learnt quite a bit by using Squarespace extensively and wanted to share my current workflow with the world. Currently I’m running three websites on Squarespace: Lia & Liam, LACPhotography and the one you’re currently reading. Don’t take this as gospel, it’s how things currently work for me. That doesn’t mean it will work for you and I’m always open to suggestions (there’s a comment box below) on how to optimise things. With that said, let’s go into with my workflow, starting with Google Drive.

Google Drive - Where the content is created

I’ve been using Google Drive since before it was called Google Drive. I like the fact that it’s free and I can access my documents from anywhere. Be it my own laptop, my tablet or a friend’s computer, my files are right there (if there’s internet). Google Docs also offers an excellent spell-checker, something I unfortunately still need.

The big overview spreadsheet

I’ve got a big spreadsheet on Google Drive that tracks all of my articles. I’ll enter the title and category of each article and the spreadsheet will tell me, using conditional formatting, what kind of tags I need and give me a URL for the article. I feel like this document is something that will be different for everyone and because I still have a lot of unreleased items in it, I won’t be showing it here.

I highly advise having a big overview of all the articles. I use this to quickly post items on social media without having to influence my analytics data by continuously visiting my own website.

Save time and create templates

This might seem obvious to many, but creating templates will save you a lot of time. I create templates for every type of article on all of my sites. That includes my monthly earning reports, the week in review and general articles.

My templates on Google Drive

My templates on Google Drive

The templates for this website aren’t really interesting, so I’m going to use one from liaundliam.ch as an example. The following is the template I use for new recipes that are uploaded to that site. Inside the folder there are three documents: A Google Sheet, a Google Doc and a HTML file.

Inside the template folder

Inside the template folder

The spreadsheet is used to calculate the nutritional values of each meal. I’ve set it up so that I only have to enter the ingredients and their respective values and the portion size. The rest is done automatically and can easily be copy/pasted into the Google Doc where the recipe is being written. The data in this Sheet is also used to create the markup file (the HTML file in the folder) for each recipe.

Speaking of the Doc: This file is set up so that each recipe has a high degree of uniformity. Three tables and the appropriate headers are already in place, guaranteeing that each recipe looks more or less the same.

Inside the Doc

Inside the Doc

Exporting to Markdown

Markdown is a very simple markup language. I’d write my articles directly in markdown, if Google Docs would support it, but sadly it doesn’t. This isn’t a massive problem because Google Docs supports add-ons! And the best thing is that some lovely person has already created the add-on I so desperately need: Export as Markdown. This will send your article as a Markdown file to your own email. While I’d rather have it just download the document or save it to my Google Drive, it gets the job done quickly and without any problems.

Sublime - Editing the markdown file

The Markdown file isn’t quite ready for Squarespace after exporting. At least for me it isn’t. If all you have is text, then go ahead and upload the content of your file. I however often work with tables and custom CSS, so there are a few adjustments that need to be made before uploading. In this example I’m using a custom CSS for tables on www.liamalexcolman.net and liaundliam.ch. And because they end up rather wide, I need make them responsive. To do that I define the class as _"mytable"_and add To do that I define the class as “mytable” and add <div style="overflow-x:auto;"> before and </div> after each table (that was found here). Next I’ll copy the finished markdown file to my Google Drive folder (in case I ever move away from Squarespace) and copy the content of said file.

Editing markdown in Sublime

Editing markdown in Sublime

Squarespace - Bringing it all together

The final step is taken in Squarespace’s backend. This is where the magic happens and the content is uploaded. Squarespace is a very basic service and as such, is geared towards inexperienced users. I’ve made a few tweaks here and there and it now nicely fulfills my needs.

Adding the Markdown and images

I’ve set the default editor on Squarespace to use markdown (find out how to do that here). All I have to do now is double-click on the block and paste my text. Cut the title and paste it into the title field. Next up I’ll add the images with the handy drag-and-drop interface Squarespace provides.

Details

Next I add details such as tags, a category and a URL. These are taken out of the big spreadsheet I use to track all of my articles (see the beginning of this article). Finally, I’ll upload the thumbnail and publish or schedule my article.


Get in touch

Don't forget to follow me on Twitter, Facebook and Instagram. You can contact me directly through my website or via email. You can check out my portfolio on www.lacphotography.net and find out more about my favourite project on liaundliam.ch.