Published at
Updated at
Reading time

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.

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

Thanks Hugo, for sharing this nifty trick!

Edit: Eleventy 1.0 comes with addGlobalData

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' }
Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 4 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles