Welcome!

by Iain M. Banks

Very well written book with an interesting way of telling the story forward and backwards at the same time. I do find it helps to check my understanding of the author's books by reading online reviews and critiques, as I am otherwise missing details.

Introduction

Since moving my site from Wordpress to Eleventy at the beginning of the year I've been trying find the most comfortable workflow for writing, editing and publishing posts. I love the control over my site given by using a static site generator. The speed my little site now loads in is phenomenal - way beyond anything Wordpress could deliver. Not that Wordpress was slow at all, but it can't compete with loading a few KBs of data with no processing at all. However the editing experience of Wordpress, and the workflow it included is still hard to replicate without jumping between services, repositories and branches. In Wordpress everything is in one place. You edit, create drafts, reviews and ultimately publish all from one place. So this is the description of the journey I've been on and where I have go to so far in my search of replicating the Wordpress experience for my static site generator.

Requirements

The key requirements for me are:

1. Code and content must be stored in GitHub.
2. As few services as possible. If I could do it all efficiently in GitHub, I would.
3. A user friendly editing experience
4. As far as possible this should all be free!

GitHub

Why GitHub? It's free for my needs and I always have access to my content from anywhere. I still struggle with many concepts in git, but GitHub itself is easy to use and lots of online support and documentation is available. It's also the de facto authentication service for all online developer services. No need to create endless accounts with passwords if you just authenticate through GitHub.

Services

With WordPress you go there, draft your post, publish it and you are done. Since moving to Eleventy I've been trying to reproduce this experience as best I can. Initially I coded, wrote my posts and generated my site locally on my laptop then copied it to my hosting provider (nearlyfreespeech.com). This worked a treat after some initial config and scripting in PowerShell to automate it as much as possible.

But this was not the most portable solution, so I looked for options to use online services as much as possible. First, I needed an online editor, which could edit my markdown posts stored in GitHub. This would enable me to write posts from anywhere, not just my laptop. After trying a number of services, I chose Forestry. It suits my basic needs perfectly without all the complexity of other services. Forestry does one thing only: enable you create content. It's not a development environment or anything else. It's content authoring only.

Next was the building and hosting my site. Again, I tried a number of options before settling on Netlify. This was easy setup and trigger builds from pull requests to GitHub repositories. It is great.

Finally, I was curious about online coding environments and used GitPod for a while. But in the end I gave that up and still do my coding on my laptop using Visual Studio Code. If GitHub Codespaces is ever available for free to basic users, I would be interested. For now I don't code that much and I can do that on my laptop.

So for most of the year I have been coding locally in Visual Studio Code, writing my posts in Forestry, storing my content in GitHub and publishing and hosting my site using Netlify.

Editing experience

I like Forestry, but didn't want to keep jumping to it to edit my posts. So I tried out Netlify CMS, but decided that wasn't really an improvement over Forestry. I did like the ability pull in the CMS as a subfolder of my domain (using "/admin/"). But I preferred Forestry, so stuck with that.

A few days ago I tried out cloudcannon. Whilst this was not for me, it led me to the idea of outputting my static files to a repository to be used by GitHub Pages. If I could build my site using GitHub Actions I could point GitHub Pages to my static files and host my files directly on GitHub. This took me a day to get working, helped a lot by this GitHub Action for building Eleventy sites. It works great and means I no longer have a need for Netlify. So as much as I really liked Netlify, I decided to move my site's hosting to GitHub Pages.

Finally, after looking further into the settings available in Forestry, I realised it also had the possibility present the CMS as a subfolder of my site, ie "/admin/". That was dead simple to setup and now I am down to using GitHub for storing and publishing my content and Forestry for editing the content, but being able to do so from my own domain. Small detail, but I like it.

Free, as in beer

Most of the services and tools I've used over the last few months are free for my level of usage. This is great. I am always amazed at the ability of companies to offer free plans. This is not like Facebook selling your user data. This is simply the fact that for small users, the costs to companies hosting them are not very significant compared to large enterprise clients. Also, I imagine with many small scale users, they get to iron out all the annoying edge cases that you only encounter by being a "stupid end user".

So how much does all this cost me? Well up until I switched to Netlify, it was free. But using GitHub pages with my own domain required some DNS configurations which obviously Netlify won't do for domain not using their services. So I switched my DNS servers back to those of my registrar and previous hosting provider, nearlyfreespeech. They do charge for this service though. Thankfully it's less than $4 per year, it's hardly going to break the bank. My goal of running my site for free is currently not quite met. I know there are free DNS providers, but since I already pay about $12 per year for my domain name, an extra few dollars is hardly an issue.

