Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Building Your Static Site With Hugo, FlightJS, Sass, and Gulp

DZone's Guide to

Building Your Static Site With Hugo, FlightJS, Sass, and Gulp

Static site doesn't mean no dynamic behavior. This example shows how to attach event listeners to a static Hugo site.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Hugo provides a good workspace for creating layouts and content. I'm very satisfied with the options available to customize the site. However, Hugo does not have a say in how CSS and JavaScript should be structured so that it can be included on our site. In Hugo, the DOM nodes are already created, and we need a mechanism with which we can employ in adding event listeners to these DOM nodes. 

Single Page Application (SPA) frameworks like Angular and React create DOM nodes and define event listeners in the controller of the component. To attach event listeners to an existing DOM tree I came across a JavaScript framework called FlightJS. It's a framework created by the folks at Twitter that helps in adding behaviour to the DOM nodes. It's a minimal framework which does not dictate how the DOM nodes should be rendered nor it dictates the other aspects of the web application, such as routing, request/response handling, structuring data so that other components can consume it, etc. FlightJS provides only a mechanism that enables us to add behaviour to the existing DOM nodes.

This is exactly what I needed to build my static site. Let's take a look at how I have structured my site using SCSS, FlightJS, and Gulp for building the static content: 

--src
  --js
    --pages
      --home
        --index.js
    --vendor
      --flight.js
      --jquery.js
  --styles
    --pages
      --home
        --index.scss
      --vendor
        --index.scss

I have created an 'src' directory in my Hugo site which will contain all the JavaScript and SCSS files. Hugo's documentation suggests that we need to keep all static content (JavaScript, CSS, images, font files etc) in ' static' directory. Here ' src' directory will contain the development code i.e. unprocessed SCSS files and non-minified JavaScript files. The ' static' directory, on the other hand, will contain CSS code (processed SCSS) and minified JavaScript files which are production ready.

In our example, the FlightJS code can be included in ' js/pages/home/index.js' file. Here's the code which creates a FlightJS component, defines a ' click' event handler, and attaches the component to an existing DOM node:

// create a flight component
var AboutMeBtn = flight.component(aboutMe);

// component definition
function aboutMe () {
  // event listener for the click event
  this.onAboutMeBtnClick = function () {
    alert('About me');
  };

  // after the component has been initialized, attched the event listener
  this.after('initialize', function () {
    this.on('click', this.onAboutMeBtnClick);
  });
}

// attach the component to the DOM node with id - aboutMeBtn
AboutMeBtn.attachTo('#aboutMeBtn');

FlightJS has a dependency on jQuery and thus you see jquery.js present in the ' vendor' directory. A lot can be done with FlightJS, however, I'm restricting this post to build a proof of concept which demonstrates the minimal functionality.

The next step is to add a build process that compiles the SCSS files, compress and concatenates JS files and creates a hash for these files for browser cache busting. I'm using GulpJS to create a pipeline build and here's the sequence:

  1. Compile SCSS files — compile 'pages' and 'vendor' files separately.
  2. Concatenate the vendor related CSS files.
  3. Move the generated files to 'static/css' directory.
  4. Compress the JS files — 'pages' and 'vendor' files separately.
  5. Move the generated files to 'static/js' directory.
  6. Use 'gulp-hash' to create a hash for the generated JS and CSS files. Create a hash manifest file and place it in the 'data' directory (assets_js.json and assets_css.json).

The gulpfile.js used to build the pipeline can be referred here: https://github.com/sagar-ganatra/hugo_example/blob/master/gulpfile.js

After compiling and generating content in the ' static' directory, you can refer to these files in your layout templates:

<link href="{{ .Site.BaseURL }}css/vendor/vendor.css }}" rel="stylesheet" type="text/css"> 
<script src="{{ .Site.BaseURL }}js/vendor/vendor.js }}"></script> 

Here the template variable {{ .Site.BaseURL }} would be replaced with the baseUrl defined in the config.toml file and when the generator creates the static files, it would be referring to the file '<site>/css/vendor/vendor.css' and '<site>/js/vendor/vendor.js'. Since we are adding a hash to these files, it would not be possible to refer to 'vendor.js' and 'vendor.css' files like this. However, we can use the manifest files created when generating a hash for referring these files.

As noted in the last step of the Gulp build process, we are creating manifest files ' assets_js.json' and ' assets_css.json' in the ' data' directory. The content is a JSON structure that contains hash references.

{
  "pages/home.js":"pages/home_4740e2cf.js",
  "pages/home_debug.js":"pages/home_debug_3f723556.js",
  "vendor/vendor.js":"vendor/vendor_f8da36b2.js",
  "vendor/vendor_debug.js":"vendor/vendor_debug_b3868b34.js"
}

Hugo can read files in the ' data' directory and it supports TOML, YAML and JSON file formats. Now we can modify our template to get the hash refernce from the asset files:

<link
    href="{{ .Site.BaseURL }}css/{{ index .Site.Data.code_assets.assets_css "vendor/vendor.css" }}"
    rel="stylesheet"
    type="text/css">

And:

<script>
    src="{{ .Site.BaseURL }}js/{{ index .Site.Data.code_assets.assets_js "vendor/vendor.js" }}">
</script>

The template variable ' .Site.Data.code_assets.assets_js' will contain reference to the values in the file ' data/code_assets/asset_js.json' and the reference key ' vendor/vendor.js' would return the value assigned to it ( vendor/vendor_f8da36b2.js).

Code is shared at my GitHub repository here: https://github.com/sagar-ganatra/hugo_example

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
web dev ,static sites ,javascript ,css

Published at DZone with permission of Sagar Ganatra, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}