Embedding asciinema cast in your Hugo site

Overview
Embedding videos in your blog could be overwhelming and time-consuming. Alternatively, you could use asciinema player to replay a sequence of steps of your terminal on your blog website. Of course, firstly, you need to record your terminal session via asciinema
and save the output in a filename.
Using asciinema.org - The easy way
You could use asciinema
in your blog content by embedding a snippet similar to this:
Although this method works well, you can use asciinema without uploading the cast file on the asciinema site.
Setup Asciinema Player - On your blog website
Download the player
Download the latest asciinema-player from the github release page. Example: v3.2.0 version
Put those files in different directories of your hugo site respectively, example: static/css
and static/js
Setup your hugo templates
Insert this code inside the head
template section: layouts/partials/_shared/head.html
I use a parameter in each blog page to enable this block. So, the if condition is “optional” to use.
Create a shortcode
Create a shortcode file. Example: layouts/shortcodes/asciinema.html
with this content:
The options used are documented here.
Upload an asciinema content
-
Create a new cast and upload it in a static directory, example:
static/casts/demo.cast
. -
Call the asciinema player in your page, using this code block (the shortcode asciinema previosly configured):
-
(Optional) In my case, I need to include
asciinema: true
in the markdown options to make sure the css assets will be included. I prefer to do this, to load the css file for only some blog pages.
Demo
Asciinema-player in action: