Statie - part 4: How to Create The Simplest Blog

This post was updated on September 2018
Updated with Statie 5.0, NEON → YAML, Twig and parameters section in statie.yml config.

Statie is very powerful tool for creating small sites. But you will use just small part of it's features, having just micro-sites. How to get to full 100%? build a blog.

Today I will show you, how to publish your first post.

Create a Blog Page

This might be the simplest page to show all your posts:

<!-- /source/blog.twig -->

---
layout: default
---

{% block content %}
    <h2>Shouts Too Loud from My Hearth</h2>

    {% for post in posts %}
        <a href="/{{ post.relativeUrl }}/">
            <h3>{{ post.title }}</h3>
        </a>
    {% endfor %}
{% endblock %}

You already see

How Does it Work?

Statie will do 3 steps:

  1. Scans /source/_posts for any files
    • those files have to be in YYYY-MM-DD-url-title.md format
    • that's how Statie can determine the date
  2. Converts Markdown and TWIG/Latte syntax to HTML
  3. Stores them to posts variable.

How does a Post Content Look Like?

<!-- source/_posts/2017-03-05-my-last-post.md -->

---
title: "This my Last Post, Ever!"
---

This is my last post to all

How to Show Post in Own Layout

Posts use _layouts/post.twig by default. It should include the common parts for all layouts - like header, menu or footer.

<!-- /source/_layouts/post.twig -->

{% include "_snippets/header.twig" %}

{% block content %}
    <h2>{{ post.title }}</h2>

    {{ post.content|raw }}
{% endblock %}

{% include "_snippets/footer.twig" %}

That should be it.

Save file, look on the blog page and see:

When you click a post title:

ProTip: Change Post Url

You see the url for the post is blog/2017/03/05/my-last-post/.

This can be changed by configuration in statie.yml:

parameters:
    generators:
        posts:
            route_prefix: 'my-blog/:year' # "blog/:year/:month/:day" by default

That produces my-blog/2017/my-last-post/ url.

Got it? I know you do! You are smart.

Now You Know

Happy coding!


  Continue Learning


Typo? Fix it, please  and join 49 people who build this website