Hugo Future Imperfect Slim

Hugo Future Imperfect Slim is a theme based on jpescador's port of HTML5 UP's theme by the same name. The goal of this theme is to continue the development of the original theme.

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.

View Demo Download Source

Getting Started

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.

Non-Development

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 atMYPROJECT/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.

Development

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:

git clone https://github.com/pacollins/hugo-future-imperfect-slim.git

exampleSite

Within the hugo-future-imperfect-slim folder, there will be another folder called exampleSite. The structure of the folder will look like this:

exampleSite
├── config.toml
├── staticman.yml
├── content
|   ├── about
|   │   ├── _index.fr.md
|   │   ├── _index.md
|   │   └── _index.pl.md
|   ├── blog
|   │   ├── creating-a-new-theme.fr.md
|   │   ├── creating-a-new-theme.md
|   │   ├── creating-a-new-theme.pl.md
|   │   ├── goisforlovers.fr.md
|   │   ├── goisforlovers.md
|   │   ├── goisforlovers.pl.md
|   │   ├── hugoisforlovers.fr.md
|   │   ├── hugoisforlovers.md
|   │   ├── hugoisforlovers.pl.md
|   │   ├── migrate-from-jekyll.fr.md
|   │   ├── migrate-from-jekyll.md
|   │   └── migrate-from-jekyll.pl.md
|   ├── contact
|   │   ├── _index.fr.md
|   │   ├── _index.md
|   │   └── _index.pl.md
|   └── itemized
|       ├── item1.fr.md
|       ├── item1.md
|       ├── item1.pl.md
|       ├── item2.fr.md
|       ├── item2.md
|       ├── item2.pl.md
|       ├── item3.fr.md
|       ├── item3.md
|       ├── item3.pl.md
|       ├── item4.fr.md
|       ├── item4.md
|       └── item4.pl.md
├── data
│   └── comments
│       └── .gitkeep
└── static
    ├── css
    │   └── add-on.css
    ├── img
    |   ├── 2014
    |   |   ├── 04
    |   |   |   ├── pic01.jpg
    |   |   |   └── pic02.jpg
    |   |   └── 09
    |   |       └── pic03.jpg
    |   └── main
    |       └── logo.jpg
    └── js
        └── add-on.js

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.

config.toml

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:

.Site
├── .Params // Controls Carious Settings
|   ├── .Meta
|   ├── .Header
|   ├── .Intro
|   │   └── .Pic
|   ├── .Sidebar
|   ├── .Footer
|   └── .Staticman
|       └── .Recaptcha
├── .Languages // Controls Multilingual Settings and Navigation
|   ├── .En
|   │   └── .Menu.Main
|   ├── .Fr
|   │   └── .Menu.Main
|   ├── .Pl
|   │   └── .Menu.Main
└── .Social  // Controls Links to Social Media

Hugo's Built-In Server

To see a live version of your site locally, use the following command:

hugo server

Hugo will build your site and host a server locally. You can view this live at localhost:1313.

GitHub