Displaying blog posts in Pico a flat file CMS

Blog image

Pico is a great little flat file/no database CMS without an admin panel. This makes it a great choice for portfolio sites or developers who just have a few things to say and don’t need the power offered by a full fat solution like WordPress. However, you still might want to display a list of blog posts or articles and luckily i am going to show you how.


To display the posts you need to have a loop on your theme template, which should look like below:

<!-- iterate over the pages, sorted by time in reverse -->

{% for page in pages|sort_by("time")|reverse %}
    <!-- look for pages in the blog folder which are not hidden and also not the index.md file in the blog folder -->

    {% if (page.id starts with "blog" and not page.hidden) and not (page.id starts with "blog/index") %}
        <!-- display the excert of the blog -->

        <div class="blog__item">

            <!-- display a specific image for each page that is stored in a folder in assets/images/$pageId/featured-image.jpg --> 

            <img class="img-responsive" src="{{ base_url }}/assets/images/{{ page.id }}/featured-image.jpg" alt="">
            <div class="blog__item__content">

                <!-- display the page title -->

                <h2 class="blog__item__content__title">{{ page.title }}</h2>

                <!-- display a button to link to the page -->

                <a href="{{ page.url }}"><button class="btn">{{ page.title }}</button></a>
    {% endif %}
{% endfor %}

The main difference between my example and the one you will find on the Pico documents section is that i don’t include the index page in the folder. I ensure i don’t get the index page by the following line:

{% if (page.id starts with "blog" and not page.hidden) and not (page.id starts with "blog/index") %}

Once you have added the code your content just needs to be in the correct folder to be displayed and should look as follows, where index is the blog page that lists all your posts: