Welcome!

Welcome to my second attempt ever to start a blog! The idea is to do a minimum of one post per month based on a few ground rules:

  • It must provide knowledge people may benefit from
  • Not each topic is necessarily tech-related
  • Every post must be accessible and provide enough information so less tech-savvy people may enjoy reading them as well.

This Month’s topic is… Blogs! What better way to start off than to explain how I setup my development environment to embark on this journey, am I right?

What framework to use?

Let’s start off with a small requirement analysis. I wanted a blogging environment that is:

  • Easy to use - I’m willing to write lots of content, but any additional maintenance on a system (no updates/plugins/…) would take up too much of my time.
  • Portable - Most of the time I do my research on the way, during lunch breaks, so I want to write content anywhere!
  • Static - I have seen too many sites used as webshells, my blog will have to be static. Less moving parts makes it easier to secure.
  • Allows feedback - I want to know what you guys think of these posts!

Based on those requirements I searched for a few minutes and came to my shortlist of Gatsby, Hugo, Jekyll and Scully.

Gatsby and Scully are both JavaScript based, and in my opinion still required quite a lot of diving into Javascript where I just wanted to add simple markdown files, and let it generate nice static pages. I’m pretty sure these may provide more flexibility for the webgurus out there but I’m not a webdesigner, so those were out for me.

That leaves us with Jekyll and Hugo. I had used Jekyll in the past, so I knew what was possible with that one, so I thought for a while about using Jekyll again. But then I tried Hugo and boy, was I in love! It came with default Disquss integration, rss feed and was set up in seconds(!) in my lab. I decided to go with Hugo in the end, we’ll see if I made the right choice in the end ;)

Setting up shop

The easiest way to start developing would’ve been to download the Hugo binary and run it. However, that wouldn’t be very portable, now would it?

I’m doing most of my development in Visual Studio Code, as I use different programming languages quite frequently. One of the cool recent features they have added is remote container support: run your IDE and all its plugins in a docker container, whilst the code still resides on your host system. Sounds pretty neat right?

To get this working though you’ll need a few things:

Installation of both was very straigh-forward, so I won’t be covering that part. If you stumble upon any issues feel free to hit me up on my socials, always willing to help!

My first objective was to get things running in a docker environment. Someone already provided the necessary config for a hugo devcontainer. Unfortunately for me there still seemed to be an issue with the hugo_extended variant which i needed, (glibc issues on alpine) so I had to modify it a bit.

FROM golang:latest

# VARIANT can be either 'hugo' for the standard version or 'hugo_extended' for the extended version.
ARG VARIANT=hugo_extended
# VERSION can be either 'latest' or a specific version number
ARG VERSION=latest
RUN case ${VERSION} in \
    latest) \
    export VERSION=$(curl -s https://api.github.com/repos/gohugoio/hugo/releases/latest | grep "tag_name" | awk '{print substr($2, 3, length($2)-4)}') ;;\
    esac && \
    echo ${VERSION} && \
    wget -O ${VERSION}.tar.gz https://github.com/gohugoio/hugo/releases/download/v${VERSION}/${VARIANT}_${VERSION}_Linux-64bit.tar.gz && \
    tar xf ${VERSION}.tar.gz && \
    mv hugo* /usr/bin/hugo
    # go get github.com/yaegashi/muslstack && \
    # muslstack -s 0x800000 /usr/bin/hugo

FROM mcr.microsoft.com/vscode/devcontainers/base:0-buster
COPY --from=0 /usr/bin/hugo /usr/bin
EXPOSE 1313
WORKDIR /src
CMD ["/usr/bin/hugo server"]

Aside from the dockerfile you will also require a devcontainer.json file. This file contains the plugins to load in the container, which dockerfile to use to build the image and what arguments to pass in the dockerfile.

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.128.0/containers/hugo
{
	"name": "Hugo",
	"build": {
		"dockerfile": "Dockerfile",
		"args": {
			"VARIANT": "hugo_extended",
			"VERSION": "0.74.0"
		}
	},
	"settings": {
		"terminal.integrated.shell.linux": "/bin/zsh"
	},
	"extensions": [
		"bungcip.better-toml",
		"davidanson.vscode-markdownlint"
	],
	"forwardPorts": [
		1313
	],
	"remoteUser": "vscode"
}

Once you have those files in place press Ctrl + Shift + P to get the following menu:

Choose “Remote-Containers: Open Folder in Container…” and select your workspace folder where you want to scaffold the hugo site. If all went well you should see a terminal with the zsh shell opened.

Time to initialize our hugo site! Run the command hugo new site <outputfolder> to scaffold your new site.

From here on out you can start working on that site! What I did first was:

  • Look for a few nice themes, plenty of site themes specifically for blogs.
  • Learn about the built in Shortcodes
  • Add some VSCode tasks to limit my time retyping commands in a command line.

Conclusion

So! I hope you had at least a bit of fun messing around with some devtools right? ;) I must say my first blog post of the month was written faster than i thought! Do drop a comment if you have any remarks or feedback on how I can make this better, it is very appreciated!

About the next topic… Probably something Blue-team related, stay tuned!