Hugo is a free and open-source static site generator (SSG) with a beautifully simple setup process, a command line interface and several killer features which I’ll cover in this tutorial. I am going to take you through the entire process of building a production website with Hugo, using GulpJS as an asset pipeline for CSS, JS and images.
[…]
By just hosting static asset files (html, css, js and images) instead of an entire database driven platform like Wordpress you get speed, security and cost benefits. So I was quickly sold on an SSG.
[…]
Now we have content but not a website so next comes the compiling stage. To get Hugo to compile just run…
[…]
Those familiar with Wordpress should know what a single layout is responsible for. It’s for defining the layout of a single piece of content, in this case an article. However unlike Wordpress, layouts in Hugo are HTML files. For Hugo to recognise a single layout for articles it must have the file path /layouts/articles/single.html.
[…]
So just to demonstrate let’s add some styles to the home page. First create a file static/css/main.css.
I’ll add some ridiculous style just to see that the CSS is taking effect on our page.
And now we just need to include the styles in the head of our home page html.
[…]
Woaaah! Red. And if you take a look in your public folder you’ll see Hugo has copied static/css/main.css to public/css/main.css exactly as we wanted.
[…]
For now though let’s just create a file called main.scss.
[…]
Now if you run Gulp and check in the static/css/ directory you should see that it is hashing your stylesheet to something like main-9b407fcb.css. It’s working, but how do our html layouts know which file it needs to be looking for? For this we can use the last unknown Hugo directory data/.
[…]
Excellent now all that’s left to do is update our html layouts to query the new data file.
[…]
So in our layouts, instead of directly referencing the file /css/main.css we need to do a lookup…
[…]
index is a Go built-in function that accepts a map and an index and returns the value of the map with the given index. So here we are asking Hugo to give us the value in .Site.Data.css.hash that has the index "main.css"… which of course is the filename of the hashed asset file.
[…]
