ssg  
Article Series

Jekyll in General

Jekyll Plain

Where to Discuss?

Local Group

Preface

Goal: Custom content output such as JSON.

Source Code

This article use tutor-03 theme. We will create it step by step.


1: Archive Data: JSON

Jekyll can read data, and can also produce data.

Frontmatter: Layout

---
layout: null
---

Or if you wish to exclude this from sitemap

---
layout: null
sitemap:
  exclude: 'yes'
---

Page Content: JSON Example

The complete JSON example is below:

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

    "{{ post.date | date: "%y%m%d%M" }}": {
      "title": "{{ post.title | json}}",
      "url": "{{ post.url | xml_escape }}"
    }{% unless forloop.last %},{% endunless %}
  {% endfor %}
}

I give an identitiy number for each post using dates and minutes. It is rarely that a person blog in the same exact dates and minutes. So I guess, giving an ID like this is valid enough.

You can have any JSON that you like such as this one below:

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

    "{{ post.url | slugify }}": {
      "title": "{{ post.title | json}}",
      "url": "{{ post.url | xml_escape }}"
    }
    {% unless forloop.last %},{% endunless %}
  {% endfor %}
}

Render: Browser

The blog list, now looks like this below:

Jekyll: Custom Output: Archive in JSON

Data: archives.json

The raw source of the JSON output should looks like this:

{
    "20031535": {
      "title": "Company of Thieves - Oscar Wilde",
      "url": "/lyric/2020/03/15/company-of-thieves-oscar-wilde.html"
    },
    "19071535": {
      "title": "Mothers -  No Crying in Baseball",
      "url": "/lyric/2019/07/15/mothers-no-crying-in-baseball.html"
    },
    "19052535": {
      "title": "Brooke Annibale - Yours and Mine",
      "url": "/lyric/2019/05/25/brooke-annibale-yours-and-mine.html"
    },
    "19051535": {
      "title": "Brooke Annibale - By Your Side",
      "url": "/lyric/2019/05/15/brooke-annibale-by-your-side.html"
    },
    ...
}

You can examine using curl:

$ curl http://localhost:4000/pages/archive.json | vim -R -

Jekyll: Data archive.json

We are going to use this data to be a feed for other SSG blog.


2: Archive Data: YAML

Just like json, Jekyll can produce any text output such as yaml.

Page Content: YAML Example

The YAML example is below:

---
layout: null
sitemap:
  exclude: 'yes'
---
# Helper for related links

{% for post in site.posts %}{% unless post.published == false %}{% if post.date %}
- id: {{ post.date | date: "%y%m%d%M" }}
  title: "{{ post.title }}"
  url: {{ post.url }}
{% endif %}{% endunless %}{% endfor %}

Render: Browser

The blog list, can be accessed from thislink below:

Data: archives.yml

The raw source of the YAML output should looks like this:

# Helper for related links

- id: 20031535
  title: "Company of Thieves - Oscar Wilde"
  url: /lyric/2020/03/15/company-of-thieves-oscar-wilde.html

- id: 19071535
  title: "Mothers -  No Crying in Baseball"
  url: /lyric/2019/07/15/mothers-no-crying-in-baseball.html

- id: 19052535
  title: "Brooke Annibale - Yours and Mine"
  url: /lyric/2019/05/25/brooke-annibale-yours-and-mine.html

- id: 19051535
  title: "Brooke Annibale - By Your Side"
  url: /lyric/2019/05/15/brooke-annibale-by-your-side.html

...

You can examine using curl:

$ curl http://localhost:4000/pages/archive.yml | vim -R -

Jekyll: Data archive.yaml

Using Data

Just copy the result manually, from _site/pages/archives.yml to folder _data/archives.yml.

Or automated with script, but execute it manually.

#!/usr/bin/env bash

cp ../_site/pages/archive.yml ../_data/archive.yml

We are going to use this data in later chapter.


What’s Next?

Consider continue reading [ Jekyll - Plain - Markdown ].

Thank you for reading.