Hyas

Hugo boilerplate helping you build fast, robust, and adaptable websites.

Features

• Bootstrap Sass (no JavaScript) and Autoprefixer
• Check Sass and JavaScript for errors
• Environment specific configuration
• Image shortcode with lazysizes and blur up plugin
• Fingerprinting and SRI (production)
• Remove unused CSS (production)

Requirements

Make sure all dependencies have been installed:

• Hugo >= 0.68.3/extended
• Node.js >= 13.11.0
• npm >= 6.13.7
• Yarn >= 1.22.0 (recommended)

Getting started

Create a new Hyas project:

$ git clone git@github.com:h-enk/hyas.git my-hyas-site

Install dependencies:

# @ my-hyas-site/
$ yarn install

Build development theme with live reloading and injection:

# @ my-hyas-site/
$ yarn start

Other commands

• yarn lint:styles - Check Sass for errors
• yarn lint:scripts - Check JavaScript for errors
• yarn clean - Delete temporary directories
• yarn build - Build production theme

Theme structure

my-hyas-site/               # → Root of your Hyas based theme
├── archetypes/             # → Content template files
├── assets/                 # → Asset files (fonts, images, js, lambda, and sass)
├── config/                 # → Configuration directives
│   ├── _default/           # → Development and defaults
│   ├── production/         # → Production specific
│   ├── staging/            # → Staging specific
│   ├── postcss.config.js   # → PostCSS configuration file
├── content/                # → Content using page bundles
├── data/                   # → Custom data files
├── functions/              # → Netlify lambda functions directory (production)
├── layouts/                # → Template files
│   ├── _default/           # → Base templates for list & singular pages
│   ├── partials/           # → Partials (footer, head, header, and sidebar)
│   ├── shortcodes/         # → Shortcodes (img)
│   │── 404.html            # → 404 Template
│   │── index.headers       # → Custom Netlify HTTP headers
│   │── index.html          # → Homepage template
│   │── index.redirects     # → Custom Netlify redirect rules
│   │── robots.txt          # → Template for robots.txt
│   │── sitemap.xml         # → Custom sitemap template
├── node_modules/           # → Node.js packages (never edit)
├── public/                 # → Publish directory (temporary)
├── resources/              # → Resource cache directory (temporary)
├── static/                 # → Static content (favicons et cetera)
├── .eslintrc.json          # → ESLint configuration
├── .stylelintrc.json       # → stylelint configuration
├── netlify.toml            # → Netlify configuration
├── package.json            # → Node.js dependencies and scripts
└── yarn.lock               # → Yarn lock file (never edit)

Theme setup

Edit files in config/ directory.

Theme development

Sass

Don't like Bootstrap? Remove it:

# @ my-hyas-site/
$ yarn remove bootstrap

Also make sure to update your sass files, like app.scss.

Images

Use the image shortcode:

{{< img src="image-in-page-bundle.jpg" alt="Text description image" caption="Caption, optional" class="wide" >}}

Configuration in config/_default/params.toml:

quality = 85
bgColor = "#fff"
landscapePhotoWidths = [900, 700, 500]
portraitPhotoWidths = [1500, 1000, 750]
lqipWidth = "20x"

Sitemap

Exclude a page by adding the following front matter variable:

sitemap_exclude: true

Robots

Add a custom robots meta tag by adding the following front matter variable:

robots: "noindex, noarchive"

This will output:

<meta name=robots content="noindex, noarchive">

Documentation

• Hugo
• Goldmark