Chringel Hugo Theme

Time 3 minute read
chringel - A custom Hugo theme
chringel - A custom Hugo theme
chringel - A custom Hugo theme

This post is part of the Blogging with Hugo series.

It’s finally out there! My first custom Hugo theme made (nearly) from scratch. I say nearly, because it is based on the awesome Hugo Starter Theme with Tailwind CSS made by Dirk Olbrich.

You can find it on GitHub, obviously!

As the title suggests, it uses the tailwindcss framework. I’ve been using Bootstrap almost exclusively for almost always and wanted to try something new. There are a lot of frameworks to choose from, ranging from minimal, to general purpose to down right weird.

Tailwind doesn’t have any components like buttons, but you can very easily create custom components by reusing styles. Also, the documentation is top notch!

Hugo is a static site generator written in Go. This means once you create content, your whole web site will be newly built. It’s just a matter of serving static files (HTML, CSS, JS).

Hugo sites run without the need for a database or dependencies on expensive runtimes like Ruby, Python, or PHP.

Hugo’s templating structure can be reduced to three “components”:

  • layouts (basic skeleton templates i.e. a single blog post or your index page)
  • partials (small context aware components i.e. the footer or the header of a page, or how the comments section should look like)
  • shortcode (basically templates that you can use directly inside you content files i.e. for displaying a specific tweet, or a Youtube video)

There is a really good blog series that basically covers everything from creating layouts and partials to deploying your Hugo web site. Check it out here.

I wanted to keep it relatively simple (for now at least), so I just created custom layouts for single blog posts and lists of blog posts, a custom index page.

The landing page includes a “featured post” widget, which displays the latest blog post more prominently with a big image card.

Featured post

Featured post
Featured post

After having read a couple of interesting articles on font based icons libraries such as Font Awesome and why you should not use them, I wanted make the switch to SVG icons. My theme only uses a couple of icons anyway, so there’s no need to load a whole icon font through a CDN or host it myself.

Ionicons are a great set of utility and logo icons that are open source and free to use under MIT license. I created a little script to download the necessary icons from unpkg.com and a custom partial to display the icon in the templates.

Currently, only logos for Github and Twitter are available, but with the help of the script, more of Ionicon’s logo icons can be downloaded.

Your data is private, and that’s the way it should stay. That’s why I wanted to make it possible for users of my theme to use privacy focused alternatives for common services.

Isso is a self-hosted commenting system similar to Disqus, which built into Hugo by default.

You need to have an instance of Isso running on a server preferably under your control.

Umami is a simple, easy to use and beautiful web analytics solution, and a great alternative to Google Analytics.

Umami is also self-hosted, so you need to set up your own installation.

I’m still not done. From time to time I find some quirks here and there, make some CSS optimizations and tinker with templates.

Here’s what’s still on my to-do list:

  • A GDPR conform banner to inform the user about the use of cookies
  • A custom CV layout that’s also ready to print so I don’t have to keep my old TeX-based CV updated
  • Publish the theme to Hugo’s theme list
  • Shortcodes for Leaflet/MapLibre GL maps (?)

This series

  1. Chringel Hugo Theme
  2. Inline SVG Icons For Hugo
  3. Isso - An Alternative Commenting System For Hugo
  4. umami - A Google Analytics Alternative For Hugo
  5. Automatically Deploy a Hugo Website to a Remote Host Using Github Actions
  6. Hugo Simple Post Archive
  7. Random Cover Image

Calendar Posted:
Person Posted By:
Folder Open Categories: Coding Design
Pricetags Tags: Hugo Theme Blog

Responses

When I designed this theme I wasn’t actually planning on creating an archive page. Now, a couple of months and several written posts later I figured, it might not be the worst thing to have. In my opinion, two points speak for a blog archive: No c...