Skip to main content

Hugo Now: Porting A Theme To Hugo

·2 mins

Create a Theme #

Simple as hugo new theme [name]. Documentation can be found here: Hugo Themes

Hugo, due to it being only a few years old, has fewer themes compared to Jekyll

Luckily, it’s expected that you will want to port a theme to Hugo. I decided to port this blog’s theme: Jekyll Now, to Hugo.

Jekyll Now #

A very popular theme jekyll-now (3,701 , 15,076 ), I wanted to retain the spirit of Jekyll Now while updating it’s dependencies as the last commit was over a year ago.

Features #

  • bootatrap 4
    Bootstrap V4
    Update from Bootstrap 3 to 4
  • font awesome
    Font Awesome
    Latest Font Awesome icons
  • disable javascript
    Progressive Enhancement
    Disabling Javascript should retain the same experience.
  • sass
    Powerful Styling
    Using the power of SASS to power our build pipeline. All major dependencies have .scss support.
  • gulp
    Modern Build Pipeline
    Without Jekyll's Asset pipeline, a Hugo theme needs a build system. I opted for gulp.js
  • pygments syntax highlighting
    Syntax Highlighting

    Rather then using a JS library like hightlight.js I opt for server-side rendering with Pygments to keep in line with progressive enhamcements. Here is Hugo's opinion on the matter:

    The advantage of server side is that it doesn’t depend on a JavaScript library and consequently works very well when read from an RSS feed.

    I would argue site usability / robustness far out weighs build times.

  • google analytics
    Google Analytics
    Configure Google Analytics with .Params.GoogleAnalytics

And so without further ado I give you: Hugo Now

Hugo Now #

Archetypes #

  • Post
  • Project
  • Dashboard

or add your own!

Demo #

This blog itself uses all the features of Hugo Now. If you want to add a feature, fork it, and open a Pull Request here: Hugo Now PRs