7 October 2018hugo web-development sass css
A dark minimal-esque blog theme for Hugo.
- Dependency free
- Fully responsive
- Includes Simply Navigation, a dead simple lightweight navigation for all devices built with Flexbox and vanilla JS. Demo simply navigation
This very blog is using this theme.
Here are the most notable changes from Minimal
- Removal of Bootstrap, jQuery and all their dependencies. Yet still fully responsive.
- Article card layout built using Flexbox only.
- Bundled navigation, see Simply Navigation.
You can install the theme either as a clone or submodule.
I recommend the latter. From the root of your Hugo site, type the following:
$ git submodule add https://github.com/obscuredetour/minimal-esque.git themes/minimal-esque $ git submodule init $ git submodule update
Now you can get updates to Minimal-esque in the future by updating the submodule:
$ git submodule update --remote themes/minimal-esque
After installation, take a look at the
exampleSite folder inside
To get started, copy the
config.toml file inside
exampleSite to the root of your Hugo site:
$ cp themes/minimal-esque/exampleSite/config.toml .
Now edit this file and add your own information. Note that some fields can be omitted.
I recommend you use the theme’s archetypes so now delete your site’s
The beginning of each post will include the following at the top of the file
--- title: "Post title" date: 2018-09-23 time: "8" image: "/images/post-image.jpg" description: 'A description or snippet that you want displayed on the article card' tags: ["web-development", "design", "css"] ---
If no image is available for the post then omit the
image: property and replace it with the following line:
noImage: "no-image". See the example below. This simply adds a
no-image class to the HTML element.
--- title: "Post title" noImage: "no-image" ...
logo-obj.svg file within the
static directory with one of your own.
Options might be revisted in the future.
The theme supports syntax highlighting thanks to highlight.js.
It’s disabled by default, so you have to enable it by setting
true in your config.
You can change the style used for the highlighting by using the
Only the “common” languages will be loaded by default. To load more, use
A list of all the available styles and languages can be found here.
Please note the style and languages should be written in hyphen-separated lowercase, for example:
[params] highlight = true highlightStyle = "solarized-dark" highlightLanguages = ["go", "haskell", "kotlin", "scala", "swift"]