Hello world. Once again.

Nothing out of the ordinary happened - the other day I was browsing some old directories, when I saw a bunch of old sketches of a blog and a personal website. Then I glanced at the list of things I wanted to write about, and decided that it's time for the blog to come to life. I don't think I could live without Markdown and I wanted for things to run in Go, so I decided to go with Hugo. While checking for the domain expiration date, I remembered hearing about Cloudflare as a fair (=wholesale) priced domain registrar, so I transferred the domain there to check it out.

Development Setup

I've setup the local source code to sync to AWS CodeCommit repository and configured git to use AWS credentials generated in IAM -> Users -> Security Credentials -> HTTPS Git credentials for AWS CodeCommit. Visual Studio Code then works seamlessly and allows to push any changes to the CodeCommit repo.

Theme & Design

This post really helped with creating a Hugo theme from scratch, and this post helped out with setting up the tags and displaying them correctly in the post pages. After being done with that, it was basically playing around with HTML and CSS to get it sort of look the way I wanted. Last touch: the perfectly imperfect DOS VGA font.

It was a little tricky to figure out how to display the most recent post on the index page – and make it working again after it broke when I started using bundle pages! After some Google-fu, Hugo help pages really helped. This was the solution I ended up with:

1
2
3
4
5

{{ range (where .Site.Pages "Section" "posts") }}
    {{ range first 1 .Pages }}
        {{ partial "allposts.html" . }}
    {{ end }}
{{ end }}

Using this template, Hugo displays one latest post on the index page. However due to subtleties of the bundle pages it meant I had to supply the full path when referencing images in Markdown files, e.g.:

1

![Alt Text](/posts/hello-world/hello_world.jpg)

It seems to be there should be a more elagant solution but I'll take that for now.

Hugo docs on syntax highlighting were somewhat vague, but after some search this was helpful to add some minimal code styling. I've added he following configuration to config.toml:

1
2
3
4
5
6
7
8
9

[markup.highlight]
      codeFences = true
      guessSyntax = true
      hl_Lines = ""
      lineNoStart = 1
      lineNos = true
      lineNumbersInTable = true
      tabWidth = 4
      noClasses = false

I also wanted posts to have information whether they have been updated and when. For this Hugo has a neat feature - it can read the last edit date from git and add this info automatically to front matter, e.g. "lastmod: 2006-01-02<...>". This can be enabled in config.toml using "enableGitInfo = true". However I found that if I make any changes to the front matter itself, it treats it as an update to the post itself, which is not what I want - imagine I have 100 posts and decided to make an update to the front matter on all of them - the "last updated" date would change too. For this reason I've decided to keep the "lastmod" updated manually for now. What's neat is that you can only display the update date if the post has been upated at all. After reading this and this article I've managed to get it working and put this to my single post template page HTML:

1
2
3
4
5
6
7
8
9

{{- if .Lastmod }}
     {{- $lastmod := .Lastmod.Format "2006-01-02" }}
     {{- if ne $lastmod $pubdate }}
             | Updated: 
             <time datetime="{{ .Lastmod }}" title="{{ .Lastmod }}">
                 {{ $lastmod }}
             </time>
     {{- end }}
{{- end }}

Deployment

OK great, so literally hours are now spent trying to get the HTML and CSS right. Enough with the design, time to deploy! Given that I work with AWS a lot lately and that the website is static, a public S3 bucket seemed like the perfect candidate for hosting. Initially this led me into testing out the CodeCommit and CodePipeline services, which worked great. However it turns out that with Hugo it's much simpler, as described here. All that was left to do is create a bucket, configure Cloudflare to work with S3 static website hosting and the site was up and running. I've chosen to keep WWW in the URL (as opposed to a naked domain), so Cloudflare's page rules came in handy:

1
2

kajus.io/*
Forwarding URL (Status Code: 301 - Permanent Redirect, Url: https://www.kajus.io/$1)

Final deploy:

1

rm -R public/* & hugo && hugo deploy

And that's it! Time to write.