So my entire setup is almost, but not quite, free (as in beer). It's less $20 per year though. That's quite a miracle in my books!

In my previous posts I mentioned how I tried out Netlify CMS, but then chose not to go down that route. So I kept looking for other options. My aim being to do as much as possible in one place, whilst avoiding as little lock-in as possible.

I discovered cloudcannon and checked out how I can make use of that. In the end it wasn't for me, but it had one feature which prompted a rethink. It has output syncing, which copies your static files to another "Live" repository if you want. I tried this out and it worked great. Pointing Netlify to this live repository significantly reduced the Netlify build times. Since I am on the Netlify free plan with limited build minutes, this seemed like a good idea.

But how to build my static files without cloudcannon or getting Netlify to do so. Well GitHub has actions and there is an action created by another user to build eleventy sites. So I got that working.

Then I remembered that GitHub also has "Pages" for hosting static websites. So I thought if I am already building my static files to "Live" repo on GitHub, why not use GitHub Pages to host them. Setting that up was quite straightforward without using a custom domain. So now I have my pages hosted on GitHub pages and edited through forestry.

The final thing to do is to update the DNS settings so that I can use my own domain name. Once I have done this, I can potentially remove Netlify from my publishing workflow. This is a shame, because I liked their product and service. But if I can manage this through GitHub that would be one less tool I need to interact with.

After playing around with Netlify CMS some more, I got it working the way I wanted. Then I discovered the workflow settings and they were cool, but somehow did not seem too stable. Probably something I did wrong, but it got me thinking, maybe there is an alternative solution.

Currently I use Forestry to create posts for this blog. That workflow works fine, but I was curious about integrating Netlify CMS into my Eleventy based static site.

So I followed the instructions on the Netlify CMS website on how to add it to an existing app. So far so good. Here I am trying to create my first post using the CMS.

Overall Netlify CMS seems OK. Not sure if it is an improvement on Forestry, but for my needs it doesn't appear to worse either. The only thing I have not managed to do is list all my post subfolders in the collections tab. My site's post folder is structured by year:

src/posts/2021
src/posts/2020
src/posts/2019
.
.
.

And I want the same template applied to all of them, plus to be able to decide which folder to place a new blog post in. I don't want to create an extra item in the "collections" of the config.yml file.

I will keep trying and looking for solutions.

Angie jumped onto this log and then sat still for the photo shoot - there's a first time for everything!

Yesterday I switched my site to simply use the user's font defined in their browser for the main content of pages. Today I went all in and switched all fonts to respect the user's choice. So if you want to read my site using webdings, you can:

You could also install the klingon font and use that. Happy reading!

I feel designing and publishing web content should be more about how the user wishes to experience a site and less about how the designer wants to the site to be experience. The web is after all a more fluid medium than traditional print media.

Most websites, certainly those who care about accessibility and usability by now implement font sizes using relative units such as "ems" or percentages. However few respect a user's preferred font. All common browsers on all common platforms let a user define their preferred font. But almost no websites take this into account. And yet it is trivial. Simply use for your site's font:

body { 
	font-family: sans-serif, serif;
}

This will always display text in the font set by the user in their browser. Of course one thing that is missing in this, is knowing whether a user has actually set a specific font or is simply using the default font of the browser. There seems to be no way of specifying something like:

body {
	font-family: user-font, 'Lucia Grande', Arial, sans-serif, serif;
}

I've now adapted this website to respect this choice for the main text on this site. I've not yet done so for the more specific texts such as header, footer and navigation. Probably I should.

Another autumn photo of yellow leaves in sunny blue afternoon sky.

Angie in the autumn woods.

Some more autumn photos of the local area.

Some more lovely Autumn colours from Luxembourg.

Some lovely Autumn colours around Brussels these days.

A few photos from walking around the student area around the Universite Libre de Brussels.

Feierstengszalot

The neighbours brought round a local Luxembourgish delicatesse called Feierstengszalot. Which in German is written "Feuersteinsalat" and in English means: "Fire stone salad".

It's a cold dish, the ingredients are stewed beef, echalots, quartered boiled eggs, gherkins, an assortment of herbs all mixed in a mayonaise based vinaigrette. It tastes better than it looks!

Image taken from this website.