Install Hyas manually

This guide will walk you through the steps to manually install and configure a new Hyas project if you prefer not to use the automatic CLI tool.

Prerequisites

Node.js - v16.17.0 or higher.
Text editor - We recommend VS Code with the Hugo Language and Syntax Support extension.
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

First, replace any placeholder “scripts” section of your package.json with the following:

  "scripts": {
    "dev": "exec-bin node_modules/.bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender --baseURL=http://localhost --noHTTPCache",
    "dev:drafts": "exec-bin node_modules/.bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender --baseURL=http://localhost --noHTTPCache --buildDrafts",
    "create": "exec-bin node_modules/.bin/hugo/hugo new",
    "lint:scripts": "eslint --cache config",
    "lint:styles": "stylelint --cache \"assets/scss/**/*.{css,sass,scss}\"",
    "lint:markdown": "markdownlint-cli2 \"*.md\" \"content/**/*.md\"",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "exec-bin node_modules/.bin/hugo/hugo --minify",
    "preview": "http-server --gzip --brotli --ext=html --cors",
    "clean:build": "shx rm -rf public resources .hugo_build.lock",
    "clean:install": "shx rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml",
    "clean:lint": "shx rm -rf .eslintcache .stylelintcache",
    "preinfo": "npm version",
    "info": "npm list",
    "postinfo": "exec-bin node_modules/.bin/hugo/hugo version",
    "postinstall": "shx rm -rf node_modules/.bin/hugo && shx mkdir node_modules/.bin/hugo && shx cp node_modules/gethyas/node_modules/.bin/hugo/* node_modules/.bin/hugo"
  },

You’ll use these scripts later in the guide to start Hyas and run its different commands.

Then, add an .npmrc file to your project root with the following:

enable-pre-post-scripts = true
auto-install-peers = true
node-linker = hoisted
prefer-symlinked-executables = false

Next, install the Hyas project dependencies inside your project.

npm install gethyas

pnpm install gethyas

yarn add gethyas

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: 2023-08-08T11:42:29+02:00
draft: 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-txt
User-agent: *
Allow: /

6. Create `app.scss`

In the root of your project, create an empty assets/scss directory, and then navigate into it.

mkdir 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 config/_default && cd config/_default

`hugo.toml`

Add a hugo.toml file with the following:

title = "Hyas"
baseurl = "/"
canonifyURLs = false
disableAliases = true
disableHugoGeneratorInject = true
disableKinds = ["taxonomy", "term"]
enableEmoji = true
enableRobotsTXT = true
languageCode = "en-US"
rssLimit = 10
summarylength = 20 # 70 (default)

copyRight = "Copyright (c) 2023 Hyas"

[social]
  twitter = "gethyas"

[outputs]
  home = ["HTML"]

[sitemap]
  changefreq = "monthly"
  filename = "sitemap.xml"
  priority = 0.5

[minify.tdewolff.html]
  keepWhitespace = false

`module.toml`

Add a module.toml file with the following:

[[mounts]]
  source = "node_modules/@hyas/core/assets"
  target = "assets"

[[mounts]]
  source = "node_modules/@hyas/core/layouts"
  target = "layouts"

[[mounts]]
  source = "themes/my-basic-theme/assets"
  target = "assets"

[[mounts]]
  source = "themes/my-basic-theme/layouts"
  target = "layouts"

[[mounts]]
  source = "assets"
  target = "assets"

[[mounts]]
  source = "layouts"
  target = "layouts"

`params.toml`

Add a params.toml file with the following:

# Meta Data for SEO

## Homepage
title = "Hyas"
titleSeparator = "-"
titleAddition = "The all-in-one Hugo-npm framework"

`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: [
        './node_modules/@hyas/*/layouts/**/*.html',
        './themes/my-basic-theme/layouts/**/*.html',
        './content/**/*.html',
        './content/**/*.md',
      ],
      safelist: [
        'lazyloaded',
        'table',
        'thead',
        'tbody',
        'tr',
        'th',
        'td',
        'h1',
        'h2',
        'h3',
        'alert-link',
        ...whitelister([
          './node_modules/@hyas/core/assets/scss/app.scss',
        ]),
      ],
    }),
  ],
}

Project directory

cd one level up.

cd ..

`.eslintrc.json`

Add a .eslintrc.json file with the following:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "no-console": 0,
    "quotes": ["error", "single"],
    "comma-dangle": [
      "error",
      {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "ignore"
      }
    ]
  }
}

`.stylelintrc.json`

Add a .stylelintrc.json file with the following:

{
  "extends": "stylelint-config-standard-scss",
  "rules": {
    "no-empty-source": null,
    "scss/comment-no-empty": null,
    "max-line-length": null,
    "scss/at-extend-no-missing-placeholder": null,
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "extend",
          "at-root",
          "debug",
          "warn",
          "error",
          "if",
          "else",
          "for",
          "each",
          "while",
          "mixin",
          "include",
          "content",
          "return",
          "function",
          "tailwind",
          "apply",
          "responsive",
          "variants",
          "screen"
        ]
      }
    ]
  }
}

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
.eslintrc.json
.npmrc
.stylelintrc.json
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.

Install Hyas manually

Prerequisites

Installation

1. Create your directory

2. Install Hyas

3. Create your first page

4. Create your first static asset

6. Create app.scss

6. Create configuration files

config/_default directory

hugo.toml

module.toml

params.toml

config directory

babel.config.js

postcss.config.js