Copy environment

Static Site

The following will try to explain the optional static site functionality in this repository.

Quick Start

Development

Run npm run dev:static. This will run the static site in watch mode.

Build

Run npm run build:static. The command will build the site to app/static folder.

Setup

Create a pages folder in src/patterns. Add a config.json file there that sets the prefix for all pages:

{
  "prefix": "page"
}

Create pages

Create each page as a Fractal component in the pages directory:

pages/
├── config.json
├── about/
│   ├── about.twig
│   └── about.config.json
└── index/
    ├── index.twig
    └── index.config.json

The twig file for a page should probably include an existing view component.

The config file for each page should look similar to this:

{
  "meta": {
    "language": "zxx", // or a specific language if it's a multi language page
    "path": "/about/",
    "siteUrl": "https://site-url.ee",
    "languageLinks": [
      "https://site-url.ee/et/about",
      "https://site-url.ee/en/about",
      "https://site-url.ee/ru/about"
    ],
    "siteLanguages": [
      "et",
      "en",
      "ru"
    ],
    "title": "about title"
  },
  "context": {
    "data": {
        // any context data
    }
  }
}

The important parts are in the meta object:

  • language specifies the target language of the page
  • path specifies the root-relative path where the page should be accessible from after build
  • siteUrl specifies the url for the page, used for href property to set hreflang in the <head> and it must be unique for each page
  • title specifies the page title that goes in the <title>about title</title> tags.