Notes on Website Development

Domain Registration and Setup

After extensive dithering about what the domain name should be, I registered alduslibsfu.ca via Web Hosting Canada.

Then I set up a hosting account under the same name at Reclaim Hosting. The Web Hosting Canada registration is now pointing at the Reclaim nameservers. As I’ve written before, Reclaim Hosting has been around a long time, providing absolutely superlative service for education-oriented web hosting. They are an institution. I’ve used Reclaim for nearly all my web projects over the past decade or so. Their system has two options: a nice simple cPanel-based do-it-yourself site management system, or a much more advanced “Reclaim Cloud” system that takes advantage of modern containerization and other things I understand only poorly. Our site is, by design, simple, so we’re just using the cPanel system, which allows one to set up a webserver, manage files, or install a CMS like Wordpress if one wanted to (which I don’t).

Since we’re going to build a static site, using Eleventy, we need to set up a deployment system for moving the generated site (HTML, CSS, images, etc.) from our laptops to the webserver. I have done this before via GitHub: you push your website to a GitHub repository, and then the webserver pulls from there. It’s an extremely popular solution, and GitHub is absolutely ubiquitous in software development, DH projects, and everything else. But GitHub is also a thin edge of the wedge of forcing extractive AI into our lives whether we want it.^[1]

There are some alternatives, happily. One possibility is alternative git hosting services that put their ethics up front: such as Codeberg (more about that later). Another possibility is to simply use git all by itself. Git is the tool that one uses to interact with GitHub, but you don’t need the hub: you can just set up a repository and clone it elsewhere.

So I set up the website on Reclaim Hosting as a git repository and simply cloned it into the generated site folder in my Eleventy installation at home. When I build the website with Eleventy, I can then simply push my changes to the webserver. The limitation of this simple scenario is that it works great for a single person, but setting up collaboration means adding another layer for managing multiple users. That’s where GitHub and Codeberg and other hosting services come in. As I say, we’ll return to this topic as it develops.

Also, I have learned that setting up a git workflow that works seamlessly can be a tad fiddly. A crucial part is generating an SSH “keypair” and sharing the public key with the remote repository, to take care of authentication smoothly (instead of propting for a password all the time). This bit was fiddly (and not terribly clearly documented anywhere). Once that was set up, though, I could use the GitHub Desktop^[2] app (with a nice button that says “Push”) seamlessly.

Prototyping the site online

Setting up Eleventy (at home, on your own computer) is easy enough. It’s an NPM application, so you need to install NPM, and from there you install Eleventy, which starts as a completely bare, empty shell, and you add content (as markdown), page templates (in liquid or NJX formats), and CSS and images and whatnot. You tell it to build, and it converts your raw components into a finished website, which you can then serve online.

The basic installation is outlined at https://www.11ty.dev/docs/ – I also built out a simple blog, following Raymond Camden’s excellent tutorial https://cfjedimaster.github.io/eleventy-blog-guide/guide.html – this sets up a simple site architecture and walks you through developing a small handful of templates (for posts, categories, and an index page). After having followed that blog tutorial, I have a basic grasp of how to set up Eleventy to manage all sorts of categorized collections – like our books, for instance.^[3]

Typography and styling

Since Aldus Manutius invented modern typography (more or less), it shouldn’t come as a surprise that this project is going to take typography seriously. We wanted the site to appeal to Aldine aesthetics: use of small caps, centered headings, lots of whitespace. We quickly settled on the free EB Garamond typeface,^[4] which is lovely, and I was able to set up the small-caps and old-style numerals font-variants, and to also letter-space the small-caps. Something like this:

font-family: EBGaramond;
font-weight: 400;
font-optical-sizing: auto;	
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: 2pt;
font-variant-numeric: proportional-nums oldstyle-nums;

Pro tip: if you load a webfont like EB Garamond directly from Google Fonts, using the line of @import code that Google provides, you do not get access to the font variants, and your small-caps will be fake. To get the full set of variants on tap, you need to download the actual TTF font files (one for Roman, one for Italic) and serve them from your website, calling them in the CSS via the @font-face instruction.

There’s much more to come, but we have a basic foundation now.