Episode 1: A New Blog

Hooray! A new published version of my blog (which also happens to include everything on this domain and thus is not just a blog).

A New Blog Engine

I did what everyone tells you not to and wrote a whole new engine to build the new version of this blog. I dubbed it Leo and you can check it out on GitHub
if you are so inclined. It, for example, supports conditionally including drafts in the output with env vars:

BLOGPOST_RENDER_DRAFTS=true npm start

I’ll do a more in-depth discussion of the static-site engine beneath this site in a different post. The technical architecture is fairly interesting itself since it uses Relay, GraphQL and React.

Authoring

The markdown implementation is markdown-it
, which supports commonmark in it’s default configuration and has a plugin system. Hopefully I won’t abuse the plugin system too much… or I may just end up with a custom markdown syntax ¯\_(ツ)_/¯

Youtube/Vimeo

Headers

headers have name
attributes automatically associated with them, but they aren’t “auto-linked”. This means that you have to either guess at the #slugified
representation or inspect element. I’d like to change this to have a clickable link in the future.

Footnotes

Pandoc-style footnotes are enabled.

PostCSS

I have a component library systemin development that’s also being used in places on this site. It uses PostCSS for the CSS generation. postcss-responsive-type
is responsible for the font-size changing depending on viewport size (try it, it’s cool!). This yields a nice effect where the entire site scales a bit, based on typography size, between phones and 4k screens.

Design

Ok, so I spent 0 time designing this thing. It’s mainly an exploration of the functionality of Leo
(which was used to build the site). That means there are significant areas to improve in terms of design. You may notice, for example, that there are some blueprint-ish placeholders for featured post images, etc.

Fonts

Roboto is ok
, but a stack based on Proxima Nova
is probably where I’ll end up long term.

Open Source

The source for this site is onGitHub and the source for the static site generation tool is there too
.