Posts tagged 'hugo'

Making it easier to blog

published on January 03, 2020.

2019 was a not so great year for my blogging. 7 posts in total. There are multiple reasons for that, all the regular stuff like “I didn’t find the time” and “Nothing to blog about”.

Currently I’m reading Atomic habits (great book by the way, do read it if you haven’t!), and one of the suggestions for starting a new habit is to make it easy to do it. So, here we are.

This blog is powered by a static web site generator, Hugo, I write the posts in plain ol’ markdown files, and use (g)vim as the editor. I even created a vim plugin to speed some things up with Hugo. Once a new post is written, I use fabric to build and deploy the site to my server. Pretty easy.

After giving it a bit more thought, there are still some steps in this entire process that I can speed up with a few more vim helpers, and a couple of bash functions.


I wrote four little bash functions to make my blogging even easier than before:

The blog function takes me to directory where I keep my blog, starts Hugo’s server in the background, waits a bit so that the site is up, and opens up my local blog in Firefox. Given that it’s a bash function, I can create a custom action in XFCE’s Application finder.

function blog() {
    cd "/home/robert/projects/"
    hugo server &> blog.log &
    sleep 3s
    firefox http://localhost:1313/blog/

blog-stop stops the hugo server and cleans up.

function blog-stop() {
    cd "/home/robert/projects/"
    pkill hugo
    rm blog.log

blog-new creates a new blog post and opens it up in gvim.

function blog-new() {
    hugo new blog/$
    gvim content/blog/$

blog-drafts lists all the drafts I currently have. They tend to pile up after a while.

function blog-drafts() {
    ag -l "^draft = true" content


As for vim, I have the vim-hugo-helper plugin, and one custom vim function that I call on a new post:

command! BlogWrite call BlogWrite()
function! BlogWrite()
    call HugoHelperFrontMatterReorder()

It calls the four Hugo helper functions that I used to call manually every time.

There’s still room for improvement, but this will do for now. I also want to figure out a way to blog from my phone, I have a few ideas for that as well. Need to test them out and see what works best.

Happy hackin’!

Tags: blogging, hugo, vim, helpers.
Categories: Blablabla.

Static web pages in Hugo

published on January 24, 2018.

Last week I created a page on this site that holds all the talks I have prepared for meetups and conferences. As this site is powered by Hugo, the process wasn’t that straightforward. I want to write down the steps I did to make it easier in the future.

Oh, and when I say “static” in the title of this post, I mean pages whose content is not completely powered by a markdown content file.

I have tried different approaches, but what ended up working is the following.

In the configuration file, I added a new type of permalink:

    talks = "/talks/"

I created a new type of an archetype under the archetypes directory of my theme:

draft = false
date = {{ .Date }}
title = "{{ replace .TranslationBaseName "-" " " | title }}"

I have also created a new template file for that talks type, which actually has all the content I want to display, but is also capable of using the partials I have created before:

{{ partial "header.html" . }}
<div class="post">
<div class="column">
    {{ partial "sidebar.html" . }}
{{ partial "footer.html" . }}

And finally create a markdown file for it with hugo new talks/, leaving it as is.

Happy hackin’!

Tags: hugo, blog, talks.
Categories: Blablabla, Software.

GitHub flavoured code fences in Hugo

published on March 28, 2016.

This was an undocumented feature until today, so I missed it when I was converting my site to Hugo last week. It is also possible to highlight code examples with GitHub flavoured code fences, or, in other words, with triple backticks ```.

I like this a lot because it makes highlighting code in posts easier. Typing the {{< highlight >}} shortcode is just awkward and I always end up forgetting either the angle brackets or add too much or too little currly brackets. Backticks are much nicer.

The code fences are not enabled by default, though. We need to set PygmentsCodeFences to true in Hugo’s configuration file and that’s about it. Everything else about syntax highlighting stays the same.

Change to backticks in old posts

I used these two simple sed one-liners to change all the highlighting shortcodes to the code fences:

find -name "*.md" -print0 | xargs -0 sed -i 's/&#123;&#123;< highlight \([a-z]*\) >&#125;&#125;/``` \1/g'
find -name "*.md" -print0 | xargs -0 sed -i 's/&#123;&#123;< \/highlight >&#125;&#125;/```/g'

Now I don’t even need a custom Vim function to insert the highlighting shortcode. Sweet.

Vim Hugo helper

published on March 25, 2016.

I think I just wrote my first Vim plugin. OK, it’s more a bunch of Vim functions slapped together than an actual plugin, but gotta start somewhere, right?

Last week I converted this blog to a static web site and I’m using Hugo as the static website engine. Writing posts is a lot easier now, plus it’s written in Go, which I started learning a few weeks ago.

Vim Hugo helper is a plugin, collection of Vim functions that help me while writing posts. It will hopefully speed up a few recurring tasks such as drafting and undrafting posts, inserting code highlight blocks, etc. I guess I’ll be adding more to it in the future, but for now it has a total of 5 functions.

Front matter reorder

Hugo posts have a front matter which is basically meta data for the content. Hugo will create the front matter out of an archetype which is a template of sorts for the front matter. One thing I don’t like is that when a new post is created, the meta data is sorted alphabetically so the HugoHelperFrontMatterReorder function reorders it in the way that I do like.

Drafting/undrafting posts

The HugoHelperDraft and HugoHelperUndraft functions simply draft and undraft posts by setting the draft meta data in the front matter to either true or false.

Code highlight blocks

The HugoHelperHighlight(‘language’) function inserts the highlight shortcode that comes built-in with Hugo and sets the language of the highlight block.

Setting the date of the post

Finally, the HugoHelperDateIsNow function sets the date meta data of the post to the current date and time.

It’s not much, definitely has room for improvements, but I used it even when writing this very post, so I guess this helper is helpful.

Tags: vim, plugin, hugo.
Categories: Programming, Development.
Robert Basic

Robert Basic

Software developer making web applications better.

Let's work together!

I would like to help you make your web application better.

Robert Basic © 2008 — 2020
Get the feed