Mucking about with eleventy (again)

If I haven’t updated my blog recently, I’m afraid the reason is something of a cliche: I’ve been mucking about with some website software in an effort to build a new blog. Silly.

Ironically, that began alongside me writing little updates about the process called letters, while I tried to quickly style up the posts themselves to look like little letters.

I did actually achieve this – but as a standalone page. That should have been enough, but what I really wanted was a way to produce these letters like blog posts, and in a way that meant I could easily adjust the design across multiple pages all at once, and repeat certain elements like headers, footers and navigation elements.

What this meant, of course, was trying to learn to use a static site generator again. So this time I really chucked myself in with eleventy/11ty (no idea which is the correct form), and it also meant setting up a kind of developer environment on my Chromebook.

The Chromebook is a decent little developer machine – at least for my needs:

It’s small and portable, and has a really long battery life. This has meant I’ve been carrying it with me on my twice-weekly commutes, giving me some time on the train in the morning and evening to dick around with code. It also has reasonably good sleep/wake which means I can with reasonable confidence just leave my ‘dev environment’ running and then pick up where I left off.

It also runs some kind of Linux container, which is where I’ve been doing a lot of this stuff. I’ve been using a mixture of three discrete types of apps: a web browser; a code editor; and a terminal:

    • The web browser is Chrome. On a Chromebook, unsurprisingly, Chrome is the only viable web browser. You can install and run others as Linux apps, but it’s a pain, and they don’t run well. It’s not quite like Android where you can install any browser and run it natively. But Chrome is perfect for my needs on this Chromebook, both as a web dev browser, and just as my daily driver.
    • The code editor is Caret, which is a native Chrome OS app. This means it is pretty fast and lightweight, and it does most of the things I want it to, like opening a folder/directory tree in the lefthand panel, and the ability to open multiple files in a tabbed interface. It also has syntax highlighting. It does a few other code editor-y type things I haven’t learned how to use yet.
      • I have also been trying Visual Studio Code as a Linux app. Running graphical Linux apps on this Chromebook works reasonably well, but there are definite bottlenecks in performance, and it’s a bit finicky. I can see the appeal of VS Code – I was able to set up an environment like Caret above, but also with a terminal built into the same window. But it has often felt clunky, even just scrolling up and down long lists. This is to do with my extremely low-powered Chromebook’s resources rather than the app itself. I’d probably just use that if I had a different machine.
    • And finally the terminal. Most of the setup for 11ty has been done via the command line. This is inevitably quite a learning curve, particularly when I’m not overly familiar with command line stuff in general. But the tutorials I’ve been following online have been useful. And it’s one of those things where you only really need to learn a handful of commands to achieve what you want to do. So I’ve been cding and lsing and mkdiring and npm starting and toping and clearing and I’ve been able to make 11ty do what I want it to do.

The beauty of running 11ty this way is that you can start a session where 11ty will ‘watch’ a given directory for any new changes to saved files, and then immediately run in the background, then refresh the browser automatically, which will show your new changes if they’re on that page.

It’s an automated version of the type of web design I grew up with: make a change in notepad.exe, ctrl+s to save, switch to the web browser, ctrl+r to refresh. So it’s a nice feature.

11ty’s debugging is also mostly helpful: whenever I’ve b0rked something, the debug output will generally pinpoint what I did and I’ll know how to fix it – or at least Google what I’ve done to figure out why it hasn’t worked.

