Add Dynamic Content to a Jekyll Static Site

Jekyll Refresh

Static site generators have really taken the web development world by storm in the past year. With popularity surging due to their speed and security, one of the big drawbacks of these sites is that they are in fact static and have lost much of the dynamic content that their database-driven brothers allow.

In this article, we’ll set up a quick boilerplate Jekyll static site and add some dynamic content using the Flex.io web service.

Creating the Site

Creating a Jekyll site is incredibly easy using the handy Netlify service. Netlify includes “one-click” deployments for a number of popular static site generators including Jekyll. Click the button below to deploy a basic starter site to Netlify (NOTE: a GitHub account is required).

Deploy to Netlify

Once you’ve connected your GitHub account with Netlify and chosen a repository name (we named ours netlify-jekyll), it shouldn’t be more than a minute before your Jekyll site is deployed. Here’s the Flex.io Jekyll example site we’ll be using going forward.

Adding Dynamic Content

Now that our Jekyll site has been deployed, all we need to do is add a single AJAX call to the index.html file to call the Flex.io API.

Add the following code to the very bottom of the index.html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$.ajax({
type: 'POST',
url: 'https://www.flex.io/api/v1/pipes/flexio-mysql-items-sample/run?stream=0',
data: $('form').serialize(),
dataType: 'json',
success: function(content) {
var row_idx = 0
var thead = ''
var tbody = ''

// create a very basic table building up the markup from the JSON
$.each(content, function(idx, row) {
if (row_idx == 0)
{
thead += '<tr>'
$.each(row, function(key, val) { thead += '<th style="border: 1px solid #ddd; white-space: nowrap">'+key+'</th>' })
thead += '</tr>'
}

tbody += '<tr>'
$.each(row, function(key, val) { tbody += '<td style="border: 1px solid #ddd; white-space: nowrap">'+val+'</td>' })
tbody += '</tr>'

row_idx++
})

// append the table to the homepage's content area
var table = '<div style="border: 1px solid #ddd; overflow: scroll"><table><thead>'+thead+'</thead><tbody>'+tbody+'</tbody></table></div>'
$('.home').append(table)
}
})
</script>

Allow Netlify a moment to update the static site and then refresh your browser. You should now see a table with 10 rows in it. The data in this table is actually coming from a MySQL server! Flex.io is doing the heavy lifting of connecting to MySQL, limiting the result set to 10 rows and then converting the result to JSON for consumption in our client-side Javascript code.

Most of the code above in the success callback is just a poor man’s table we’re using to output the dynamic content. The real magic happens in the call to the Flex.io API via this URL: https://www.flex.io/api/v1/pipes/flexio-mysql-items-sample/run?stream=0.

Set up the Flex.io Pipe

We set up a very simple pipe using Flex.io that has only three steps.

  1. File Input

    This step will import the items table from a MySQL database using the input command:

    input from: flexio-mysql-test file: items
  2. Limit Number of Rows

    This step will limit the number of rows we will output to 10 using the limit command:

    limit value: 10
  3. Convert from CSV to JSON

    This step will convert the table to JSON. To do this, we simply use a convert command:

    convert to: json

If you’d like, feel free to check out the public pipe to see the actual pipe that we’re running in this example.

Get started with Flex.io

Using the Flex.io API to take care of the nuisance of actually querying MySQL, we’re able to take our static site and inject some dynamic content into it.

Click below to sign up and get started adding your own dynamic content to your Jekyll site.

Get started with Flex.io