Squarespace vs Coding Your Own Blog
Published on 2021-02-21
TLDR: Services like Squarespace, Wix, and GoDaddy are great if you aren't interested in coding or if you want something like e-commerce but if you can code I recommend coding and hosting your own simple blogs. It was easier I thought.
Recently I decided to manually code and host this site instead of using Squarespace. I am super happy with how it went and my new setup so I wanted to give a quick rundown of my experiences and some of the pros and cons. Hopefully this may be helpful if you're deciding between coding and hosting something yourself or a What You See Is What You Get (WYSIWYG) solution like Squarespace, Wix, or GoDaddy.
Originally my personal site was an Angular app hosted on Github Pages. It was partially a personal site and partially a demo project to help me learn and to land my first job. Once I got said job the blog slowly became out of date and Angular 1 was as well so I wanted to make a change. I didn't have a ton of time anymore so I wanted something easy to update. I have to admit, my original site was pretty terrible. Everything was manually coded so updating it took a while. I wasn't aware of any tools for easily making static sites with content so I thought of maintaining my own site as harder than it actually was. I was also listening to a ton of podcasts and watching a lot of YouTube at the time, so I bet you can see where this is going... Squarespace.
Squarespace was great compared to my angular site. They handled a lot of stuff automatically that I was just learning was important but didn't know how to do myself like SEO, RSS, and some performance optimizations. My Squarespace site was easy to update, showed up on google, and was faster and prettier than before.
At the same time I was starting to get curious about some new web technologies. We weren't really starting any brand new web projects at work and I wanted some personal projects to keep up to date. I was super curious about learning Svelte and Sapper and I wanted a project for it.
All of these factors combined with my general inclination to do stuff myself so I took the plunge. I ended up with a site that is cheaper, faster, easier to update, and in my opinion prettier. I'm so happy with how it went I wanted to share so anyone in my situation can learn from my experience and do this earlier.
I know it is weird to include the solution before the problem but it's hard to compare Squarespace to something if I don't first lay out what I am comparing it to. So here's a quick sketch of what I am using now.
My blog only needs to be a Static Site and I wanted to take advantage of that. A static site means that the whole website is just a bunch files. For example, this very post. It is the same post for everyone, and it doesn't change unless I manually update it. This is different from Dynamic Sites where the same page may change, like how your twitter feed needs to stay up to date with the latest tweets. Static sites can be way faster and cheaper to run than dynamic sites because every page can be cached and you don't need to run any code on a server.
Most people I know of host their static sites for free using Github pages. That's a great option and I'd recommend it to most people. I have always been a bit of a DigitalOcean fanboy myself and I wanted to try their new App Platform. For static sites I'd say DigitalOcean has rough parity with GitHub Pages and GitLab Pages. All these solutions are free (though DigitalOcean only lets you have three free static sites). All of them let you auto-deploy from merging into your repo. DigitalOcean gives you some free CICD minutes even on for a private project so that may be attractive for some people. Personally, I found DigitalOcean Static Sites to be easier to configure than GitHub pages as well. The main benefit to DigitalOcean's App Platform, in my opinion, is they also support non-static sites for a fee. I have some aspirations to build some more complicated features so I am happy to have a solution that supports it. The takeaway here is there are some excellent solutions out there now that are free and require next to no setup and maintenance.
The main reason I embarked on this project was to learn Svelte. I wouldn't say Svelte is necessarily the best tool for making blogs since it is probably more than you need. Server side rendering was a hard requirement for me so I used Svelte's server side rendering solution Sapper. Sapper is soon to be replaced by SvelteKit so I would caution you from starting a Sapper project unless you are willing to transition it. All that said I loved the Sapper experience. Sapper let me build a server side rendered blog quickly and easily while learning Svelte which was exactly what I wanted.
To make my website easy to update I created my own mini Content Management System (CMS) inspired by the Sapper tutorial. Now to make a new post I just need to write some markdown and add it to a folder and the post can go live. This is even easier than adding a new post was in Squarespace and it still leaves me the option to make custom pages.
My Problems with Squarespace
I was already paying for my domain name going into the website process and I used the same domain for Squarespace and my self-hosted solution. I pay $50 per year for a
.io domain from Hover (I did say I listened to podcasts...). Squarespace includes the domain in all of their plans so if you are using that it may effect the cost, but that is tiny compared to the $192 per year for the Squarespace basic plan and even less compared to the $312 per year I had to pay for the Business tier to get my syntax highlighting to work. Also the trendy
.io domains cost a premium, you can get a
.com for as low as $15 per year.
Since my site is static I can host it on the DigitalOcean App Platform as a starter app for FREE. This includes https, automatic deployment, a global CDN, and DDoS mitigation. A CDN is a Global Content Network it keeps cached copies of your site all over the world so it will load fast for everyone. DDoS protection protects you from people using robots to spam your site until it overloads and shuts down. I assume DigitalOcean offers this for free to compete with Github and Gitlab's pages offerings which offer the same features for free.
Here's a quick price summary:
|Service||Provider||Monthly Cost||Yearly Cost|
|DigitalOcean Static Site||DigitalOcean||$0||$0|
|DigitalOcean App Pro||DigitalOcean||$12||$144|
Overall I was able to save $26 per month by switching to self hosting. This is a huge win for me and I kind of regret waiting as long as I did.
Code can be easier
One of Squarespace's key selling points is that you can make a website without needing to code. If you don't know how to code and have no interest in learning this is great; you should use something like Squarespace. It is not worth it to learn to code if you don't want to just so you can have your own site. But if you do know how to code, or you want to learn, this code-free approach is actually a bad thing.
Coding the blog yourself definitely takes some more work up front but now I feel like I can make changes even faster than before. Writing a post is now just writing a markdown file in the right directory when before I had to do some tweaks to it to make it fit in with SquareSpace's styles. If I have images in my markdown I can just save them to a directory and link them while with Squarespace I needed to upload them to a hidden photo library and swap out the URLs. All of my global style is defined in the same file so it's always easy for me to find and update stuff. Once you get things up and running it's easy to make changes.
Code doesn't have to mean doing everything manually. There are lots of great libraries, examples, and templates that do most of the hard stuff for you. This whole blog is inspired from the example project mixed with Next.js's example project. With code it's easy to remix other people's good ideas and add them to your site. Coming at this project with more experience and with better tools out there I found that it can be way less work than I originally thought.
This one probably only counts for me because I am a bit of a weirdo but I love learning new tech stuff and coding by hand. I was way less excited to work on the blog when I couldn't do either of those things. Now I have a little lab for testing out new front end stuff I learn about and an excuse to learn new stuff. For me, I can't learn anything from classes alone. I need to actually do something with the knowledge right away or it's totally gone. This new blog has been a great opportunity to do all of that stuff.
Replacing Squarespace Features
Search Engine Optimization (SEO)
Squarespace does a lot of work so you can appear higher in rankings on search engines. I probably won't be able to match them right now but I've replaced this with a few things on my end so far:
- Server side rendering so search engines can read my blog posts
- Using friendly URLs (words not ID numbers) apparently helps as well
- Leaning into HTML conventions like using
<article>tags for articles to make my web pages easier for machines to understand
- Including lots of links on my pages
<meta>tags to give search engines more info about my pages
In the future I want to do more stuff like incorporating schema.org schemas into my web pages and learning more about SEO so I can go even further. I am pretty happy where I ended up on this one.
Really Simple Syndication (RSS)
Squarespace handles RSS for you in their blogs. RSS is like a machine readable list of your content so various RSS readers can know when you post and notify people who subscribe. A lot of people use RSS without knowing they use RSS, for example, the chrome recommended pages on android are powered by RSS. When making my content management system I coded my own RSS feed that auto-updates with my posts. It works pretty well but I don't know much about RSS so there's room for improvement. Doing it yourself gives you more options to customize it than Squarespace, also it gets you passed Squarespaces rather low maximum for RSS feeds (100 or 300 depending). However, making it yourself is a bit technical so this is an edge Squarespace has. I am sure purpose-built static blog tools like Jekyll have more automatic solutions for this.
Squarespace adds a search feature to your site. I don't have enough posts for it to be an issue right now but it's nice to have. I can hackily implement this on a static site but the more posts I have the slower this will start to become. If I want to do this the right way I'll need a back-end. I may do this for learning though search is not super necessary for blogs in my opinion because you can find stuff on them using search engines.
Squarespace offers a lot of analytics tools by default. The major replacement for this is Google analytics which is even more powerful and free. I try to distance myself from Google products if I can (to varying degrees of success) so I am not going this route. My current analytics solution is no analytics solution. I could just be shouting into the void on this blog and that's not a huge issue for me. If you want analytics I wouldn't begrudge anyone going with Google. DigitalOcean is adding simple metrics for static sites soon so I will at least be able to see how much traffic I am getting.
Luckily I don't need e-commerce stuff. I wouldn't build my own e-commerce platform, it's complicated and risky. I just wanted to highlight this feature as something services like Squarespace really accel at.
Wrapping it Up
I am writing this blog to a past me who loved coding stuff but was frightened of taking the website on. Hopefully, I have convinced my past self, and some of you, that it isn't as scary as I thought. I also want to start doing more frequent, smaller posts, starting with little mini posts on front end stuff I am adding to the site. I am wring this here to hold myself to that.