Future Imperfect is a responsive theme tailored for blogging. The name is of no coincidence, because it is a port of HTML5 UP's theme by the same name. In addition to the original features, there are more features that have been added for you to utilize.
Check out this site if you are interested in seeing a live example.
Run the following commands in your Hugo site directory:
mkdir themes
cd themes
git clone https://github.com/jpescador/hugo-future-imperfect.git
You will then have access to the theme at themes/hugo-future-imperfect from within your project folder.
Within the hugo-future-imperfect folder, there will be a folder in this theme called exampleSite. The structure of the folder will look like this:
exampleSite
├── config.toml
├── staticman.yml
├── content
| ├── about
| | └── _index.md
| ├── blog
| │ ├── creating-a-new-theme.md
| │ ├── goisforlovers.md
| │ ├── hugoisforlovers.md
| │ └── migrate-from-jekyll.md
| ├── contact
| │ └── _index.md
| └── itemized
| ├── item1.md
| ├── item2.md
| ├── item3.md
| └── item4.md
├── data
│ └── comments
│ └── .gitkeep
└── static
├── css
│ └── add-on.css
├── img
| ├── 2014
| | ├── 04
| | | ├── pic02.jpg
| | | └── pic03.jpg
| | └── 09
| | └── pic01.jpg
| └── main
| └── logo.jpg
└── js
└── add-on.js
Copy config.toml from exampleSite to the root directory of your Hugo site. If you want static comments hosted by Staticman, also copy the staticman.yml.
This file is the main sorce of customization within the theme. Each parameter has a comment included to explain its functionality. Typical usage of true means to turn a function on, while false means to turn a function off.
This file consists of six main sections. The first section contains the site wide parameters innate to Hugo. The second section, [params], contains site wide parameter that are custom to the hugo-future-imperfect theme. The third section, [params.staticman] controls how staticman comments interact with your repository. The fourth section, [params.intro] and [params.postAmount], control aspects of the sidebar. The fifth section, [[menu.main]], sets the navigation menu items. Lastly, the sixth section, [social], allows you to easily link to, and include, various social platforms.
Run the following command to start a local server and to view a live version of the website:
hugo server
You will then be able to view your live website at localhost:1313.
This theme support SEO elements for your website.
It was adapted and integrated thanks to the following guide:
https://keithpblog.org/post/hugo-website-seo/
If you wish to enable SEO on this theme, follow these instructions:
- To include the following parameters in your config.toml
# .config.toml
...
enableRobotsTXT = true
canonifyURLs = true
# and if you think your md file names or locations might change:
[permalinks]
post = "/blog/:title/"
...
-
Add your website to Google Search Console:
- Login to the Google Search Console
- Add your website as property
- Add the html page as required by google to verify ownership
- Submit the sitemap (/sitemap.xml) for indexing
- Wait
-
Add your website to Bing
- Login to the Bing Webmaster Console
- Add your site, details and verify
- From the 3 option, we recommend adding the xml file to you website
In addition to the native Hugo shortcodes, the theme also includes the following codes that I hope you find useful: fancybox, img-post, img-fit, and url-link.
Fancybox is a jQuery lightbox script for displaying images, videos and more. It is touch enabled, responsive and fully customizable. The commands are shown below:
Named
{{< fancybox path="path" file="file" caption="caption" gallery="gallery" >}}
Positional
{{< fancybox "path" "file" "caption" "gallery" >}}
Please refer to layouts/shortcodes/fancybox.html for more details on the function.
Credit: pacollins
Add an image which can be aligned center, left, or right. The commands are shown below:
Named
{{< img-post path="date" file="filename.jpg" alt="Alt Text" type="left" >}}
Positional
{{< img-post "title" "filename.jpg" "Alt Text" "left" >}}
Please refer to layouts/shortcodes/img-post.html for more details on the function.
Credit: jpescador
Insert multiple images with the ability to create a gallery if needed. The command is shown below:
Positional Only
{{< img-fit
"4u" "filename1.jpg" "Alt text 1"
"4u" "filename2.jpg" "Alt text 2"
"4u$" "filename3.jpg" "Alt text 3"
"date" >}}
Please refer to layouts/shortcodes/img-fit.html for more details on the function.
Credit: jpescador
Create a hyperlink and set a target value for the link. The default value is
_blank. The command is shown below:
Positional Only
{{< url-link "title" "www.link.com" "target">}}
Please refer to layouts/shortcodes/url-link.html for more details on the function.
Credit: jpescador
Generate diagrams and flowcharts from a simple markdown-like script language. Set
alignment and theme using named parameters below. The default value for align is
center. The default value for theme is dark. The command is shown below:
Named Only
{{<mermaid align="left" theme="forest">}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}
Please refer to layouts/shortcodes/mermaid.html for more details on the function.
Credit: liveaverage
Hugo Future Imperfect was ported by Julio Pescador. Extra features implemented by the project contributors.
Send Julio Pescador a tweet @julio_pescador, if you like the theme and are using it for your own personal use.
This theme is released under the MIT license. Please read the license for more information.