Some of you probably know that in publishing, a colophon is a statement at the end of a book that typically gives information about its authorship. I wanted to provide a similar space on this website, where I could share what went into its creation. It seemed natural that since nearly all of the resources that I used were generously made available for free, that I also share my design, source code and server notes.

Please take a look if you're interested in creating your own platform. Doing it yourself can be tricky, but I think the the lower cost ^[1] of operation and complete control over the experience is worth it.

Design Notes

Inspiration

I looked at quite a few sites and themes for inspiration.

A few that I actually borrowed from

• I used a single single column layout like the one on the Maido theme
• I took the fun hover animation from Michael Shillingburg

A few that I loved but have influenced me less so far

• I really like the navigation on Quinne Larsen's site
• Alice Lee's site has some great paralax animations and case studies
• There are some fun interactive elements on cassie.codes
• Tania Rascia designed her blog's tag and search functionality really well. I'm looking forward to implementing something like this once I've created more content.

Figma

I used Figma for my initial design exploration. If you're not familiar, Figma is used by the design teams of a lot of tech companies. It makes it easy to test and share ideas before you get started with code. I personally don't always start designing in Figma because it can be fun to design with code. For example when working on the masthead text animation for this site, I just experimented until I had something I liked.

I recommend giving Figma a try. It's free and easy to use.

Typography

When I started this project, I immediately thought of Future Fonts. A friend introduced me to the site back in 2018 and I really liked the business model. You support a font that's a work in progress—the earlier you back a project, the less expensive it is. Of course there's some risk (there are probably some projects that never get finished) but the platform seems to attract good people and you can always look them up and learn more about them before getting a liscense. I decided to get a few fonts for this site and while they'll get more polished in future updates, I already like them. I think it's cool that my site will be improving along side its typography.

In case you're curious, the title and masthead font I used is Macabre. I used Bruphy Text for the body and headers.

I didn't end up using them for this project but I also liked Ricochet and Capito.

I had originally planned on using Input Mono for my monospaced font but the publishing license was too expensive for me. I ended up finding out about League Mono, which turned out to suit the theme better so I used that instead.

I referenced Type Scale to establish relative sizing but I think it still needs work.

Effects

My favorite part of my site are the little animations and effects. For technical reasons, I opted to use SVGs on this project. I originally wanted to apply fragment shaders to some elements but after a little research, I found out that approach wouldn't work for me. I would have to draw elements I want to animate to canvas elements before applying fragment shaders using JavaScript. This would complicate accessibility and SEO of the site so I started looking for an alternative. It turns out that SVG filters can produce similar effects, have decent browser support and can be included in your markup without the need for JavaScript so I went with that.

I did find that SVG filters don't work well when applied to DOM elements on Safari and animations can be choppy on Firefox. Chrome seems to be the only browser that handles these effects well. I still like this technique but wish it worked consistently accross browsers.

Links

The wobbly links are a slight adaptation of the links on The Outline. I learned about the technique through CSS Tricks. I liked how the wobbliness echos the wobbliness of the title and masthead font.

In the future I might add some hover effects to the navigation links like this fun example.

Squigglevision

The jittery text I used in the masthead and for blockquotes was accomplished using this SVG filter technique. In the future I'd like to use some nicer, hand-drawn animation. I liked this one because it's subtle and kind of creepy. I got some feedback that people might perceive the jitteriness to be a bug so I'm having second thoughts about it.

Gooey Effects

I used a gooey effect on headline text. It's another SVG filter technique. This demo and this article really helped me to understand how it works. I really like this effect when animated, it's so slimy.

Technology Notes

CMS

I decided to use Ghost as my Content Management System because it has a nice markdown based editor, handles SEO and it's open source so you can self host it. Another benefit is that it has a data API so you can use it headlessly and use a custom front end.

Wordpress is a similar and more mature project that is probably also worth trying out.

Front End Framework

Ghost supports Handlebars based themes by default. I had originally planned to customize the Casper theme when I stubled on the Gatsby version of it on GitHub. After reading a little bit about Gatsby, I decided to give that a try.

Gatsby is a React-based static site generator that produces websites with impressive performance. In my experience, loading times are nearly imperceptible and it's easy to get a high Lighthouse score.

Theme

Like any React project, styling the Gatsby theme is straightforward as long as you're familiar with HTML and CSS. I found this interactive flexbox demo helpful for figuring out how to style with flexbox, which is a newer skill for me.

Table of Contents

The table of contents on this site is a modified version of gatsby-theme-ghost-toc. It uses the gatsby-transformer-rehype plugin to process the HTML from ghost and provides the datastructure that the gatsby-theme-ghost-toc plugin consumes.

I'm not sure if I'll keep the table of contents since it's kind of clunky if you want to include full bleed images. What I'll probably do is create a tag on Ghost that my Gatsby front end will look for to determine if it should disable the table of contents.

Lightbox

For now I'm using medium-zoom to lightbox photos. I wish it allowed arrow key based navigation or swiping but it works pretty well. I also tried lightense-images, which worked equally well. I made my choice between the two based on popularity.

I'm not totally happy with the current solution because I wish it supported arrow key based navigation or swiping on mobile. I'm hoping to make this site a lot more visual so I might have to implement this myself.

Syntax Highlighting

I'm not sure how much I'll be posting code snippets but since it's something Ghost's markdown editor supports, I set up syntax highlighting. The most popular JavaScript library seems to be PrismJS and this guide was really helpful in getting it set up on Gatsby.

I use the autoloader, copy to clipboard, show lanugage and toolbar plugins along with the tomorrow theme. You can find a comprehensive list of plugins here.

Analytics

In order to understand how my site is performing, I decided to set up analytics. I initially set up Fathom Lite but quickly realized that it uses cookies and hasn't been updated in two years. I'm sure the paid version is great but since I'm just getting started, I wanted something inexpensive. Lucky for me, Plausible had just started supporting a self-hosted version of their service. It was pretty much exactly what I was looking for—a simple, one page analytics solution that's also GDPR, CCPA and PECR compliant. You can look at the public dashboard for this site here. I haven't tried it but Ackee is another open source analytics project that you can self-host.

Comments

The last thing that I added to my site was a comments section. I know it will take a while to get traffic to my site but I'm really looking forward to hearing from my visitors. It seems Disqus is the most popular comments platform but I wanted to avoid it because the free tier introduces ads to your site. Remark42 and Commento looked like good alternatives that support self-hosting but I didn't like the front end of either very much. Eventually I found out about Coral Talk by Vox Media, which I think is great. It was designed to respect user privacy, facilitate productive discussions and it comes with spam protection and moderation tools. It has a lot of nice configuration options too, like social logins and Giphy integration. At the moment it's a little tough to style since some important elements don't have clear CSS selectors but I'm sure they would accept a pull request to make changes.

It's got some sketchy stuff in it but you can look at my CSS file here.

Closing Thoughts

Thanks for reading this far. I really hope this information inspires others to divest a little from big tech platforms and to create their own space on the internet. I'll do my best to keep this page up to date as I make changes to the site.

Yours truly,
Aaron