--- extends: base.j2 title: First steps --- {# In-file metadata. Supplements data from the site's configuration file and node (folder) level data in "meta.yaml" files. Use the AutoExtendPlugin to extend templates from metadata. In this case the metadata and "extends" statement has to be on the top of the file. #} {% block content %} 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][hyde_config] 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][jinja2_docs]. 3. Content ---------- Look at the three files in this order: [index.html](index.html), [first-steps.html](first-steps.html) and [about.html](about.html). [Index](index.html) extends the base layout in the classic Jinja way and fills the content block with some simple Markdown data. [First steps](first-steps.html) 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](about.html) has a **default_block** metadata and mixes Markdown content with Jinja templates. [hyde_config]: http://hyde.github.com/config.html "Hyde configuration" [jinja2_docs]: http://jinja.pocoo.org/docs/templates/ "Jinja2 documentation" 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](advanced/overview.html) 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. {% endblock %}