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.
Quick start
Open in VSCode dev container
In case you use GitPod (see button above) to contribute to the website, you can skip this section.
To avoid the need to install hugo on development machines, a VSCode dev container is provided that runs hugo in a docker container.
- Get submodules
git submodule init && git submodule update
- Open the repository folder in VSCode
- If not installed, install Microsoft's "Remote - Containers" extension with id
ms-vscode-remote.remote-containers
. - Open this repository in VSCode as a Dev Container:
- Open command palette (
F1
orCtrl+Shift+P
) - Run
Remote-Containers: Reopen in Container
- Open command palette (
Development
- Start Hugo server via
hugo server
for development or run taskServe Drafts
- Build the website via
hugo
for deployment (the public folder ist deployed then) or run taskBuild
Overview
config.toml
contains the global config and menu itemscontent/_global
contains customization for global parts of the website, for examplefooter
content/_index
contains the landing pagecontent/XYZ/*
contains each reachable page.index.md
is necessary to declare the page exists, whilecontent.md
defines its contents. Additional fragments can be added / overwritten etc.static/***
contains static resources, for example imagesarchetypes
contains templates which are used when executinghugo new
. Not too important but easier than copy & pase.
How to create a new page
- Either copy & paste an existing one, or execute
hugo new --kind page-bundle <NAME>
- 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