Create posts.json
(you can name this file whatever you want) in the root of your Jekyll site with the following contents:
---
---
[
{% raw %}{% for post in site.posts %}
{
"url": "{{post.url}}",
"title": {{post.title | jsonify}},
"content": {{post.content | jsonify}},
"keywords": "{{post.keywords}}",
"created": "{{post.date | date: "%B %e, %Y"}}"
}{% unless forloop.last %},{% endunless %}
{% endfor %}{% endraw %}
]
Visit /posts.json
and voila!
This example used the site.posts
collection but other collections can be used too.
With this JSON endpoint, we can make AJAX requests to it. I did this for the search bar on this blog. For example:
(async () => {
const response = await fetch('/posts.json');
const posts = await response.json();
console.log(posts);
})();