Hugo-Minimalist

A minimalist theme for Hugo built with Tailwind CSS, inspired by Hugo PaperMod theme.

Screenshots

Dark Mode

Light Mode

Installation

Prerequisites

• Git

• Hugo

• A Hugo site

  Example based on Hugo quick start

  hugo new site <site-name> -f yaml
  # hugo new site my-awesome-site -f yaml
  ## use a 'yaml' for configuration file instead of 'toml'
  
  cd <site-name>
  # cd my-awesome-site
  
  git init

Adding the Theme

• Add the theme using any one of the following options -

  • Add the theme as a git submodule to the hugo site

    git submodule add --depth=1 https://github.com/krish-r/hugo-minimalist.git themes/hugo-minimalist
    git submodule update --init --recursive

    • To Update, run

      git submodule update --remote --merge

  • Clone/Download the theme inside the hugo site

    git clone --depth=1 https://github.com/krish-r/hugo-minimalist.git themes/hugo-minimalist

    • To Update, run

      git pull

Usage

• Append this example template to the site's config file (config.yaml)

# config.yaml

theme: hugo-minimalist

menu:
    main:
        - identifier: "home"
          name: "Home"
          url: "/"
          weight: 10

        ## Additional Pages
        # Single Page
        - identifier: "contact"
          name: "Contact"
          url: "/contact"
          weight: 20

        # Grid Page
        - identifier: "grid"
          name: "Grid Example"
          url: "/grid"
          weight: 30

params:
    home:
        greeting: Hello
        name: Hugo Minimalist
        shortDesc: |
            Description Line 1

            Description Line 2

    image:
        # images should be placed under "assets/images" directory under the site directory
        logo: /images/logo.png
        profile: /images/profile.png

        # favicon should be placed under "assets" directory under the site directory
        favicon: favicon.ico

enableRobotsTXT: true

• robots (optional, to allow search engine indexing & crawling):

  • Remove the following tag from hugo-minimalist/layouts/partials/head.html

    <meta name="robots" content="noindex, nofollow" />

  • Remove the robots.txt file from hugo-minimalist/layouts/robots.txt

  • set enableRobotsTXT to true in config file

Adding pages

Create pages under content subdirectory under the site directory

hugo new <page-name>.md
# hugo new contact.md
# hugo new grid.md

Using single page layout

Example `content/contact.md` page

---
title: "Contact"
date: 2023-01-01T00:00:00+05:30
draft: false
---

[GitHub](github-profile-link)

[LinkedIn](linkedin-profile-link)

[Twitter](twitter-profile-link)

[Facebook](facebook-profile-link)

[YouTube](youtube-channel-link)

Using grid layout and data file

Append the following to the front matter to use the grid layout

type: "custom"
layout: "grid"
dataFile: "<data-file-name>"

Example `content/grid.md` page

---
title: "Grid Example"
date: 2023-01-01T00:00:00+05:30
draft: false
type: "custom"
layout: "grid"
dataFile: "grid_data"
---

Grid Example

data file

Create data file (grid_data.yaml) under content subdirectory under the site directory

Example `data/grid_data.yaml` data file

# example `data/grid_data.yaml`

data:
    - heading 01:
          - sub heading 01:
                - value 01
                - value 02
                - value 03
                - value 04
          - sub heading 02:
                - value 01
                - value 02
    - heading 02:
          - value 01
          - value 02
          - value 03
          - value 04
    - heading 03:
          - sub heading 01:
                - value 01
                - value 02
                - value 03
                - value 04
          - sub heading 02:
                - value 01
                - value 02
          - sub heading 03:
                - value 01
                - value 02
    - heading 04:
          - value 01
          - value 02

Starting Hugo development server

• Run hugo development server to preview sites

  hugo server --buildDrafts

Useful links

• Hugo Quick start - for more details on using Hugo
• Hugo Hosting and Deployment guide

Modifying the theme

# install dependencies
cd themes/hugo-minimalist
npm install

# edit the theme and live preview (by running `hugo server`)
npm run tw-watch

# build the theme
npm run tw-build
npm run tw-build-minify

Credits

• Hugo PaperMod theme for the design inspiration, toggle icons and git installation instructions