Hamish Johnson - Photographer & Physicist

Process Post #2 - Setting Up a Static Site

January 20, 2025

Process of Getting Started

A stranger to me is someone I have not met. By meeting, I refer to exchanging communications where we establish who we are to each other. In this way i does not require that we remember this information but that a level of understanding has been established at some point which serves to break a metaphorical wall between us. It is this wall that seems to constitute the stranger. There is some grey area in this definition, namely that someone can be described to me by a mutual well enough that I no longer feel this wall. I feel in a sense that I can know someone, peer over this wall, but that we haven't met. Similarly, we could both have been described to each other by a mutual third party to a point where we each know the other, but haven't met. In a sense we both see over the wall but don't cross it.

In my work I have decided to continue developing my portfolio and pet project built from static HTML pages. I built this website a year ago using pure HTML with tailwindcss to simplify the styling, and some javascript (JS) to make the page a little responsive. It was built using a mobile-first methodology where the base design of everything is make for a mobile layout, then width breaks are used to change the layout for larger screens. The set up work is also different as I already have purchased my domain (hamishjohnson.ca) through GoDaddy and set up free “hosting” with Netlify. I use quotations there as Netlify provide a free content delivery network (CDN) of unchanging HTML files, rather than a dynamic, database server that WordPress uses.

My work these last few weeks has been adapting a static website delivery system to work with blogging as is required. I did not want to stray from static CDN delivery as I find this is my way of taking back some of my own autonomy for my personal corner of the World Wide Web (WWW). By controlling the raw code and delivery of it I save on money and also constraints placed by the affordances of other website editors. However, this means I have a lot of work set out for me!

First, to make development more easy, I spent a week or so translating my HTML pages to a Ruby on Rails framework. In short, this allows for defining templates called “views” and reusable elements called “partials”. This significantly shortens my code, but also means I can update my design more easily by making changes in one source file instead of copying and pasting updates on every HTML file. Rails allows as well for the user to create blog posts! This is because when we run the Rails server, it spins up a non-static web page using Ruby as the backend, which again doesn't work for my static CDN ):

We are still in luck, there are a class of programs called “static site generators” which take dynamic websites--written in Ruby on Rails for example--and convert all of their code into static pages which can then be uploaded to the static CDN. I went with a platform called Middleman, which will take my updated Rails code and convert it back into HTML before sending it to my Netlify to be sent to anyone who opens my domain. This solution gives the benefit of developing my website using the dynamic Rails framework--easier website building and blog functionality--while still exporting the final product as static HTML files for the World Wide Web.

This process is rocky. I am learning a brand-new programming language (Ruby) while still being new to HTML, CSS, and JavaScript, on top of a brand-new framework (Ruby on Rails with Middleman). I have used a combination of online tutorials (like this series), comparing simple portfolio projects using Middleman (like this one), and getting feedback from GPT-40 on how to best structure my website and fix errors. This has taken longer than expected as I had to iterate from a Ruby on Rails framework to an arguably more simple Middleman Framework, and is ongoing as of right now. I will add an update when the process is finished once I have finalized the blogging functions.

My vision board centres around the idea of a digital garden. This is a garden of ideas, projects, growth, and art which I curate in my own personal public domain. My process adheres to this vision as I try to stay true to my goal of controlling my digital presence down to the code and functionality of my website. I feel a connection through to the early days of the “inter-net” where HTML was first being used to let users create their own home page. I want to continue this idea by working with raw code and static web-pages, but come through to the current day by introducing updated accessibility tools and mobile-first styling.

<< Previous: Stranger Next: Personal Meme >>