Hugo development tutorials - Blog posts tagged with Hugo

Hugo development related blog posts, coding and deep dive tips.

Posted on 6 January 2020

How to integrate Highcharts with Hugo

Beautiful charts and graphs for your Hugo web data

Highcharts is awesome data visualisation library to generate beautiful graphs. This post will tackle how to include the the highcharts lib and custom chart.js files. In a future post I will try to explain how to generate charts from Dynamic or Markdown content. Download Highcharts using NPM I am using NPM as package manager for Hugo, so adding support for Highcharts is as simple as: npm install highcharts --save Mount node_modules folder to Hugo By default Hugo will only process CSS and JS files in the assets folder.

How to integrate Prism.js code highlighting with Hugo

Hugo code beautified using Prism.js instead of Chroma

Hugo by default ships with Chroma, however if you wanted to use Prism.js - perhaps due to many plugins, themes and configurable options, this is a very very quick and basic tutorial for beautified code using Prism.js instead of Chroma. Download Prism JS and Prism CSS Download Prism.js with any of the configured plugins and theme that you would like to use. Here is one I am using, click the link for my pre-configured options.

Hugo CSS concat, minify and purgecss using postcss

Tutorial and example on now to configure Hugo to automatically performance tune CSS using PurgeCSS

Using bundled libraries and frameworks means including a ton of CSS being added in the site. This CSS often adds bloat and unnecessary bandwidth drain to the page request. Sure the CSS and JS may be minified - but still, you still have a lot of classes that are doing nothing. Hugo already has an excellent support for minification, fingerprinting and concatenation. This blog post will demonstrate how I have set it up for automatically purging the unnecessary CSS.

Hugo package management - import and include upstream CSS and JS in Hugo

Automatically add JQuery, Font Awesome and Bootstrap using NPM

Generally, there are 2 main options to include JS and CSS in Hugo, one is to use CDN and other is to manually download external dependencies and version control them into your own project. Personally, I like the idea of managing upstream dependencies automatically using a package manager. You can manage dependencies in Hugo however you like - Hugo is flexible enough to work with your workflow. Why bother serving external JS & CSS when you can CDN?