# Introducing Henry for Hugo

DevFeed: [Introducing Henry for Hugo](<https://devfeed.tech/articles/introducing-henry-for-hugo-25258.md>)

Original publisher: [Read original article](<https://kau.sh/blog/henry-hugo-theme/>)

Author: Kaushik Gopal

Published: 2021-10-17T21:14:04Z

Content type: article

Language: en

Sources: [Kaushik Gopal's Site](<https://devfeed.tech/sources/kaushik-gopal-s-site.md>)

Topics: [Hugo](<https://devfeed.tech/topics/hugo.md>), [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [Go Language](<https://devfeed.tech/topics/go-language.md>), [CSS](<https://devfeed.tech/topics/css.md>)

Tags: [blog-post](<https://devfeed.tech/tags/blog-post.md>), [go](<https://devfeed.tech/tags/go.md>), [hugo](<https://devfeed.tech/tags/hugo.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [scss](<https://devfeed.tech/tags/scss.md>), [vscode](<https://devfeed.tech/tags/vscode.md>)

## AI overview

The author introduces Henry, a customizable Hugo theme recreated from an earlier Jekyll version. The article describes its Hugo-based features, including SCSS customization, responsive footnotes, image shortcodes, and a VSCode snippet.

## Source excerpt

Henry is a theme I first open-sourced for Jekyll. You can read all about it here. I've now recreated Henry for Hugo. Why Hugo? ## Over the last year, I've been learning Go and my interest in Hugo piqued. Hugo -- much like Jekyll -- is a static blog engine written in Go. But it's got more features, a more active community and is blazingly fast. Features # Many of the features I wrote as custom features for Jekyll, come built-in with Hugo. But I took the opportunity to tweak these a little further. Here's how they're implemented in Hugo: Customizability ## A blog theme is only useful if it is versatile enough to reflect your unique character and touch. Henry is extremely customizable. With simple scss override files you can customize the entire look of your blog. If you look at the main style.scss file in Henry, here's how we import the different styles: // themes/henry/assets/scss/style.scss @import "theme"; @import "mixins", "code", "base"; @import "main"; You can override any of the above files and customize your blog's look. For example, to change the background color you can override the theme.scss file like so: // my-blog/assets/scss/theme.scss @import '../../themes/henry/assets/scss/theme'; // Hook to override predefined variables. $color-background: #3E4244; $color-header-index: lighten($color-background, 10%); $color-header: lighten($color-background, 60%); To see a demo of the difference compare this blog with my brother's. Both use Henry but look pretty different. FootSidenotes ## I picked this feature up from Tufte CSS1 - inspired by the legendary Edward Tufte. If you're reading this post on a wide screen you should notice the tips to the side of this post. Go ahead and hover your cursor over to see the sidenote highlighted. On narrower screens (like phones) the sidenotes show up as traditional footnotes. You can use the quick jump links to navigate back and forth. You can read more about this feature and its implementation in this separate blog post. Image