Hugo Themes

Prev/Next: All Themes

Air

Hugo Air Theme

Download Demo
Air

Air, a theme for Hugo, a framework for building websites.

The intent of this theme is to provide a solid starting place for Hugo sites with basic features and include best practices for performance, accessibility, and rapid development.

Screenshot

Mobile

screenshot

Desktop

screenshot

Demo

Live Demo

DEMO SITE

Local Demo

Clone this repo and run hugo serve command

Features

  • Responsive
  • Single-page landing homepage
  • Accessible
  • Boostrap
  • Customizable main color
  • Responsive Embeded Google Maps
  • Responsive Header Image from page bundle
  • Image Gallery from page bundle available as shortcode or template page. (instagram or masonry style)
  • Smooobu shortcode

Installation

As Git Submodule

Inside the folder of your Hugo site run:

git submodule add https://github.com/francoiducat/hugo-air.git themes/air

Usage

Edit your config file 

baseURL: https://example.com/
languageCode: en-us
title: Example Site
theme: air
params:
  author:
    name: François
    siteUrl: https://notes.ducatillon.net/
  gmaps_url: https://www.google.com/maps/d/u/0/embed?mid=1UySq5HRbcRKL90dKuFpX6PRRtx0&ehbc=2E312F
  mainColor: "#386641"
  footer: "Hugo Air theme is great and customizable"
menu:
  main:
  main:
  - name: Home 
    url: /
    weight: 20
    params:
      target: 
  - name: Features 
    url: /features
    weight: 30
    params:
      target: 
  - name: Landing Page
    url: /landing-page
    weight: 40
    params:
      target: 
  footer:
  - name: Home 
    url: /
    weight: 20
    params:
      target:

Customize main color

In your config file, add:

params:
  mainColor: "#386641"

This will override the main.scss

/*
=======================================================
=                   CSS Variables                     =
=======================================================
*/

/* 
Main color for the website
It can be overridden in the config file by setting "Params.mainColor" to any color value
*/
:root {
  --main-color: #035c8c; /* default color */
}

Set Google Maps url

In your config file, add:

params:
  gmaps_url: https://tinyurl.com/mr3uesbx

Use as partial

In your .md file, specify the type of the page with type: gallery-masonry or type: gallery-insta like this:

---
title: Air is a great hugo theme
type: gallery-masonry
---
Air is a great hugo theme with outstanding features like image gallery from page bundle

Use as shortcode

Assuming your folder structure would look something like this

content/
└── pages/
    └── my-page/                # Page Bundle
        ├── index.md            # Page content
        ├── featured-image.jpg  # Image Resource used as gallery image 1
        ├── card.jpg            # Image Resource used as gallery image 2 AND as card featured image
        ├── photo1.jpg          # Image Resource used as gallery image 3
        ├── photo2.jpg          # Image Resource used as gallery image 4
        └── photo3.jpg          # Image Resource used as gallery image 5

In your .md file, add this block to display your instagram image gallery

{{ < gallery-masonry page="my-page" > }}

where “my-page” is the page bundle object passed as a variable to the shortcode

Alternatively, use instagram gallery style with

{{ < gallery-insta page="my-page" > }}

Custom Header image

Add one image called featured-image.jpg in your page bundle.

Automatically loaded as a header image on your page

Automatically loaded from the static/img folder.

  • header-960.jpg for screens higher than 960px
  • header-480.jpg for screens lower than 960px

Custom Boostrap Card image

When listing pages/posts, it displays boostrap cards with a thumbnail image.
By default it uses the card image from static/img/card.jpg Customize the card image by adding one image called featured-image.jpg or card.jpg in your page bundle.

Single-page landing homepage

Add pages to a folder. These page will render as a single-page.

Example with this page bundle:

content/
└── landing-page/
    └── page-1/                 # Page Bundle
        ├── featured-image.jpg  # 
        ├── index.md            # Page 1
    ├── _index.md               # File that calls the landing-page type
    ├── page-2.md               # Page 2
    ├── page-3.md               # Page 3
    ├── page-4.md               # Page 4
    └── page-5.md               # Page 5

Edit your content/landing-page/_index.md to add type: landing-page

---
title: Landing Page
catchline: Awesome One Page Landing Page
type: landing-page
---

Add a weight to each page to render them by weight ✨:

---
title: Page 1
weight: 10
---
Content of Page 1

See also