|
| 1 | +# Hyas |
| 2 | +[](https://github.com/h-enk/hyas/releases) |
| 3 | +[](https://travis-ci.org/h-enk/hyas) |
| 4 | +[](https://hyas.netlify.com/) |
| 5 | + |
| 6 | +Hugo boilerplate helping you build fast, robust, and adaptable websites. |
| 7 | + |
| 8 | +## Features |
| 9 | + |
| 10 | +- Bootstrap Sass (no JavaScript) and Autoprefixer |
| 11 | +- Check Sass and JavaScript for errors |
| 12 | +- Environment specific configuration |
| 13 | +- Image shortcode with [lazysizes](https://github.com/aFarkas/lazysizes) and [blur up](https://github.com/aFarkas/lazysizes/tree/master/plugins/blur-up) plugin |
| 14 | +- Fingerprinting and [SRI](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) (production) |
| 15 | +- Remove unused CSS (production) |
| 16 | + |
| 17 | +## Requirements |
| 18 | + |
| 19 | +Make sure all dependencies have been installed: |
| 20 | + |
| 21 | +- Hugo >= 0.68.3/extended |
| 22 | +- Node.js >= 13.11.0 |
| 23 | +- npm >= 6.13.7 |
| 24 | +- Yarn >= 1.22.0 (recommended) |
| 25 | + |
| 26 | +## Getting started |
| 27 | + |
| 28 | +Create a new Hyas project: |
| 29 | + |
| 30 | +```bash |
| 31 | +$ git clone [email protected]:h-enk/hyas.git my-hyas-site |
| 32 | +``` |
| 33 | + |
| 34 | +Install dependencies: |
| 35 | + |
| 36 | +```bash |
| 37 | +# @ my-hyas-site/ |
| 38 | +$ yarn install |
| 39 | +``` |
| 40 | + |
| 41 | +Build development theme with live reloading and injection: |
| 42 | + |
| 43 | +```bash |
| 44 | +# @ my-hyas-site/ |
| 45 | +$ yarn start |
| 46 | +``` |
| 47 | + |
| 48 | +### Other commands |
| 49 | +- `yarn lint:styles` - Check Sass for errors |
| 50 | +- `yarn lint:scripts` - Check JavaScript for errors |
| 51 | +- `yarn clean` - Delete temporary directories |
| 52 | +- `yarn build` - Build production theme |
| 53 | + |
| 54 | +## Theme structure |
| 55 | + |
| 56 | +```shell |
| 57 | +my-hyas-site/ # → Root of your Hyas based theme |
| 58 | +├── archetypes/ # → Content template files |
| 59 | +├── assets/ # → Asset files (fonts, images, js, lambda, and sass) |
| 60 | +├── config/ # → Configuration directives |
| 61 | +│ ├── _default/ # → Development and defaults |
| 62 | +│ ├── production/ # → Production specific |
| 63 | +│ ├── staging/ # → Staging specific |
| 64 | +│ ├── postcss.config.js # → PostCSS configuration file |
| 65 | +├── content/ # → Content using page bundles |
| 66 | +├── data/ # → Custom data files |
| 67 | +├── functions/ # → Netlify lambda functions directory (production) |
| 68 | +├── layouts/ # → Template files |
| 69 | +│ ├── _default/ # → Base templates for list & singular pages |
| 70 | +│ ├── partials/ # → Partials (footer, head, header, and sidebar) |
| 71 | +│ ├── shortcodes/ # → Shortcodes (img) |
| 72 | +│ │── 404.html # → 404 Template |
| 73 | +│ │── index.headers # → Custom Netlify HTTP headers |
| 74 | +│ │── index.html # → Homepage template |
| 75 | +│ │── index.redirects # → Custom Netlify redirect rules |
| 76 | +│ │── robots.txt # → Template for robots.txt |
| 77 | +│ │── sitemap.xml # → Custom sitemap template |
| 78 | +├── node_modules/ # → Node.js packages (never edit) |
| 79 | +├── public/ # → Publish directory (temporary) |
| 80 | +├── resources/ # → Resource cache directory (temporary) |
| 81 | +├── static/ # → Static content (favicons et cetera) |
| 82 | +├── .eslintrc.json # → ESLint configuration |
| 83 | +├── .stylelintrc.json # → stylelint configuration |
| 84 | +├── netlify.toml # → Netlify configuration |
| 85 | +├── package.json # → Node.js dependencies and scripts |
| 86 | +└── yarn.lock # → Yarn lock file (never edit) |
| 87 | +``` |
| 88 | + |
| 89 | +## Theme setup |
| 90 | +Edit files in `config/` directory. |
| 91 | + |
| 92 | + |
| 93 | +## Theme development |
| 94 | +### Sass |
| 95 | + |
| 96 | +Don't like Bootstrap? Remove it: |
| 97 | +```bash |
| 98 | +# @ my-hyas-site/ |
| 99 | +$ yarn remove bootstrap |
| 100 | +``` |
| 101 | +Also make sure to update your sass files, like `app.scss`. |
| 102 | + |
| 103 | +### Images |
| 104 | + |
| 105 | +Use the image shortcode: |
| 106 | +``` |
| 107 | +{{< img src="image-in-page-bundle.jpg" alt="Text description image" caption="Caption, optional" class="wide" >}} |
| 108 | +``` |
| 109 | + |
| 110 | +Configuration in `config/_default/params.toml`: |
| 111 | + |
| 112 | +```toml |
| 113 | +quality = 85 |
| 114 | +bgColor = "#fff" |
| 115 | +landscapePhotoWidths = [900, 700, 500] |
| 116 | +portraitPhotoWidths = [1500, 1000, 750] |
| 117 | +lqipWidth = "20x" |
| 118 | +``` |
| 119 | + |
| 120 | +### Sitemap |
| 121 | +Exclude a page by adding the following front matter variable: |
| 122 | +```yaml |
| 123 | +sitemap_exclude: true |
| 124 | +``` |
| 125 | +
|
| 126 | +### Robots |
| 127 | +Add a custom [robots meta tag](https://developers.google.com/search/reference/robots_meta_tag) by adding the following front matter variable: |
| 128 | +```yaml |
| 129 | +robots: "noindex, noarchive" |
| 130 | +``` |
| 131 | +This will output: |
| 132 | +
|
| 133 | +```html |
| 134 | +<meta name=robots content="noindex, noarchive"> |
| 135 | +``` |
| 136 | + |
| 137 | +## Documentation |
| 138 | +- [Hugo](https://gohugo.io/documentation/) |
| 139 | +- [Goldmark](https://github.com/yuin/goldmark/) |
0 commit comments