How to display the last build date in Eleventy

I came across a nifty eleventy trick shared by Hugo Giraudel. They shared that it only takes a few lines of JavaScript to display the time when an eleventy site was generated. The implementation you find in this site's footer took me two minutes. 🎉

One thing that amazes me about eleventy is its flexible data layer. There are multiple ways to feed the build process with data to display. The options range from static JSON files to promises-based JavaScript functions.

For this site, I use a config.js data file that holds a lot of configuration and now it includes a builtAt field.

// config.js
module.exports = {
  // bunch of other stuff
  // ...
  builtAt: new Date().toLocaleString(),
};

In my templates (I use Nunjucks), I can now access the config.js data to display when the site was built.

<p>
  This site was rebuilt at <strong>{{config.builtAt}}</strong>using the CEN stack
</p>

Thanks Hugo, for sharing this nifty trick!

Eleventy's first major release includes the addGlobalData method. And as Raymond Camden describes, it's a perfect util function to display the last build's timestamp.

eleventyConfig.addGlobalData('generated', () => {
  let now = new Date();
  return new Intl.DateTimeFormat(
    'en-US', { dateStyle: 'full', timeStyle: 'long' }
  ).format(now);
});