Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Multilingual Blogging Theme for Hugo | Check the Wiki for Documentation
https://github.com/pacollins/hugo-future-imperfect-slim

hugo hugo-theme multilingual staticman

Last synced: about 1 month ago
JSON representation

Multilingual Blogging Theme for Hugo | Check the Wiki for Documentation

Awesome Lists containing this project

README 

        
# Hugo Future Imperfect Slim



**Hugo Future Imperfect** *Slim* is a theme based on [jpescador's](https://github.com/jpescador/)

port of [HTML5 UP's theme](http://html5up.net/future-imperfect) by the same name.

The goal of this theme is to continue the development of the [original theme](https://github.com/jpescador/hugo-future-imperfect).

This version takes that port and modernizes it with **CSS Grid** and **Modern

Hugo functions**.



Check out the [live demo](https://themes.gohugo.io/theme/hugo-future-imperfect-slim/)

on the Hugo Theme Showcase.



![Hugo Future Imperfect Screenshot](https://raw.githubusercontent.com/pacollins/hugo-future-imperfect-slim/master/images/screenshot.png)



## Table of Contents



- [Table of Contents](#table-of-contents)

- [Getting Started](#getting-started)

	- [Non-Development](#non-development)

	- [Development](#development)

	- [exampleSite](#examplesite)

	- [config.toml](#configtoml)

	- [Staticman](#staticman)

	- [Hugo's Built-In Server](#hugos-built-in-server)

- [Shortcodes](#shortcodes)

- [About the Author](#about-the-author)

- [License](#license)



## Getting Started



Depending on how you plan to utilize the theme, there are two different ways we

recommend getting started.



### Non-Development



If your goal is to simply use the theme on your site *even if you plan to

customize the theme*, and not make pull requests to this repository, you should

add the theme as a submodule to your project.



After you have extracted the files from the `exampleSite` directory, do the

following from within the root directory of your site:



```shell

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

```



All of the theme files will be accessible from `themes/hugo-future-imperfect-slim`

from within your project folder.



If you wish to customize **any** of the files in the theme for your personal use,

simply create a duplicate file at the project-level instead of the theme level.

This is function that is innate to Hugo based on [Hugo's lookup order](https://gohugo.io/templates/lookup-order/)



For example, if you wanted to change the About Me Page Template (`/themes/layouts/_default/about.html`). You would create a new file at `/layouts/_default/about.html` based on the theme file, but including your modifications



This is the proper way to adjust files for personal use in a way that does not

make your site incompatible with the theme.



When you are ready to update your site to the current version of the theme, do

the following:



```shell

git submodule update --remote --merge

```



### 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:



```shell

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`. This folder defines the theme's typical site structure,

which looks like this:



```

exampleSite

├── content

│   ├── about

│   │   ├── index.fr.md

│   │   ├── index.md

│   │   ├── index.pl.md

│   │   └── index.pt.md

│   ├── blog

|   |   ├── _index.md

│   │   ├── emoji-support.fr.md

│   │   ├── emoji-support.md

│   │   ├── markdown-syntax.fr.md

│   │   ├── markdown-syntax.md

│   │   ├── placeholder-text.md

│   │   ├── rich-content.fr.md

│   │   └── rich-content.md

│   └── contact

│       ├── index.fr.md

│       └── index.md

├── data

│   └── comments

│       └── 6354f801456983b22c4b91ce42adfca7

|           ├── 7f97ca70-c476-11e9-999e-498e0902dd73.json

│           └── a69c31b0-c476-11e9-999e-498e0902dd73.json

├── resources

│   └── assets

|       ├── scss

│       |   └── scss

│       │       ├── main.scss_b5a97001882d870cddf46d3bce56b70e.content

│       │       ├── main.scss_b5a97001882d870cddf46d3bce56b70e.json

│       │       ├── main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

│       │       └── main.scss_f300667da4f5b5f84e1a9e0702b2fdde.json

│       └── images

├── static

│   ├── css

│   │   └── add-on.css

│   ├── img

│   │   ├── 2014

│   │   │   ├── 04

│   │   │   │   ├── pic01.jpg

│   │   │   │   └── pic02.jpg

│   │   │   └── 09

│   │   │       └── pic03.jpg

│   │   ├── 2017

│   │   │   └── 08

│   │   │       └── pic04.jpg

│   │   └── main

│   │       └── logo.jpg

│   └── js

│       └── add-on.js

└── config.toml

└── staticman.yml

```



### config.toml



To get started, you will want to copy `exampleSite/config.toml` to the root

directory of your project.



For details on the `config.toml`, please refer to the

[wiki page](https://github.com/pacollins/hugo-future-imperfect-slim/wiki/config.toml)



### Staticman



If you would like static comments powered by [Staticman](https://staticman.net/),

you will also need to copy `exampleSite/staticman.yml` to the root directory of

your project.



For details on the Staticman, please refer to the

[wiki page](https://github.com/pacollins/hugo-future-imperfect-slim/wiki/staticman.yml)



### Custom JavaScript and CSS



You can adapt this theme according to your preferences using your own JS or CSS

code. To do this, you can either edit the `exampleSite/static/css/add-on.css` or

`exampleSite/static/js/add-on.js` files, or you can load your own files by adding

them 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:



```shell

hugo server

```



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

[localhost:1313](http://localhost:1313).



## Shortcodes



For details on the shortcodes beyond the native [Hugo shortcodes](https://gohugo.io/extras/shortcodes/),

please refer to the [wiki page](https://github.com/pacollins/hugo-future-imperfect-slim/wiki/shortcodes).



## About the Author



[Hugo Future Imperfect](http://html5up.net/future-imperfect) is a theme by [HTML5 UP](http://html5up.net).

[Julio Pescador](https://jpescador.com) took the code provided from them and

ported it over so that it could be used with Hugo. [Patrick Collins](https://pacollins.com)

then took this port, broke it down and restructured it under newer Hugo functions

in addition to building it mobile-first utilizing 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](https://github.com/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](https://github.com/jpescador/hugo-future-imperfect),

it is now in its own repo to help aid in development and prevent confusion.



Please also refer to the [project contributors list](https://github.com/pacollins/hugo-future-imperfect-slim/graphs/contributors)

for everyone that has directly contributed to this version of the theme.



## License



This theme is released under the [Creative Commons Attribution 3.0 License](https://creativecommons.org/licenses/by/3.0/). "[Future Imperfect](https://html5up.net/future-imperfect)"

is a theme by [HTML5 UP](http://html5up.net) licensed under the same terms.

Please read the [license](https://github.com/pacollins/hugo-future-imperfect-slim/blob/master/LICENSE.md)

for more information.