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  of operation and complete control over the experience is worth it.
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.
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.
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.
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.
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.
In the future I might add some hover effects to the navigation links like this fun example.
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.
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.
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.
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.
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.
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.
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.
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.
My .info domain costs $3.88/year to register and I spend $9.99/month to host my servers. If I didn't also have comments or analytics, I could get away with $4.99/month on hosting instead. Even at the higher price, the maintenence cost is still less than what you'd pay on Squarespace or Wix. I also spent $36 on font licenses but free options are available if that isn't important to you. ↩︎