This version takes that port and modernizes it with CSS Grid and Modern
Hugo functions. In addition to the features that were present in the original
theme, there are some additional features for you to utlize however you see fit.
There are two different ways I recommend getting started and it depends on one
of two things: are you going to help develop the theme, or do you just want to
use it for personal use.
If you would like to stay up-to-date with the current iteration of the theme and
don’t plan to aid in the development of the theme (or don’t want to aid via your
site), I would highly recommend you add it as a submodule to your project. From
your site directory, do the following:
mkdir themes // Creates a Themes Folder
cd themes // Points to the Themes Folder
git submodule add https://github.com/pacollins/hugo-future-imperfect-slim.git
You will then have access to the theme at themes/hugo-future-imperfect-slim
from within your project folder.
From here, you can customize any of the files for your personal use by creating
a dupicating the file at the project level instead of the theme level. For
example, if you wanted to change the About Me Page Template (which is located at
MYPROJECT/themes/layouts/about/list.html), I would create a new file at
MYPROJECT/layouts/about/list.html and change it to what I wanted it to be.
This is the proper way to adjust files for personal use when they do not
contribute to the development of the them, and it can help prevent your site
from being incompatible with the original theme.
If you plan on assisting with developing the theme, you will want to have your
own copy that is not a submodule. To do this, navigate to where you want to
place it and do the following:
This file is important to the initial set-up of your project and contains all of
the customizations that the developers feel as though you should have easy
access to. Each prarameter listed should include a comment to help describe it’s
function. Unless otherwise state, true will turn a feature on, while
false will turn a feature off. It is structured as follows:
You can adapt this theme according to your preferences using your own JS or CSS code.
To do this your can add your custom scripts to the cssFiles and jsFiles
parameters in config.toml.
Hugo’s Built-In Server
To see a live version of your site locally, use the following command:
Hugo will build your site and host a server locally. You can view this live at
In addition to the native Hugo shortcodes,
the theme also includes additional shortcodes that you may find useful.
Source Code Highlighting
You can enable source code hightlighting via
highlight.js. If you want to use a language which is
not in the common package of highlight.js
you can enable that language via highlightjsLang and the additional packages
with be added to your site.
About the Author
Hugo Future Imperfect is a theme by
HTML5 UP. Julio Pescador took the
code provided from them and ported it over so that it could be used with Hugo.
Patrick Collins then took this port, broke it down and
restructured it under newer Hugo functions in addition to building it
mobile-first utlizing CSS Grid. This also allowed for the slimming of the CSS
and JS files originally included to strip those features not used in the site
(hence the name, slim). During the this time,
StatnMap worked on overhauling the majority of
the theme to include Multilingual functionality - which is included here.
Since the original development had become stale and the redesign is not
directly compatible with previous versions of the original
Hugo Future Imperfect,
it is now in its own repo to help aid in development and prevent confusion.