New Website in Hugo
I am finally building out my personal website. I've only been online since 1995, I think it is about time!
Some initial impressions⌗
The default goldmark typographer setting⌗
Don't even get me started about a system that automatically converts a markdown document's quotes into curved quotes. What an absolutely terrible feature for a blog that will be focused on programming. I can't stress enough how much I loathe curved quotes. (If I wanted curved quotes, I'd be writing in LaTeX. Actually... LaTeX + MD might be something for the future.
I found the settings to turn off typographer quickly enough. This is frustrating to other people too; there's even an issue about it.
The shortcode system⌗
It's not that bad once getting the hang of it. There definitely are more flexible templating systems out there, but this one seems good enough. Here are some functions; they can do things.
One of my requirements for this website is the ability to include code snippets, with syntax highlighting, and customizable if not collapsible code blocks.
Luckily, after a few hours of getting familiar with hugo and markdown I discovered a number of ways of implementing code snippets:
```back-ticks```. This is barely acceptable for basic one-liners.
answer2 = sum([len(reduce(set.intersection, [set(_) for _ in x] )) for x in data])
4 space indent. looks good, but no syntax.
def half_list(alist):
size = int(len(alist)/2)
# import ipdb; ipdb.set_trace()
return alist[:size], alist[size:]
The {{< highlight >}} shortcode. This is better, but has two problems: the need to manually paste code and unwieldy height with large snippets.
{{< readfile >}}: I found this randomly in the knative GH repo. It takes care of automatically inserting a file, but still has the height problem.
After looking through my theme's shortcode files, I discovered it provides a collapsible {{< code */}}. This was nearly perfect, and after a bit of hacking, I combined it with the ideas of the previous readfile to create my own shortcode, that can readfiles or take inputs, and is collapsible.
Here is my {{</* code >}} implementation.
If only {{< gist >}} was more flexible...
And finally, I almost forgot, this theme has prism.js support so backticks followed by a syntax spec work
import requests
r = requests.get('https://cresante.com')
r.close()
Automated deployment⌗
My next step was automated deployment. Of course I can build the site locally and use rsync to push it, but what's the fun in that? I'm supposed to be learning devops, so I'm taking this idea a step further: I need an automated way to deploy it live after a git push.
Problem #0: The default packaged hugo on my webserver is version 0.40, way behind the current version and what my theme requires.
Solution #0.0: Use a docker image to start building with CI. At first I found this, but the unofficial DH found in the docs is newer.
Solution #0.1: Just use a prebuilt binary from the releases page with a github hook. (using a snap was a possible solution in this case, but unnecessary)
I ended up going with the github hook, based around the script in DO's docs