Eleventy project logo

Eleventy Site Statistics

Print Friendly and PDF

Posted: May 10, 2023 | Categories: Eleventy

As I worked to migrate this site to Eleventy, one of the final touches I wanted to add was a statistics page that showed 'stuff' about the site. The page started simple at first, but then I started thinking about what I could do with 14 years of post data.

I knew I could add a collection to my site and use that to build a data set showing the number of posts per year as well as the average number of days between posts. At that point, I realized I could make an Eleventy plugin out of it so others could use it as well and this would give me an opportunity to learn how to make Eleventy plugins.

I published the plugin yesterday as Eleventy-Plugin-Post-Stats and added the complete Stats page to the site.

You can find the implementation of a page that uses all of the properties of the stats object in this repository's index.liquid file. Here's the source code for the page:

title: Site Statistics
description: A list of statistics about this site.
layout: generic

{% if collections.postStats.count > 0 %}
<strong>Post Count:</strong>
{{ collections.postStats.count | commaize }}</li>
<strong>Average days between posts:</strong>
{{ collections.postStats.avgDays | commaize }}</li>
<strong>First Post:</strong>
{{ collections.postStats.firstPostDate | readableDate }}
<strong>Last Post:</strong>
{{ collections.postStats.lastPostDate | readableDate }}
{{ buildinfo.buildCounter | commaize }}
<strong>Build Date:</strong>
{{ buildinfo.buildDateStr }}
<strong>Build Version:</strong>
{{ buildinfo.buildVersion }}
<a href="https://www.11ty.dev/" target="_blank">{{ eleventyinfo.generatorStr }}</a>

width: 350px;
text-align: center;
vertical-align: bottom;

.chart-container {
max-width: 1280px;

<th>Avg. Days Between Posts</th>
{% for year in collections.postStats.years %}
<td>{{ year.year }}</td>
<td>{{ year.count }}</td>
<td>{{ year.avgDays }}</td>
{% endfor %}

<div class="chart-container">
<canvas id="statsChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const ctx = document.getElementById('statsChart');
new Chart(ctx, {
data: {
labels: [{% for year in collections.postStats.years %}'{{ year.year }}'{%- unless forloop.last %},{% endunless %}{% endfor %}],
datasets: [
type: 'bar',
label: 'Number of Posts',
data: [{% for year in collections.postStats.years %}{{ year.count | commaize }}{%- unless forloop.last %},{% endunless %}{% endfor %}],
borderWidth: 1,
order: 1
}, {
type: 'line',
label: 'Average Number of Days Between Posts',
data: [{% for year in collections.postStats.years %}{{ year.avgDays | commaize }}{%- unless forloop.last %},{% endunless %}{% endfor %}],
lineTension: 0.8,
order: 2
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Number of Posts'
x: {
title: {
display: true,
text: 'Post Year'

{% else %}
<strong>No data to display</strong>

{% endif %}

I'm in the process of tightening up the table, but here's what the page looks like today:

Site Statistics Page

Next Post: Automating Eleventy Post Creation

Previous Post: Gadget Man

If this content helps you in some way, please consider buying me a coffee.

Header image: Eleventy Project Home Page.