Website

We use the Syna thema for Hugo

Please check the Syna documentation. The Syna theme heavily works with fragments, therefore the development differs a bit from a "normal" Hugo website.

Open in Gitpod

Quick start

Prerequisites

In case you use GitPod (see button above) to contribute to the website, you can skip the prerequisites section.

  • Get submodules git submodule init && git submodule update
  • Install Hugo. You can skip step 1, 2 & 3 when you already have brew installed properly
    1. sudo apt install linuxbrew-wrapper
    2. brew (This will execute the first time setup)
    3. Add brew to your PATH
    4. brew install hugo

Development

  • Start Hugo server via hugo server for development
  • Build the website via hugo for deployment (the public folder ist deployed then)

Overview

  • config.toml contains the global config and menu items
  • content/_global contains customization for global parts of the website, for example footer
  • content/_index contains the landing page
  • content/XYZ/* contains each reachable page. index.md is necessary to declare the page exists, while content.md defines its contents. Additional fragments can be added / overwritten etc.
  • static/*** contains static resources, for example images
  • archetypes contains templates which are used when executing hugo new. Not too important but easier than copy & pase.

How to create a new page

  1. Either copy & paste an existing one, or execute hugo new --kind page-bundle <NAME>
  2. To add an entry to the menu, add a link to the page in config.toml

Fancy elements

Check the Syna Fragments documentation for all provided fragments and how to use them.

Sorting elements

To sort items you can use weight, a lower value typically means it is more to the top or left. However note that weight = 0 is the same as undefined, so use at least weight = 1.

Best practices

Check the example site provided with Syna in themes/syna/exampleSite