5.7 KiB
Minimal Bootstrap Hugo Theme
A minimal hugo theme made with bootstrap that focuses on content readability.
Table of contents
- Demo
- Minimum Hugo version
- Installation
- Updating
- Run example site
- Configuration
- Favicons
- Override
- Syntax highlighting
- Shortcodes
- Getting help
- Stackbit Deploy
Demo
https://minimal-bootstrap-hugo-theme.netlify.com/
Minimum Hugo version
Hugo version 0.60.1 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.
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:
- Copy file
YOUR_SITE/themes/minimal-bootstrap-hugo-theme/layouts/index.html - Paste that file to
YOUR_SITE/layouts/index.html - Edit
index.htmlas 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:
- Copy file
YOUR_SITE/themes/minimal-bootstrap-hugo-theme/layouts/partials/cookie-consent.html - Paste that file to
YOUR_SITE/layouts/partials/cookie-consent.html - Complete the cookie consent wizard
- Paste the generated code from the wizard into
cookie-consent.html
Syntax highlighting
Hugo has built-in syntax highlighting, provided by Chroma. It is currently enabled in the config.toml file from the exampleSite.
Checkout the Chroma style gallery and choose the style you like.
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" >}}
mastodon
This will embed a toot in an iframe.
These arguments are optional: width, height.
{{% mastodon
status="https://mastodon.social/@kevingimbel/100700713283716694"
width="1000" height="500" %}}
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.
Stackbit Deploy
This theme is ready to import into Stackbit. This theme can be deployed to Netlify and you can connect any headless CMS including Forestry, NetlifyCMS, DatoCMS, or Contentful.
