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:
To get started, you will want to copy config.toml from exampleSite to the
root directory of your project.
If you would like static comments hosted by Staticman,
you will also need to copy staticman.yml.
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:
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
HTML5UP. 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-Gridd. 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.