Walk this way if you're a beginner

This template was created to look at its code. So you should spend about 5% of your time looking at the web from the outside and the other 95% tinkering with things under the hood.

The template is not perfect nor does it contain the best practices. It is not even consistent. It is designed to help you with the learning process. If you follow the steps below, you'll get a pretty good picture of how things work. Every step adds some new features and builds upon the previous one.

1. Site structure and configuration file

The site is made of two folders and a Hyde configuration file. The folders are content and layout.

content contains all your page content, blog articles, pictures and resources like CSS and JavaScript. Everything that is unique is here.

layout contains templates and macros. Everything that you'll want to reuse is here.

2. Jinja2 template

base.j2 is a very short and simple Jinja2 template. This way you can concentrate on some of the basic features. Notice meta and context variables invocation inside curly braces, dynamic media path generation and running all content through the Markdown filter.

macros.j2 contains macros for common and repetitive tasks.

For more information or to try something new, visit the extensive Jinja2 documentation.

3. Content

Look at the three files in this order: index.html, first-steps.html and about.html.

Index extends the base layout in the classic Jinja way and fills the content block with some simple Markdown data.

First steps goes a step furher. It introduces the in-file metadata that plugins will use to extend and fill the layout. It also uses some new Markdown features.

About has a default_block metadata and mixes Markdown content with Jinja templates.

4. Advanced sections

While searching and navigating this template you'll find more files and sections than mentioned on this page (something like meta.yaml files, the content/advanced folder or other Jinja templates). Those files are needed for the advanced topics so just ignore them at the beginning. They will start to make sense while you're working through the template or will be explicitly explained when the right time comes.