Skip to content
A minimal hugo theme made with bootstrap
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.
.github/ISSUE_TEMPLATE Update issue templates Dec 3, 2018
archetypes Add support for tags Dec 6, 2018
exampleSite
images
layouts
static Initial commit Oct 8, 2018
.gitattributes
.gitignore Add netlify config Nov 27, 2018
LICENSE Initial commit Oct 8, 2018
README.md Bump min hugo ver Apr 11, 2019
dev-notes.md Update screenshots Dec 6, 2018
gh-md-toc Make gh-md-toc executable Oct 14, 2018
netlify.toml Bump netlify hugo ver Apr 11, 2019
theme.toml Bump min hugo ver Apr 11, 2019

README.md

Minimal Bootstrap Hugo Theme

Netlify Status

A minimal hugo theme made with bootstrap that focuses on content readability.

Table of contents

Demo

https://minimal-bootstrap-hugo-theme.netlify.com/

Minimum Hugo version

Hugo version 0.54.0 or higher is required. View the Hugo releases and download the binary for your OS.

Installation

From the root of your site:

git submodule add https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme.git themes/minimal-bootstrap-hugo-theme

Updating

From the root of your site:

git submodule update --remote --merge

Run example site

From the root of themes/minimal-bootstrap-hugo-theme/exampleSite:

hugo server --themesDir ../..

Configuration

Copy the config.toml from the exampleSite, then edit as desired.

Blog post folder

This theme expects your posts to be under the post folder.

If you want to use a different folder, then override the post-list.html partial and replace post with the name of your folder.

Favicons

Upload your image to RealFaviconGenerator then copy-paste the generated favicon files under static.

Override

Homepage example

As an example, let's say you didn't like the default homepage, and wanted to design one of your own. To do this, you would:

  1. Copy file YOUR_SITE/themes/minimal-bootstrap-hugo-theme/layouts/index.html
  2. Paste that file to YOUR_SITE/layouts/index.html
  3. Edit index.html as desired

Configure cookie consent

You can change the position, layout, color palette, "Learn more" link, compliance type, and custom text of the cookie consent popup. To do this, you would:

  1. Copy file YOUR_SITE/themes/minimal-bootstrap-hugo-theme/layouts/partials/cookie-consent.html
  2. Paste that file to YOUR_SITE/layouts/partials/cookie-consent.html
  3. Complete the cookie consent wizard
  4. Paste the generated code from the wizard into cookie-consent.html

Syntax highlighting

Hugo has built-in syntax highlighting, provided by Chroma. To use it, add these lines to your config.toml right after the theme line:

pygmentsCodefences = true
pygmentsStyle = "pygments"

Here, "pygments" is just the name of the Chroma style to be used. Checkout the Chroma style gallery and choose the style you like.

For a deeper dive see the hugo docs for syntax highlighting.

Shortcodes

blockquote

This will format your blockquotes nicely. To use it, put the quote within the shortcode. The author argument is optional.

{{% blockquote author="Laura Ingalls" %}}
I am beginning to learn that it is the sweet, **simple** things of life which are the real ones after all.  
{{% /blockquote %}}

imgAbs

This will insert an image into your content by absolute path. To use it, pass the pathURL of your image.

These arguments are optional: alt, class, style.

{{< imgAbs 
pathURL="img/some-img.png" 
alt="Some description" 
class="some-class" 
style="some-style" >}}

imgRel

This will insert an image into your content by relative path. To use it, pass the pathURL of your image.

These arguments are optional: alt, class, style.

{{< imgRel 
pathURL="img/some-img.png" 
alt="Some description" 
class="some-class" 
style="some-style" >}}

imgProc

This will process an image from a page bundle, then provide a link to the original image. To use it, pass the image name, command, and command options.

The command argument will be one of: Resize, Fit, Fill. For a deeper dive see the hugo docs for image processing.

These arguments are optional: alt, class, style.

The below example resizes an image to 800px width, while keeping the aspect ratio.

{{< imgProc 
img="some-img.png" 
command="Resize" 
options="800x" 
alt="Some description" 
class="some-class" 
style="some-style" >}}

Getting help

If you run into an issue that isn't answered by this documentation or the exampleSite, then visit the Hugo forum. The folks there are helpful and friendly. Before asking your question, be sure to read the requesting help guidelines. Feel free to tag me in your question, my forum username is @zwbetz.

You can’t perform that action at this time.