Tracking Estimated Website Carbon Emissions

Some Background Of How This Came To Be

Astro has quickly become my go-to for building and deploying sites that are fairly static. This was, however, my first foray into creating an Astro site with ‘dynamic islands’ for displaying interactive components for users.

The two primary interactive components are -

1. The Table on the Homepage
2. The chart(s) on the individual website’s page - checkout the Center for Disease Control’s site page here

The underlying stack for this project is -

• Astro
• GitHub Actions
• GitHub Pages
• Tailwind CSS / Shadcn UI / ReCharts

You may be thinking - where is the data store?. Well, I can assure you that data is being saved - just a little differently than what we’re used to. All data for this is being saved into a set of *.csv files. The data is collected 1x per day or 1x per week depending on the dataset (a subset of sites are 1x per day and 15,000+ sites).

I’ve been thinking more about the role that technology plays in carbon emissions. Specifically how a lot of the web has become bloated with 3rd party libraries, frameworks, and so on - when in reality, we need to keep the web simple - and the bytes being sent over the wire simple. Recently, data centers have become more efficient, but those gains from efficiency in the data centers (and to that extent edge compute locations) have been lost with how large the average website has become.

How much time did this take to launch?

Since I’ve really dialed in my processes with Astro and I kept the overall aim of the project pretty simple and set a time-boxed goal - it took only a few hours to get the initial release out there and then another couple of hours here and there tinkering around with adding additional routes or style updates.

Having this project shared on Twitter added a bit of responsibility with following thru on delivery.

Struggling Points

I remember trying to get the astro dynamic island to work and had a heck of a time. I slowed down and really read the docs to get a solid foundational understanding before being able to implement the recharts and other interactive features of the site.

Another area where I had struggled was getting the GitHub Pages to display at co2.ignitebright.com. DNS sometimes takes awhile, but this was a bit slower than I had thought - again, patience of just setting the config on the GitHub UI and stepping away allowed everything to propagate.

Limitations

Certainly, as with most technology, there are limitations to what this deployment system can / cannot do. This guide is geared around launching an Astro website.

What’s Next?

Honestly, I’m unsure. I set out to learn about how to leverage GitHub Actions / GitHub Pages a bit more. From here, I could see this evolving into a paid service where for $20 per year, you could track your websites Carbon Emission over time and offset it at the end of the year. Perhaps, more to come…