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.

Sadly, it wasn't long before I started to have some problems with Squarespace. It wasn't ideal for hosting a coding blog. Handling markdown in Squarespace was OK, but not great. My worst issue was that I had a lot of trouble getting syntax highlighting for the code in my posts working. In the end I needed to do it with custom JavaScript on the front end. This meant I needed to get the more expensive "Business" plan and the syntax highlighting required JavaScript and kicked in a little bit after the page loaded.

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.

My Alternative

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.

Architecture

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.

Not all static sites are the same though. They can be made to seem dynamic by fetching fresh data with JavaScript after they load then using that data to construct the web page on the user's browser. This is called Client Side Rendering, "client side" is a fancy term for for the user's device and rendering is a fancy word for making the HTML (in this context it also means a bunch of other things 🙄). Client side rendering is great because it's enabled us to build super responsive websites that feel like apps. Libraries like React, Vue, Svelte, and Angular have made it super easy to build awesome sites with lots of moving parts. Typically these have been Single Page Apps where there is only one web page and everything is handled by client side JavaScript. These libraries are so awesome that people built websites with them that don't need fresh data just to get the responsiveness. This is great but all of their users end up building the same exact page every time and they need to wait for that building. To avoid this I wanted my static site to be Server Side Rendered. Lucky for me there's a new wave of tools that let you have your cake and eat it too. Tools like Next.js or Sapper let you render your website on the server side and build it with those fancy client side rendering libraries. With tools like these the user gets served a finished page and then the JavaScript kicks in to handle any user interaction.

Server side rendering also has a ton of other advantages. A big one is Search Engine Optimization. Search engines read your site and save the text of your web page to use when searching. They don't run the JavaScript on your page at all (Google does now but it's not super reliable). If your blog post isn't sent to the search engine's robot as HTML all of the words in your post won't be included for searching, which will hurt your ranking. Server side rendering also makes sure your website will be at least somewhat usable on lots of different browsers and devices. Some people don't use JavaScript or use old browsers with a lot of features missing that may break some JavaScript. With server side rendering all of these people can still read your content, even if they may not have the best experience.

Hosting

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 Code

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.

Hopefully, I'll get to write a bit more about Svelte/Sapper but on the whole I was blown away by the performance and ease of development. My site feels like the fastest site I've ever used. Sometimes I click between the pages just to relive the glory days before websites started pretending to be loaded while they download the MegaBytes of JavaScript they need to become usable. Luckily, it seems like the single page era is just a stepping stone on the path to web apps that are both responsive and fast. Development has also been a piece of cake. The project template gave me everything I needed to get started with a project. I never had to do any special custom configuration and the boilerplate was super minimal. I feel I am able to make changes to my website just as fast if not faster than I was able to in Squarespace menus. I am also able to add stuff that I just couldn't add before.

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

Syntax Highlighting

The biggest issue I had with Squarespace was difficulty with syntax highlighting in code blocks in my blog posts. As a tech blog this is a pretty key feature. As far as I could tell the only solution to this was including highlight.js in the front end of my site and adding a script to find and convert code blocks to syntax-highlightable HTML. To do this you need a Business plan in Squarespace so the syntax highlighting cost me $10 extra a month since including my own JavaScript was the only business feature I really cared about.

I am a bit of a web perfectionist and it drove me insane that my code blocks would briefly show up unhighlighted before jarringly becoming highlighted. I wanted my website to be as accessible as possible to as many people and machines as possible so I try to make the experience with my website as good as I can for people who disable JavaScript. You shouldn't need client side JavaScript just to apply the same styling every time. On my Sapper site can ensure my pre-rendered HTML pages have syntax highlighting when they are sent to the client. The jarring highlight is gone and now the dozen or so people who don't use JavaScript don't have to feel left out.

Cost

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
Squarespace Basic	Squarespace	$16	$192
Squarespace Business	Squarespace	$26	$312
-	-	-	-
DigitalOcean Static Site	DigitalOcean	$0	$0
DigitalOcean App Pro	DigitalOcean	$12	$144
-	-	-	-
Hover .io Domain Name	Hover	$4.17	$50
Hover .com Domain Name	Hover	$1.25	$15

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.

Fun

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
• Using <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.

Search

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.

Analytics

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.

E-Commerce

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.