How to display the last build date in Eleventy
- Published at
- Updated at
- Reading time
- 1min
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
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
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);
});
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 6 days ago.