Generate standalone Jekyll page with variables

I'm trying to generate an additional Jekyll page called posts.html.

I'm looking to use the Jekyll variables such as site.posts to iterate through the posts I've written for my site, and create a standalone page (posts.html) using these variables.

Here's my current version:

<!DOCTYPE html>
<html lang="en">
  <body>
    <main>
        {% for post in site.posts %}

            {{post.title}};{{post.date}},
        
        {%endfor%}
    </main>
  </body>
</html>

If I include this at the root of my site, the command bundle exec jekyll build will build posts.html to my _site directory, but does not compile the variables into readable text. It outputs it in plaintext.

I've attempted to hook into the existing build cycle by moving the posts.html file to the _includes directory, and referencing it at the bottom of blog.html.

This does generate the HTML, but as part of the index.html like so:

... Additional markup here
</main>
    <section id="category-modal-bg"></section>
<section id="category-modal">
  <h1 id="category-modal-title"></h1>
  <section id="category-modal-content"></section>
</section>

    <!DOCTYPE html>
<html lang="en">
  <body>
    <main>
        
            MyPostName;MyPostDate,
        
    </main>
  </body>
</html>

This makes sense as the layouts/posts.html file is an include, so building the markup where the include exists is working as expected.

I'm trying to compile the posts.html file as a standalone, navigatable file that will sit alongside my _site/index.html. If I need to copy this file across as part of my CI/CD pipeline thats fine too.

Is this possible?

Solution

Add an empty front matter before posts.html to let Jekyll process your file. (and move back posts.html)

---
---
<!DOCTYPE html>
<html lang="en">
  <body>
    <main>
        {% for post in site.posts %}

            {{post.title}};{{post.date}},
        
        {% endfor %}
    </main>
  </body>
</html>

Any files with front matter are subject to processing. For each of these files, Jekyll makes a variety of data available via Liquid. (Variables | Jekyll Doc)

You must include front matter on the page for Jekyll to process any Liquid tags on it. (Front Matter | Jekyll Doc)

However in most cases, this is better.

---
layout: default
---
{% for post in site.posts %}

    {{post.title}};{{post.date}},

{% endfor %}

By using a layout, you don't have to write <head> or <footer> again and again and again. Layouts also makes it easier to change <head>, etc. (let's say, you want to add Google Analytics someday.)

Besides, I think this may help you, though irrelevant to the question's title.

---
layout: default
---
<ol>
    {% for p in site.posts %}
        <li><a href="{{ p.url | relative_url }}">{{ p.title }}</a> — {{ p.date }}</li>
    {% endfor %}
</ol>

Comprehensive version: Pagination | Jekyll doc