Integrating MuleSoft APIs with Jekyll Site for Dynamic Content Rendering

1

Hello everyone,

I’m currently trying ways to integrate MuleSoft APIs into my Jekyll website to dynamically render content based on real-time data. As a newcomer to Jekyll and MuleSoft, I’m facing some issues in setting up this integration effectively.

I have read through various resources like Rendering Process | Jekyll • Simple, blog-aware, static sites and mulesoft guide also tried to implement the integration following the provided instructions. But I am facing some issues .

I’m struggling with below points :

-Understanding the best approach to fetch data from MuleSoft APIs within a Jekyll environment.

-Incorporating the fetched data into my Jekyll site’s templates to dynamically generate content.

-Ensuring that the integration complies with best practices and forum guidelines.

If anyone has experience into integrating MuleSoft APIs with Jekyll sites, I would greatly appreciate any advice .

Thanks in advance !

Thank you
nolanmaris

2

you’d need to use javascript to load and show the data, which isn’t too hard to do but a little clunky compared to modern frameworks like react.

Jekyll is just a static site generator which means it take the source and applies the layouts and what not and builds a site. It has no ability on its own to consume data from an api. That doesn’t mean you can’t do it, just that you need to use a lot of javascript to do it and it really isn’t the best solution for a variety of reasons.

You might want to check out Astro or Next.js.

3

Technically, yes, you can. Let’s say you built a site using Jekyll’s default theme with jekyll new .

You can now add the HTML to the index.markdown file (or rename index.markdown to index.html and remove the YAML front matter). Then, link to the JavaScript.

If you want to add Javascript to every page, you should convert your theme to a “regular” theme instead of a “Gem-based” theme. I provide a video that shows you how to do that here:

Once you do that, you can update the _layouts or _includes files to load the Javascript where you like.

Okay, so that is the easy part. The hard part, and the part you need to think about, is what APIs you will access. If they are public-facing APIs, accessible to all, and without a requirement to authenticate, you are good to go. However, most APIs require you to enter an API key (or something similar), and with static sites like Jekyll, you have to put your API key right in your uncompiled Javascript file.

If you or your company needs an API key or a unique login mechanism, I highly recommend building the site using a server-side programming language. I understand that Jekyll and others can use environment variables, but (unless I am mistaken) that means you will require access to the server on which your site is running.

If you do not require the real-time element (maybe your site builds nightly, for example), you can use a GitHub Action (or GitLab workflow, etc.) and update the site regularly.

I hope that helps!

4

Thank you rdyar & BillRaymond for your response.

1 Like