You might have data stored in your Jekyll project. Typically in YAML, CSV or JSON file in the _data/
directory. Or in the frontmatter of your pages. This tutorial shows you how to render as JSON pages.
The data files could be:
- in version control (visible in Git and on GitHub)
- dynamic (ignored by Git) - for example if you have a script to fetch API data and write to
_data
every time you deploy your site.
This is useful if you want to make your data available for another service or for others to consume (like GitHub, Twitter and Facebook make their data available on APIs). Or perhaps you have JavaScript single-page application that reads from your API backend to serve the app or build a search index.
Given data in page frontmatter or a YAML data file:
---
my_data:
- a: 1
b: 2
- a: 100
b: 200
---
Or CSV data as:
a, b
1, 2
100,200
The rendered JSON page will look like this:
localhost:4000/foo.json
[
{ "a": "1", "b": "2" },
{ "a": "100", "b": "200" }
]
Note that Jekyll is a static site generator. So your JSON API data will only be updated whenever you make a commit and the site rebuilds. If your API needs to have data which changes based on many users or needs to change in realtime, then you're better off using Node.js or Python for your API.
Here we will use .json
as the file extension, instead of the usual .md
or .html
. This means your HTTP header will be set correctly:
Content-Type application/json
We'll also make sure to set the layout to null
so that we get a pure JSON page without any HTML styling.
We'll use our the YAML data to build the response. If you use the jsonify
Jekyll, you can convert data straight to JSON without worrying about for
loops or JSON syntax.
I recommend using a Jekyll extension for your IDE, to handle Liquid syntax highlighting and recognizing frontmatter. Then make sure you choose jekyll
as your formatter for your .json
files.
It looks like JSON files are excluded from a sitemap file by default. The plugin recognizes just HTML and Markdown files.
See also Data files in the Jekyll docs. You might iterate over data in a JSON or YAML file or files to build up output on a page. The data files are your database and then Jekyll builds your API. This is also a way to build a databse JSON file to be consumed on the frontend such as for search functionality.
Or you might store your data in the frontmatter of Jekyll Collections which get outputted as pages similar to the Page example below. That way you can group your JSON data into collections as interate over them easily.
Hi 👋 @RyanTG
I hope I understand your question.
I haven't had any trouble with img link paths.
My Jekyll generates a index.json for pages, posts and products, but I ain't
using that JSON as an endpoint with authentication.
It is only "read only" permissions and I am NOT using Jekyll as a server. Jekyll is only a SSG for my stack. I would like to have a headless cms that is specific to Jekyll and not JavaScript pancakes like all these insane complex work environments jumping on the bus with FB react.
I don't know why Jekyll team would create a Jekyll Admin that is dependent on Jekyll public facing 24/7; all that is needed for a headless cms api to work is simple secret key with oauth for the Git server. The database would then become the git server i.e. GitHub, Gitea, etc... I was going to call it Hyden so we would have Hyde and Jekyll...and Hyde would be hiding Jekyll cause Hyde is front-end...plus a play on Dr. Jekyll and Mr. Hyde.
I started to do this myself, but Strapi has a huge community and has built something more complicated than I personally need, but it is what I was envisioning when it comes to hosting our own headless cms with Jekyll.
The Liquid jsonify command is super powerful and makes creating .json files easy, the difficult part is the authentication.
My headless cms admin dashboard pushes to the Git server, then my CI/CD server builds the Jekyll site from Gitea, pushes the www-data to www-data branch, compresses the www-data for download link on hosting server and then rsyncs the www-data to my hosting server with HTTPS via CI/CD.
The generated index.json from posts api.