Skip to main content

Homepage Quotes

I originally wrote this page as a guide for how to add JS to a Hugo page. Now I'm using Docusaurus this is as easy as creating a React component and adding it to the homepage layout.

I was interested in learning how to use Hugo's shortcodes to add JavaScript to my website to make it less boring.

I wrote a Goodreads quote scraper I had the idea to display random quotes on my homepage.

-

How to do it in Hugo

I found this tutorial which gives a good example for how to add JavaScript to Hugo sites. In short, the steps are:

  1. Write the JavaScript you want to add and save it to static/js/
  2. Write an accompanying shortcode and save it to layouts/shortcodes/
  3. Add it to your .md files

JavaScript​

Here is the script I wrote to select a random quote and format it:

code file="/static/js/quotes.js" language="js" %}}

Typing Animation​

I added the typing animation using typed.js.

HTML/Hugo Shortcode​

This is used via {{ < random_quote > }} in my content/_index.md file for the homepage:

// code file="/layouts/shortcodes/random_quote.html" language="html"

Filtering Quotes​

Some of the quotes on Goodreads are really long, so I filtered for the short ones using awk:

$ awk '{if (length($0) < 100) print }' inspirational_quotes.csv >> quotes.csv