Welcome

Sharing some ramblings. Maybe useful. Probably unlikely.

Links

Here are some links to some of the references for this site and my implementation/testing.

Lorem Ipsum alternative generators

Placeholder images

Bootstrap Custom JavaScript

In my last post I showed how to embed and customise Bootstrap with a static Hugo site, now it’s the turn of the JavaScript.

It’s much simpler. We’ve already got Bootstrap installed. Lets now edit our main.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import Collapse from 'bootstrap/js/src/collapse';

// Initialize the navbar toggle
document.addEventListener('DOMContentLoaded', () => {
    const navbarToggler = document.querySelector('.navbar-toggler');
    if (navbarToggler) {
        new Collapse(document.querySelector('#navbarNav'), {
            toggle: false
          });
    }
});

console.log('This site was generated by Hugo.');

This will re-enable the Nav Bar toggle without importing the Bootstrap bundle. Find your JavaScript embed code and make it like this:

Hugo Bootstrap

OK so in our previous post we started up a static Hugo site, now lets style it with Bootstrap. I’m technical and have no design eye so I use Bootstrap so I can just throw some components together to make something functional and look OK. You may not be interested in Bootstrap but integrating SASS into Hugo maybe.

Dependencies

Remember to run in an elevated command prompt. Install NVM (Node Version Manager) so we can easily have multiple versions of Node.js.

Hugo Starter

I originally built most of them many years ago using Umbraco but I didn’t update them very much and the longer it went on the harder it was to update to a new version and so they’d gone a bit stale. Also I wanted to make use of cheaper/alternative, non .NET hosting. I’d been contemplating switching to a static site generator for a long time. Having done a bit of investigation into a few options; Jekyll, Gatsby and Next.js I decided to use Hugo for some of my sites. Mostly for simplicity and speed. Despite being a profesional technologist since last century, I’m lazy and don’t have the time I used to for projects so just wanted something that would get results quick!

Sitemap