BACK
|Technology

made a small blog

Hi! I'm Ted Zlatanov and I'll write about remaking my small site http://lifelogs.com

Remaking the cruft

I decided to remake my small website that wasn't updated since... digging animated GIFs were worth a chuckle. It was hosted in a single S3 bucket, deployed straight from Git with Ansible. Well, it's still there, just redirectin' away...

- aws_s3:
    profile: lifelogs-s3
    bucket: lifelogs.com
    object: index.html
    src: www/lifelogs.com/index.html
    mode: put

I left the old site on http://lifelogs.com in S3 in case I stop using Netlify or something else changes. The index page is now trivial courtesy of http://insider.zone/tools/client-side-url-redirect-generator/ (a dozen lines or so):

...
<meta
  http-equiv="refresh"
  content="0;URL=https://www.lifelogs.com"
>
...

What problems was I solving?

Give my business an online presence

I wanted to have my consulting business online. It's been running for over a decade and I just never found time to do it before.

Scratching the itch

I had not played with web technologies in a few years so this was my chance to get back into CSS, Javascript, and newer tools like Gatsby and ReactJS

I felt a bit like the famous Shrek the famous Shrek

SSL/TLS

The old plain HTTP site had no SSL certificate. I had lots of angry e-mails about that. Just kidding, no one cared. But I like a secure Web and Netlify made it very easy to use Let's Encrypt

Structure

The old site had a few pages and it was a pain to update or maintain them. I wanted a templating system, deployment tools, site hierarchy and mapping, the list goes on.

Preliminaries

I like Netlify so I use them for the deployments. The idea of the JAMstack appeals to me and generally I didn't have to worry about the CI/CD aspect or integrating with a Git repo.

I wanted to use the Netlify CMS for now to manage some aspects of the site. Emacs does the "edit some simple Markdown" job for me so much better I will probably not use the CMS myself. Still, for external contributors it's a good option.

The prototype

For my first try I played with Hugo using a pretty standard site template One-click Hugo, Netlify, NetlifyCMS starter

After implementing a quick site with it, I realized it wasn't a good fit for me. But the prototyping was valuable, and I put together pages and material that I could reuse in the next iteration.

It's important to listen to that tiny voice of experience saying "you've done this before and it was not fun." Out of duty or because of the perceived time investment I could have stuck with Hugo, but I wanted to make a site I would enjoy maintaining for years.

It's good to compare my notes to something like https://brycewray.com/posts/2019/07/why-staying-with-hugo/ which is more informed and not as subjective. The back and forth is indicative of programmers' tendency to explore new technology, and I agree with Bryce and others that no one cares what platform actually runs the blog.

What exactly did I dislike in Hugo?

Background

I've done web programming since 1996 or so, using a variety of tools. As the Web matured many of these matured, and others disappeared.

There are a few things over the years that definitely have "clicked" for me:

  • language: should be readable and extensible
  • integration: everything should play well together
  • community: I should not be the first to write a syntax highlighting module etc. for ${FRAMEWORK}
  • familiarity: I don't want to relearn basic stuff in a New Paradigm
  • dynamic: perhaps this is partly due to my background, coming from Perl, Python, and Lisp: I definitely feel more comfortable in a more dynamic language. On the other hand, Ruby on Rails never felt right to me. So this one is debatable.

Things I don't care for:

  • resume bullet points (see my services page, no need for more)
  • fancy terminology
  • complex data abstractions disconnected from the underlying use cases.

The language... a little...

I personally like both Go and Javascript a lot.

Go is a terrific language and can do amazing things with stability, performance, and clarity. I have used Go in work and fun projects. In particular with Prometheus and its alertmanager I wrote lots of Go templates and integrations.

For web development, using Go felt awkward. Go is not as flexible as Javascript. Go templates are especially inconvenient in a fast iterative development model (something I noticed playing with alertmanager and goss).

The component layout

The Hugo components and their layout felt disconnected from the HTML, CSS, and Javascript domains.

Relearning basics

I constantly felt with Hugo that basic web tech was getting reinvented in Go. The partials are a good example:

<footer class="bg-black ph3 pv4 white">
...
</footer>

{{ partial "svg" . }}

<script src="/app.js"></script>

That felt awkward: lots of syntax expressing a basic concept. Mixing orthogonal domains. No data model.

Enter Gatsby

I moved to a Gatsby / React template https://github.com/thriveweb/yellowcake for several reasons, and in the following blog posts I'll dig into the specific adaptations I did, including why I preferred Gatsby over Hugo in the areas mentioned above.