Enhancing Hugo for Tech Blogging

Hugo Is Great for Building Blogs, and Can Be Extended to Be Even Better.

Posted by Ryan S. Brown on Fri, Jan 15, 2016
In General
Tags: meta, cloudformation, go

This is a bit of a metapost, and isn’t directly related to Lambda. Despite that, it’s really handy if you happen to blog about AWS with Hugo or like to share CloudFormation templates.

Hugo is a static site generator that turns a folder full of Markdown files into a folder full of HTML files. It’s simple, quick, and surprisingly flexible. For some other articles, like this one on Deploying to Lambda with CloudFormation, I’ve included a one-click deployment button like this one:

Launch stack TestStack

To make this button, I followed the instructions from the Construct a Launch-Stack URL and the examples in Hugo’s shortcode docs.

To make a new button, I can write { {< stack name="EbsScheduledSnapshots" key="2015-11-ebs-snapshots/base-backup-template.json" >}} in the post Markdown file, and Hugo expands the shortcode with (by default) the examples.serverlesscode.com bucket and us-east-1 region. It also fills in the button.

In the end, the HTML looks like:

<a style="text-decoration: none"
   href="https://console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/new?stackName=EbsScheduledSnapshots&amp;templateURL=https://s3.amazonaws.com/examples.serverlesscode.com/2015-11-ebs-snapshots%2fbase-backup-template.json"
>
  <img style="height: 1em"
       src="https://s3.amazonaws.com/cloudformation-examples/cloudformation-launch-stack.png"
       alt="Launch stack EbsScheduledSnapshots">
</a>

If you blog about AWS, with Hugo or not, having one-click demos so users can play with whatever you teach them is great. I’ve gotten several emails along these lines.

The post you had on scheduled backups is running in my prod environment now. Thanks for making it so easy to use!

To make it easier for other bloggers to share their AWS demos, I put my templates on Github at ryansb/hugo-shortcodes. The one for one-click CloudFormation templates is called stack.html. You can copy just the single file into your Hugo layouts/shortcodes directory and it’s ready to use.

Thanks for reading! If you have comments or questions, email me at ryan@serverlesscode.com or open a Github issue on ryansb/hugo-shortcodes.


Tweet this, send to Hackernews, or post on Reddit