Hugo development tutorials - Blog posts tagged with Hugo

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.

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.

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.

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?