Install Hyas manually
This guide will walk you through the steps to manually install and configure a new Hyas project.
Prerequisites
- Node.js -
v20.11.0
or higher — runnode -v
to check. - Hugo extended -
v0.125.0
or higher — runhugo version
to check. - Text editor - We recommend VS Code — see also Editor Setup.
- Terminal - Hyas is accessed through its command-line interface (CLI).
Installation
If you prefer not to use our automatic create hyas
CLI tool, you can set up your project yourself by following the guide below.
1. Create your directory
Create an empty directory with the name of your project, and then navigate into it.
mkdir my-hyas-project && cd my-hyas-project
Once you are in your new directory, create your project package.json
file. This is how you will manage your project dependencies, including Hyas. If you aren’t familiar with this file format, run the following command to create one.
npm init --yes
pnpm init
yarn init --yes
2. Install Hyas, Prettier and Vite
First, install the Hyas project dependencies inside your project.
npm install gethyas
pnpm install gethyas
yarn add gethyas
Then, install Prettier and Vite — as devDependencies
:
npm install -D prettier vite
pnpm install -D prettier vite
yarn add -D prettier vite
Next, replace any placeholder “scripts” section of your package.json
with the following:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "create": "hugo new", "dev": "hugo server --disableFastRender --noHTTPCache", "format": "prettier **/** -w -c", "build": "hugo --minify --gc", "preview": "vite preview --outDir public" },
You’ll use these scripts later in the guide to start Hyas and run its different commands.
3. Create your first page
Hyas follows the Hugo content structure. In the root of your project, create an empty content
directory, and then navigate into it.
mkdir content && cd content
Next, create your new homepage:
npm run create _index.md
pnpm run create _index.md
yarn run create _index.md
In the frontmatter set draft: false
and add some content:
---title: "Hello, World"date: 2024-05-13T11:22:40+02:00draft: false---
This line is from `content/_index.md` 🚀
4. Create your first static asset
You will also want to create a static
directory to store your static assets. Hugo will always include these assets in your final build, so you can safely reference them from inside your layout templates.
In the root of your project, create an empty static
directory, and then navigate into it.
mkdir static && cd static
In your text editor, create a new file in your directory at static/robots.txt
. robots.txt
is a simple file that most sites will include to tell search bots like Google how to treat your site.
For this guide, copy-and-paste the following code snippet into your new file:
# Example: Allow all bots to scan and index your site.# Full syntax: https://developers.google.com/search/docs/advanced/robots/create-robots-txtUser-agent: *Allow: /
5. Create app.scss
In the root of your project, create an empty assets/scss
directory, and then navigate into it.
mkdir -p assets/scss && cd assets/scss
Add an app.scss
file with the following:
/** Import modern-css-reset */@import "modern-css-reset/src/reset";
:root { --main-bg-color: yellowgreen;}
body { background-color: var(--main-bg-color); text-align: center;}
6. Create configuration files
Hyas follows Hugo’s configuration setup.
config/_default
directory
In the root of your project, create an empty config/_default
directory, and then navigate into it.
mkdir -p config/_default && cd config/_default
hugo.toml
Add a hugo.toml
file with the following:
title = "Hyas"baseurl = "http://localhost/"canonifyURLs = falsedisableAliases = truedisableHugoGeneratorInject = truedisableKinds = ["taxonomy", "term"]enableEmoji = trueenableGitInfo = falseenableRobotsTXT = truelanguageCode = "en-US"paginate = 7rssLimit = 10summarylength = 20 # 70 (default)
copyRight = "Copyright (c) 2020-2024 Hyas"
[build.buildStats] enable = true
[outputs] home = ["HTML"]
[minify.tdewolff.html] keepWhitespace = false
module.toml
Add a module.toml
file with the following:
# mounts## archetypes[[mounts]] source = "archetypes" target = "archetypes"
## assets[[mounts]] source = "node_modules/@hyas/core/assets" target = "assets"
[[mounts]] source = "assets" target = "assets"
## content[[mounts]] source = "content" target = "content"
## data[[mounts]] source = "data" target = "data"
## i18n[[mounts]] source = "i18n" target = "i18n"
## layouts[[mounts]] source = "node_modules/@hyas/core/layouts" target = "layouts"
[[mounts]] source = "layouts" target = "layouts"
## static[[mounts]] source = "static" target = "static"
params.toml
Add a params.toml
file with the following:
# Hugotitle = "My Hyas site"description = "Congrats on setting up a new Hyas project!"images = ["cover.png"]
[social] twitter = "gethyas"
config
directory
cd
one level up.
cd ..
babel.config.js
Add a babel.config.js
file with the following:
module.exports = { presets: [ [ '@babel/preset-env', { targets: { browsers: [ // Best practice: https://github.com/babel/babel/issues/7789 '>=1%', 'not ie 11', 'not op_mini all', ], }, }, ], ],};
postcss.config.js
Add a postcss.config.js
file with the following:
const autoprefixer = require('autoprefixer');const purgecss = require('@fullhuman/postcss-purgecss');const whitelister = require('purgecss-whitelister');
module.exports = { plugins: [ autoprefixer(), purgecss({ content: [ './hugo_stats.json' ], extractors: [ { extractor: (content) => { const els = JSON.parse(content).htmlElements; return els.tags.concat(els.classes, els.ids); }, extensions: ['json'], }, ], dynamicAttributes: [ 'aria-expanded', 'id', 'size', 'type', ], safelist: [ 'active', 'disabled', 'hidden', 'show', 'img-fluid', 'blur-up', 'lazyloaded', ...whitelister([ './assets/scss/**/*.scss', ]), ], }), ],}
Project directory
cd
one level up.
cd ..
.prettierignore
Add a .prettierignore
file with the following:
*.html*.ico*.png*.jp*g*.toml*.*ignore*.svg*.xmlLICENSE.npmrc.gitkeep*.woff**.txt*.map
.prettierrc.yaml
Add a .prettierrc.yaml
file with the following:
# Default configtabWidth: 4endOfLine: crlfsingleQuote: trueprintWidth: 100000trailingComma: nonebracketSameLine: truequoteProps: consistentexperimentalTernaries: true
# Overrided configoverrides: - files: ["*.md", "*.json", "*.yaml"] options: tabWidth: 2 singleQuote: false - files: ["*.scss"] options: singleQuote: false
Next steps
If you have followed the steps above, your project directory should now look like this:
Directoryassets/scss
- app.scss
Directoryconfig
Directory_default
- hugo.toml
- module.toml
- params.toml
- babel.config.js
- postcss.config.js
Directorycontent
- _index.md
Directorynode_modules/
- …
Directorystatic
- robots.txt
- .prettierignore
- .prettierrc.yaml
- package-lock.json # or yarn.lock, pnpm-lock.yaml, etc.
- package.json
Congratulations, you’re now set up to use Hyas!
If you followed this guide completely, you can jump directly to Step 3: Start Hyas to continue and learn how to run Hyas for the first time.
Learn