Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

Eleventy Documentation

Menu

Quick Tip #007—Fetch GitHub Stargazers Count (and More) at Build Time

Older iterations of this website used a third party JavaScript widget to show the number of GitHub Stars the project currently had. You can see it in action on the versioned docs for 0.7.1 (scroll to the bottom).

This was in fact the only <script> tag on the entire 11ty.dev web site and it was from a third party. Naturally, it needed to be annihilated.

Let’s change up our architecture to ruthlessly eliminate this client-side JavaScript.

Get the Stargazers Count from the GitHub API Jump to heading

Read more at the GitHub API documentation.

This is a bit different from our client-side implementation because this data is only updated as often as your build runs. This is implemented using a global JavaScript data file at _data/github.js.

Filename _data/github.js
const fetch = require("node-fetch");

module.exports = async function() {
console.log( "Fetching new github stargazers count…" );

// GitHub API: https://developer.github.com/v3/repos/#get
return fetch("https://api.github.com/repos/11ty/eleventy")
.then(res => res.json()) // node-fetch option to transform to json
.then(json => {
// prune the data to return only what we want
return {
stargazers: json.stargazers_count
};
});
};

Now in your templates you can output the stargazers count with:

Syntax Liquid, Nunjucks
{{ github.stargazers }} GitHub Stars

which outputs

1515 GitHub Stars

Bonus: I created a humanReadableNum filter) using the human-readable-numbers package to format the number.

More Examples Jump to heading

You can look in the footer of this page to see examples of this in use on this very web site. I used it for:

These all use the recommended caching mechanism described in the next section.

It is highly recommended to cache your API call data to the file system so that you aren’t making a ton of requests to an API with every build. Luckily, we have a Quick Tip on how to Cache your Data Requests!

Update Counts Daily Jump to heading

If you want to update these counts automatically every day, read Quick Tip #008—Trigger a Netlify Build Every Day with IFTTT.