Version 1.0
So here it is — version 1.0!
I've been keen to get Heart Soul Machine up and running for a while now. I've put it off for ages, wanting time and space to get it all perfect in my head. That lack of action prompted me to just go ahead and build it. Perfection is the enemy of good. 100% of nothing is zero.
This is a space for me, not everyone else. I wanted to create somewhere beyond the performant nature of social media. Somewhere social and connected, but my own space.
I thought it might be useful to go into a little bit about what is happening behind the scenes of HSM - what is the machine?
The site is built with 11ty a javascript based static site generator or SSG. An SSG essentially outputs your entire website as static HTML pages. This means you don't need to run a special web server or maintain a database. I create the content as Markdown files, build out the templates I want and the SSG smooshes them together. I just use the command line to BUILD, and it outputs a folder full of files I can deploy anywhere. What the SSG does best is allow me to use some basic programming like IFTTT style statements to create extra functionality.
I'm currently hosting the site on GitHub Pages. I've been a customer of GitHub for quite a while, and while it's been bought by Micro$oft it's still performant and provides me what I need. The beauty of a SSG is that the actual files live on my computer. I can back them up and put the site up on any number of services — so I have flexibility built in.
I've tried to do some new things with 11ty, SVGs, HTML and CSS during the build. For that end I've packaged up a few things into the site:
- eleventy-plugin-time-to-read - Adds the handy reading time estimate.
- eleventy-plugin-rss - Added the default RSS plugin. I've previously made my own, but XML sucks, and this was a 5-minute job.
- SVG Factory - I borrowed this from Kevin Weber a while ago, and I use it and SCSS to create all the icons you see around the site.
- Eleventy.js Interlink Plugin - I'm an Obsidian user too and was keen to incorporate one of the best features of Obsidian - Wiki Links! Now, I can use them in the site build without worrying too much about 11ty's weird internal linking.
- Social Previews - I adopted the Social Previews outlined by Bernard Nijenhuis. This creates an SVG for each post and then saves a JPG version of it and adds it to the
HEADof each page as an Open Graph element. - Flexoki - I've been really enjoying Steph Ango's work and stumbled across their Flexoki colour palette. It actually matched pretty closely with what I already had in mind with my initial sketches for this site. So I adopted Flexoki into my CSS and have been using HTML Variables throughout my CSS.
- Timeline - I didn't scope this in the initial build, but after I stumbled across Chris Coyier's site, I wanted to include something similar.
- Evergreen Notes - Another Steph Ango feature which really resonated. I plan on going through my back catalogue of posts and adding them to the site - but I'm keen to extract the little pearls of wisdom along the way.