spunos.net

How I update this site

I started making websites in the early 2000's, cutting up images and cramming them into tables for that authentic geocities look. And then... I pretty much didn't touch any webdev for the next two decades. You could say I've missed out on a few new developments.

So to keep it simple, this site is all HTML and CSS, just like in the good old days. (And a tiny sprinkle of Javascript, to enable toggling dark mode.) What's new is that I'm using a static site generator to automate most of the work. There are a lot of these static site generators out there; I use Eleventy.

To illustrate why I would prefer this method over just editing the HTML files directly, let me show you my new workflow for updating this blog:

  1. I run npx @11ty/eleventy --serve in my terminal
  2. I open a new tab in my browser and navigate to the local copy of this site
  3. I open my code editor (VIM)
  4. I create a new markdown file in the "blog" folder on my hard drive
  5. I type the word "post" and hit tab
  6. I fill out the title, description, tags and start writing
  7. I hit save
  8. I wait for Eleventy to do its thing (this takes about a second)
  9. I check in the browser whether everything looks okay, maybe make some changes as needed
  10. Once I'm happy, I upload the contents of the "site" folder to my remote host, only overwriting the files that are newer.

And that's it! It sure beats wrangling with HTML table cells.

Ultisnips #

Ultisnips is a plugin for VIM that lets you easily insert snippets of text or code. Here's the snippet I made that I use on step 5 above:

snippet post "new blog post"
---
title: ${1:title}
description: ${2:description}
date: `!p import datetime
snip.rv = datetime.datetime.now().strftime("%Y-%m-%d")`
tags:
- ${3:tag}
---
${4:blog text}
endsnippet

Note that you'll need to have Python 3 support enabled in VIM for it to automatically insert today's date.