Personal dark blog theme for Hugo. Personal dark blog theme for Hugo. Modified from Minimal, inspiration by Casper theme.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes
exampleSite
images
layouts
static
.gitignore
CHANGELOG.md
LICENSE.md
README.md
package-lock.json
package.json
theme.toml

README.md

Minimal-esque

A dark minimal-esque blog theme for Hugo.

View the theme on my blog.

This theme was created using the Minimal blog theme as a boilerplate and was inspired by the Ghost Casper theme.

Changes

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.

Installation

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

Configuration

After installation, take a look at the exampleSite folder inside themes/minimal-esque.

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 archetypes/default.md.

Post Markdown

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

Replace the logo-obj.svg file within the static directory with one of your own.

Customization

Some options are disabled by default. To re-enable, remove the comments in config.toml as well as css.html.

Features

You can tweak the look of the theme to suit your needs in a number of ways:

  • The accent colours can be changed by using the accent field in config.toml.

  • You can also change the background colour by using backgroundColor.

For best results, I recommend you use a dark accent colour with a light background, for example:

[params]
    accent = "red"
    showBorder = true
    backgroundColor = "white"

Fonts

The theme uses Google Fonts to load its font. To change the font:

[params]
    font = "Raleway" # should match the name on Google Fonts!

This feature was recently disabled. To re-enable, remove the comments in config.toml as well as css.html.

Syntax highlighting

The theme supports syntax highlighting thanks to highlight.js.

It's disabled by default, so you have to enable it by setting highlight to true in your config.

You can change the style used for the highlighting by using the highlightStyle field.

Only the "common" languages will be loaded by default. To load more, use highlightLanguages.

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"]