Hugo in a nutshell
Static Website development was always categorised into two categories (at least for what I observe), namely, paying for Software as a Service (SaaS) website builders like Wix and Squarespace, or to create your own using HTML, CSS, JS, etc. Being into coding, I’ve always enjoyed playing around with HTML and CSS templates, which allowed me to create beautiful static websites.
I recently discovered a third category of static website building, frameworks, which I used to redesign this site. Hugo is a framework which I used to create this website, without having to code in HTML, CSS and JS. Hugo makes use of Markdown language (similar to GitHub’s READMEs) and shortcodes which offer one more flexibility when creating the site, while the themes allow users to create simple but aesthetic sites. Hugo also comes with many functions, such as being able to classify blog posts under different tags and categories, and multilingual support. Even with these many functions, Hugo builds sites in milliseconds.
Without having to stare at different indentations and tags, frameworks like Hugo have redefined static web development.
Using Hugo with GitHub Pages
Hugo can be deployed on GitHub Pages. However, this may be tricky because we don’t want to deploy the .md, .toml, and theme files. Because of this, we would have to create a repository to store the Hugo code, and use the GitHub Pages URL as our production repository where the .html, .css and .js code will reside. Check out this link for an awesome, straight-to-the-point guide: Creating a Blog with Hugo and Github in 10 minutes. For Windows Users, Windows Powershell can be used (although I used Command Prompt).
Some Useful Pointers
Using Custom CSS in Hugo
Having a background in using HTML and CSS templates, I understand the importance of having a custom.css file to overwrite template styles. In order to do this, create a custom.css file in the static directory, and add the following line of code in the config.toml configuration file under [params]:
[params]
customCSS = ["custom.css"]
#Note: param may not always be customCSS (check template documentation).
Using HTML within Markdown
Some things (like the tables here) may be easier to implement using HTML tags rather than Markdown. Fortunately, Markdown fully supports HTML, and it can be used in the same document. Simply add these lines of code in the config.toml configuration file under [params]:
[params]
[markup.goldmark.renderer]
unsafe = true # Allow HTML in md files
Using and modifying code blocks
To include code blocks in Markdown files, add the below lines of code in the .md file, which will be rendered as a nice code block with syntax highlighting.
```<language>
Add your code and the syntax will be highlighted.
Note: Not every language is supported, but most are. Check URL below.
```
Check out: Languages supported by Hugo Chroma Highlighting
To have customisable colour schemes (like vim’s colorscheme), the syntax highlighter can be configured. Hugo uses Chroma, which is compatible with Pygments. To configure this, add these three lines to the config.toml file:
# Note: This code goes into config.toml but NOT under [params].
pygmentsStyle = "" # Put the style name here. I am using the default.
pygmentsCodeFences = true # Allows code fencing, aka no need to indent 4 spaces.
Check out: List of Pygments Styles
Useful Links
To end off this article, I will include some other useful links which have helped me along the way.