Blogging with Hugo
or "how to tolerate markdown"
A NEW BLOG
This is not my first blog ever. Over the years I’ve maintained and scrapped various personal webpages including weblogs. Now it’s time for another try. I want to focus my writing here on tech and IT in whatever one may consider to be the professional side - but who am I kidding, a blog is never strictly professional. Let’s see how this goes. 😉
The Tech Stack
I have some prior experience with both maintaining and running Wordpress blogs. So naturally I’ve been looking to try something else instead. While static page generators have been around for ages the whole idea seems to have grown into more than just a valid option by now. I guess we have to thank github pages, netlify and AWS amongst others for this trend.
The cool thing is that running a static web page in 2020 is really no hassle anymore. Gone are the needs to think about traffic, web servers, security, databases, scripting languages etc. The only thing left to consider is where to host the page itself and how to rent a domain name to point to the hoster in question.
The Site Generator
In my hunt for a decent site generator framework / tool I’ve come upon Jekyll a lot. So naturally this would have been my first tool to try. There were just two major blockers for me.
One is that Jekyll doesn’t run readily on all available OS platforms. I really need to be able to jump between operating systems especially when all I’m going to do is edit simple text files.
The second problem with Jekyll was that it doesn’t support the text format I’ve been looking to use: AsciiDoc. I already know AsciiDoc from documenting various projects in the past and imho it naturally trumps the limited syntax of markdown, and that’s while being more readable at the same time.
A little more googling around brought Hugo to my attention. It works similarly to Jekyll because it is still markdown based but it has the possibility to defer to different backends. One of them actually is AsciiDoc via the means of Asciidoctor. So the choice was obvious to me: Hugo it is.
Little did I anticipate that the current asciidoctor backend is not without its problems. Especially syntax highlighting, a prime feature of AsciiDoc, doesn’t seem to integrate with Hugo (or rather its themes) all too well currently:
So the pragmatic decision for now is to start writing in markdown until this becomes a problem. I’m a little bit concerned about the portability of my blog posts but I’m told there are converters from markdown to asciidoc.
Hosting
At the time of writing this is all not decided finally yet. I’m currently running a local Hugo instance in dev mode to try out and configure the site. My goal is to put this on github and have it hosted via github pages. It shouldn’t be too complicated to also setup a github action to build the site from new pushes on the main branch. Famous last words anyone? 😅
The Theme
Ok, Hugo comes with a lot of themes one could use. I was eying the one rgielen.net uses, it’s called Coder. Should suit me well, right? Nah, but I’m not feeling like a right out copy cat today. 🐱
I also know that light themes are considerd friendly on the eye and overall more professional but I’ve been choosing darker themes wherever possible. So this lead me to the LoveIt theme. It really comes with a lot of included functionality on top of Hugo. Even the syntax highlighting seems good to me. That would be one further lock-in down the markdown path for me… We will see. 🤔
I’ve already been customizing this theme a little bit. The footer needed to be extended for me to be able to fit in two links for required legal stuff (thx 🇩🇪 & 🇪🇺).
.footer {
height: 3rem;
}
And I used all my SCSS knowledge (think: none) to put that nice company logo up there into the header.
@font-face {
font-family: 'Infinium Guardian Caps';
src: url('/fonts/Infinium Guardian Caps.ttf') format('truetype');
}
@font-face {
font-family: 'Infinium Guardian';
src: url('/fonts/Infinium Guardian.ttf') format('truetype');
}
$ae-color: #0094FF;
.ae-logo-caps {
font-family: Infinium Guardian Caps;
color: $ae-color;
}
.ae-logo {
font-family: Infinium Guardian;
color: $ae-color;
}
what about interactive stuff?
Naturally one must wonder, how does a blog work completely static. So there are a few things I’ve left disabled for now because they would include pooling functionality from online services like Disqus.
The following is disabled currently:
- Search
- Comments
- Share Buttons
- Site counters
- Google Analytics
- SEO Stuff
I don’t think a lot of that is still necessary today. One can just take a url and paste it e.g. on Twitter. I don’t need to give you a button for this. And when you’re on Twitter already why don’t use that for comments as well? I’m still thinking about what is necessary and what isn’t.