Thumbnail image

Easy Way to Embed Asciinema Into Hugo

  • 2-minute read
!
Warning: This post is over 365 days old. The information may be out of date.

Table of Contents

As a blog author, especially those related to computing, sometimes we need a media that can support the content. There are many ways to support content, including screenshots and video recording. but if we are faced with commandline interactive, it doesn’t feel right if we use screenshots or video recording as a means of documentation.

it’s time for us to get acquainted Asciinema, with this tool let’s forget about recording and video applications that look terrible due to blur The main features offered by Asciinema include:

  • simple recording, run with asciinema rec command and finish with ctrl-d.
  • copy & paste, every time you want to try the command from the recording, just drag the cursor on the text and copy it. well.. everything is just text not a bunch of pixels. - embedding, well of course this feature is expected, and will be our discussion today.

Get Started

Initially I followed the guide from tonylyke, but there was a problem when following the guide. Asciinema that I embed always doesn’t generate or doesn’t appear, I tried to debug, but there are no error indicators. and in the end I surrender. I looked for another alternative, and finally found it.

gohugo-asciinema, a hugo module that offers simple and easy asciinema embedding function

Installation

the hugo module is powered by go modules. and we need go compiler to run it. in voidlinux you can run the command to install it.

sudo xbps-install -S go

ok, time to install

  • run the following command, to make our blog repo a module place.
hugo mod init gitlab.com/novores/blog-repo
  • next, we fulfill the dependency of gohugo-asciinema with the command.
hugo mod get -u -v cj.rs/gohugo-asciinema
  • then edit your config,config.yaml/config.toml by adding the module reference.
    • yaml 
      module:
  replacements: "cj.rs/gohugo-asciinema->gohugo-asciinema"
  imports:
    - path: cj.rs/gohugo-asciinema
    • toml 
      [module]
[[module.imports]]
  path = "cj.rs/gohugo-asciinema"

Usage

use the following shortcode into the page you want to embed asciinema.

example:

{{< asciicast src="free.cast" poster="npt:0:04" autoPlay=true loop=true rows="10" cols="80" >}}

NOTE
make sure the files are placed in the same folder as index.md, this is an example of my system file tree

content/blog/linuxupskillchallenge-day1/
├── cover.png
├── df.cast
├── free.cast
├── index.id.md
├── ls.cast
├── ssh.cast
├── uname.cast
└── uptime.cast

in addition to the above parameters we can also use other parameters see asciinema-player options

and the result will be like this.


thanks for reading 👋

Reference

Related Posts

hugoasciinema