1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
# Hyas
[](https://github.com/h-enk/hyas/releases)
[](https://travis-ci.org/h-enk/hyas)
[](https://hyas.netlify.com/)
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](https://github.com/aFarkas/lazysizes) and [blur up](https://github.com/aFarkas/lazysizes/tree/master/plugins/blur-up) plugin
- Fingerprinting and [SRI](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) (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:
```bash
$ git clone git@github.com:h-enk/hyas.git my-hyas-site
```
Install dependencies:
```bash
# @ my-hyas-site/
$ yarn install
```
Build development theme with live reloading and injection:
```bash
# @ 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
```shell
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:
```bash
# @ 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`:
```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:
```yaml
sitemap_exclude: true
```
### Robots
Add a custom [robots meta tag](https://developers.google.com/search/reference/robots_meta_tag) by adding the following front matter variable:
```yaml
robots: "noindex, noarchive"
```
This will output:
```html
<meta name=robots content="noindex, noarchive">
```
## Documentation
- [Hugo](https://gohugo.io/documentation/)
- [Goldmark](https://github.com/yuin/goldmark/)
|
