Minify and Load CSS Through Hugo
This post is about loading your CSS files with Hugo in an easy and efficient way, now that Hugo has asset and minification built-in. The advantages of using the functions that come with Hugo are that you don’t have to do any of the building yourself (or use a third party), it just does it! There are a few steps involved in the code that we will walk through: Specify your main scss filename (the one where everything imports into).
Adding Social Meta Tags into <head> for Hugo
Adding social media tags to the <head> section of your website helps Facebook and Twitter know how to show your page when someone shares it. For example, what image to use and what the title should be. Hugo themes will often come with these tags added already - but if they don’t we wanted to look at how you can add them. Facebook uses Open Graph tags and Twitter uses Cards.
Syntax Highlighting with Hugo (without JS)
If you are into writing code and use Hugo for building a personal or tech blog - then you’ll want syntax highlighting setup for when you show off your code snippets (like we do on this site!) It is also quite simple when you know how. Some advantages of using this method include not having to download a JS library to do the job (so performance), not having the code flash on load after the JS finishes and not having to manage another library to do a job that’s already included in Hugo.
Check If a Page Is the Home Page
When writing and changing Hugo templates you will often want to act differently based on whether the page you are looking at is the home page, or any other page. So the post pages, contact, about etc won’t have this content show.
Only Show HTML When on Local/Production
For Hugo Themes, you will sometimes want to act differently between you working on the site, developing it, and the site if it’s running publicly on the internet. One example of this is if you show advertisements - you don’t want them showing on local (and contributing to impressions) but you would want to show them to the world. The reverse is also true, you could load scripts like livereload only on local development, through hugo server.
Hello world! Welcome to MakeWithHugo.com
This is our very first post on MakeWithHugo.com - where we are going to make tutorials on how to create, work with and adapt websites built with Hugo. A Bit of Background Hugo is a static site generator built in Go. It is fast and extendable and a good choice for building a static (html-based sites). It does, however, have some nuances that requiring some research as they’re not immediately obvious.