Posts tagged 'hugo'

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:

config.toml

[permalinks]
    talks = "/talks/"

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

themes/robertbasic.com/archetypes/talks.md

+++
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:

themes/robertbasic.com/layouts/static/list.html

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

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

Happy hackin’!

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

GitHub flavoured code fences in Hugo

published on March 28, 2016.
Heads-up! You're reading an old post and the information in it is quite probably outdated.

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.
Heads-up! You're reading an old post and the information in it is quite probably outdated.

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 engineer, consultant, open source contributor.

Let's work together!

If you require outsourcing or consulting help on your projects, I'm available!

Robert Basic © 2008 — 2019
Get the feed