The final feature of Chrome OS (and others) that I’ve really started to use again is desks or spaces or whatever they might be called: alternate desktop views with sets of windows that you can easily switch between. On Chrome OS you can switch between them with search+] or search+[ (‘search’ here is the key where Caps Lock is on any normal keyboard; you get used to it). Or you can four-finger-swipe on the trackpad, but I don’t really use that.

For my ‘web dev’ purposes, I like having four spaces or virtual desktops running:

  1. a web browser just for general web use – either to take a break and browse the web, or to Google some help docs or tutorials
  2. the terminal, generally with 11ty’s server thing running, and maybe a second tabbed terminal for other things (I only recently learned that you can run more than one terminal at a time and this was mindblowing. I am an idiot.)
  3. my code editor
  4. another web browser pointing at the localhost so I can quickly switch over to see the changes I just made – the automatic browser refresh is usually so quick that by the time the desktop has switched over, the page has refreshed, or is in the process of refreshing. It’s lovely.

I’ve also taken to using these virtual desktops or spaces on other machines. It’s handy to have a ‘work’ space for my remote session to my office PC in addition to my ‘home’ session. I might also have one open running some stuff to do with the Flightradar I have running on my Raspberry Pi. And I occasionally have other spaces running dedicated to a given project (such as proofing articles for a local community newspaper) where it’s helpful to have a browser open as well as a file manager and a document editor.

This is all to say, I guess, that I feel as though I’ve been productive. In the sense of learning to use a set of tools, at least. I did also produce a few ‘letters’ in that time, but I don’t know what to do with those yet.

The most interesting thing for me has been seeing how the initial idea – a series of blog posts that look like letters – has changed over time. It started as a single page with a stack of letters one above the other. I was drawn to the simplicity of a single page with an index at the top to anchors for each letter. But this was tricky to scale, and it makes more sense to have standalone pages… I think.

So I went to each letter having its own page, which really unlocked the potential of 11ty for me – being able to build pages based on set layouts, metadata, and repeated page elements meant that I could treat the content of each letter as one blob, and then construct the pages around them. It also meant I could easily build an index to them as 11ty has some simple tag-based collection tools for listing all items in one collection. The ability to create a set of pages or posts with a pre-determined style and then an index to them is, essentially a simple blog engine. I could also leverage the same metadata – scraping each post’s title, URL and any tags or snippets – to build an RSS feed if I wanted to. That’s definitely something I want to explore.

To that end, I did also try and import my WordPress blog posts into 11ty. I found a neat tool for this which scrapes the contents of an exported set of posts and quickly converts them into markdown, which 11ty seems to like the taste of.

This worked reasonably well but, as with any time I’ve tried to move posts to or from WordPress, the problem was the images. Oh god, the images.

For years now I’ve used a combination of simple img tags as well as proprietary gallery tools whether in WordPress, Tumblr or wherever else, and the former are fine but good god the latter just… break. Sometimes they even break within the same platform when that platform just decides to change how its own gallery tags work. It’s a nightmare.

So I gave up on that.

What I think I’ve settled on is keeping (for now) my WordPress blog as a main blog/website for these purposes, and I may use my letters project as a sort of meta blog in which I can give updates or whatever, rather than blog posts in and of themselves.

This will enable me to tinker with 11ty while not completely rebuilding my WordPress-based blog from scratch. Again – yet. I’d love to get away from the clunky server-side nature of WordPress and have a fully static website, and I feel like I’m significantly closer to that than I was a month ago. But Rome wasn’t built in a day and all that.

So for now I have a sort of offline letters project which I’ll tinker with some more until In can find a simple way to ‘push’ the changes online. This is a whole other topic; 11ty spits out a nice, simple directory of basic HTML files which it’s then up to you to put online somewhere. It’s up to you to figure out how you want to do this, whether github, netlify, or just dumping the files on a web server.

For me, the idea of producing nice clean HTML in a nice neat offline dev environment and then having to use one or possibly even two third-party services just to put the files online seems… backwards. I’d far rather just have a way to rsync (or whatever) the updated files onto the server, replacing the old versions in place. But so far any of the graphical-based methods I’ve tried have not allowed me to move an entire folder structure across without creating each folder individually etc. So I need to work out the simplest method for this which works for me.

I’d ideally like to stick the letters project online as a subdomain of this blog, but that feels like a fiddly integration at the moment. For now, I’ve stuck it on Neocities fairly anonymously, as that seems like a handy place to tinker with things.

So that’s where I am. Some tools learned or re-learned, a new ‘dev environment’ which mostly works for me, and a project that is basically working, but which I hope to improve and tweak to my heart’s content.