Hugo Themes

Prev/Next: All Themes

Simplicity

Simple theme with clean typography.

Download
Simplicity

Simplicity

Very simple, clean and readable (I think so) Hugo theme.

Responsive design

It works on mobile, tablet and desktop.

Responsive images

It generates several image sizes during the build process and displays the best one for given device/resolution.

Lazy loading images

This theme uses LazyLoad to speed up your web application by loading images as they enter the viewport.

Clean typography

It should be a pleasure to read your blog, right?

Additional shortcodes

Shortcodes for Google Adsense, images, Speaker Deck, Video, Vimeo, Youtube.

Google Adsense

You can use the shortcode to insert Adsense Ad wherever you want.

Google Analytics

Just add a Google Analytics code to turn it on.

Image shortcode allows to turn on baguetteBox.js for given image.

Syntax highlighting.

Built-in Chroma Native color theme.

Auto-hide/show header

This theme uses headroom.js script.

Page scroll indicator

Displays progress bar on the top of the page when user scrolls the page.

Disqus

Just add a Disqus shortname to enable comments.

Categories

A separate page with a list of all categories and list of posts for a selected category.

Tags

A separate page with a list of all categories and list of posts for a selected tag.

RSS

Custom RSS template without an e-mail address.

Sitemap

Custom sitemap template to prevent rendering content from media directory.

Social icons

Add information about your social profile in the config file to display it on the homepage. Supported services: email, Facebook, Github, Google+, LinkedIn, Messenger, Spotify, Stackoverflow, Telegram, Twitter.

Gravatar support

Just add your Gravatar email to the config file to display your avatar on the home page.

and more

  • OpenGraph support
  • Schema Structured Data
  • Twitter card
  • Display license in footer
  • No JS frameworks, no CSS frameworks, no jQuery

Demo

You can preview this theme on my blogs - eshlox.net or eshlox.pl.

Table of Contents

Getting Started

Run the following commands in your Hugo site directory to download the theme:

mkdir themes
cd themes
git clone https://github.com/eshlox/simplicity.git

exampleSite

Look inside exampleSite directory to find out how to configure your site.

That’s how the structure looks like:

exampleSite/
├── config.toml
├── content
│   ├── _index.md
│   ├── categories
│   │   └── _index.md
│   ├── media
│   │   ├── _index.md
│   │   ├── image-1.jpg
│   │   └── video.mp4
│   ├── photos.md
│   ├── posts
│   │   ├── 2014
│   │   │   ├── creating-a-new-theme.md
│   │   │   ├── goisforlovers.md
│   │   │   ├── hugoisforlovers.md
│   │   │   └── migrate-from-jekyll.md
│   │   ├── 2016
│   │   │   └── lorem-ipsum.md
│   │   ├── 2017
│   │   │   ├── images.md
│   │   │   └── typography.md
│   │   └── _index.md
│   ├── projects.md
│   └── tags
│       └── _index.md
└── resources
    └── _gen
        └── images
            └── media
                ├── image-1_hu3d03a01dcc18bc5be0e67db3d8d209a6_1073788_320x0_resize_q75_box.jpg
                ├── image-1_hu3d03a01dcc18bc5be0e67db3d8d209a6_1073788_480x0_resize_q75_box.jpg
                └── image-1_hu3d03a01dcc18bc5be0e67db3d8d209a6_1073788_768x0_resize_q75_box.jpg

Every _index.md file contains a title, language and slug.

config.toml

Copy config.toml from exampleSite to the root directory of your Hugo site and modify it according to your needs.

favicons

This theme contains default favicon with S letter. If you want to change it, create a directory static/assets/img inside the root of your Hugo site and put your favicon files there. They should have names: favicon.ico and apple-touch-icon.png.

Shortcodes

This theme includes additional shortcodes.

Adsense

Add Adsense configuration and use {{< adsense >}} in your post to display an ad.

Image

All images should be stored in content/images directory. Each subdirectory should contain _index.md file with this content:

---
title: Media Folder
---

Insert responsive image with title:

{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}}

Full page width image:

{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" full="true">}}

Lightbox:

{{< image src="media/image-1.jpg" lightbox="true" >}}

Insert image without resizing (the same image for all devices/resolutions).

{{< image src="media/image-1.jpg" resize="false" >}}

Speaker Deck

{{< speakerdeck 50021f75cf1db900020005e7 >}}

Video

{{< video src="media/video.mp4" >}}

Responsive Vimeo

{{< vimeo 265143954 >}}

Responsive Youtube

{{< vimeo 265143954 >}}

Development

  1. Install dependencies.

cd assets && yarn install

  1. Run development server.

hugo server --source=exampleSite --themesDir=../..

Browsers support

Dekstop:

  • Firefox (latest)
  • Chrome (latest)
  • Safari (latest)

Mobile:

  • Firefox (latest)
  • Chrome (latest)
  • Safari (latest)

It probably works in other browsers but it hasn’t been tested yet.

Licence

This theme is released under the MIT license. Please read the license for more information.

See Also