Hugo Themes

Prev/Next: All Themes

bento

A minimalist theme for Hugo, build with Tailwind CSS.

Author: Leonardo Faria
Minimum Hugo Version: 0.41
GitHub Stars: 57
Updated: 2020-07-29
License: MIT
Tags: Light Minimal Personal Responsive

Download

Bento Hugo Theme

A minimalist theme for Hugo, built with Tailwind CSS.

Demo: Bento demo site - My personal website

Theme screenshot

Features

Clean: inspired by Casper, Medium and other minimalist design ideas
Responsive
Super-fast - 100% in Lighthouse tests
Tailwind CSS with PostCSS: super tiny CSS file
Google Analytics and Disqus integration
Syntax Highlighting with GitHub theme
Full content RSS
Turbolinks: no page refresh
Support to custom links in the top bar
Subtle animations
Check all features live and learn more about customization

Installation

Inside the folder of your Hugo site run:

$ git submodule add https://github.com/leonardofaria/bento.git themes/bento

For more information read the official setup guide of Hugo.

Getting started

After installing the theme successfully it requires a just a few more steps to get your site running.

The config file

Copy the config.toml in the exampleSite to the root of your Hugo site. Change strings as you like.

The `package.json` file

Copy the package.json in this folder to the root of your Hugo site and run:

$ npm install # or yarn install

Local preview

In order to see your site in action, run Hugo’s built-in local server:

$ npm run dev

Now enter localhost:1313 in the address bar of your browser.

Customization

The home page

The home page will show the headline, description and a list of all posts.

If you don’t like this setup, in your Hugo website you can create a layouts/index.html if the content you like.

Writing posts

Write posts using Markdown. You can also add HTML and use TailwindCSS classes for custom styles.

The theme has support to categories and tags. Tags will be shown in the archives page.

Learn more about writing posts in the live demo website.

Update the theme