colophon
📜 🗜️ 📋
🎛️ 💻 🧮
🎛️ 💻 🧮
Friends and colleagues sometimes ask about this website and how it was made. This is a brief colophon page to share some details about its setup and design.
The site is a work in progress and evolves as my practice does. It is a way for me to learn about the web, creative coding, permacomputing, the low carbon web, self-hosting, command line cultures, static sites, version control, HTML, CSS, JavaScript, Python, zsh/bash and more.
If you spot any issues or have suggestions, feel free to get in touch.
See also pages on cookies 🍪 and carbon ☁️.
setup
This is a static site. It runs on the open source Jekyll static site generator.
It used to run on Wordpress (snapshot here), but I moved to a static site around 2022 after having read about the low carbon web, digital gardens, the poetic web and associated movements - as well as auditing HTTPoetics and other sessions with the School for Poetic Computation during the pandemic.
The website lives in a folder containing markdown files with posts and pages, together with some other configuration files which show how these should be displayed.
_config.yml
_drafts
_includes
_layouts
_pages
_posts
_sass
_site
404.html
assets
feed.xml
Gemfile
Gemfile.lock
image
README.md
robots.txt
sitemap.xml
I use the command line interface to build and test the site locally before deploying. For example, to preview the site it is:
bundle exec jekyll serve --future
design
The theme is called jtown. It is meant to feel friendly and relatable - with generous emoji usage 🐰 and a pastel colour palette 🎨 which is partly inspired by places in Clement Street and Japantown design and stationery that I used to appreciate when visiting family in San Francisco as a kid.
It is based on Jekyll Crisp Minimal by David Zhang. I’ve extensively modified the HTML and CSS and added a few lightweight Javascript elements for interactivity, such as this section to browse and highlight different kinds of social links.
The main fonts are Noto Sans for body text, Source Code Pro for source code, and Arial for titles and subtitles. I updated the theme to self-host the fonts and icons.
The white text on black background for titles is something that I and other Internet researchers in Amsterdam have used for slides for many years, also echoing the logo of the Digital Methods Initiative.
images
When moving from Wordpress to a static site I also removed and reformatted many images from this site.
To reduce file sizes, images were reformatted manually and in batch with ImageMagick. I have also used DitherIt to dither images, inspired by approaches to image compression for solar powered websites.
I love sharing images, but conscious of their file sizes. In order to include multiple images with blog posts without increasing file sizes, I made this tiny image composer tool to arrange multiple images into small webp files. I also use cwebp for reformatting images into webp.
style
In keeping with the friendly and informal vibe - I tend to use lowercase for titles. I still capitalise proper nouns (people, places, organisations), months and dates, publication and event titles and acronyms.
content
This website serves as a diary and archive of my research and practice. This includes:
- notes about things I’m reading, exploring, working on and thinking about
- announcements about talks, publications, events and other things
- documentation of projects, exhibitions, and collaborations
inspiration
Some sources of inspiration for those who might be interested in making their own website: