Creating a Green Website

Translations: DE

I have always believed in “leading by example,” so when it came time to build the website for my blog, I wanted to make it as eco-friendly as possible. This was the perfect chance to try out some new tools and frameworks that keep sustainability in mind. My goal? To create a website that scores high on all those eco-impact tests and proves that going green online is totally doable.

TL;DR: This blog post explores building an eco-friendly website by focusing on essential features, choosing green hosting, and using an efficient framework (Hugo). Tools like green-it Analysis and Ecograder help measure impact. While it takes extra effort, going green online is achievable with the right choices.

Defining the requirements

Like with any project, it is essential to figure out what you actually need versus what is just nice to have. A lot of the usual website features tend to ramp up energy use. Do I really need comments? Probably not—especially on a smaller site, they don’t add much. Do I need to edit the site online, or can I manage it locally? And what about multi-user editing? Often, we jump straight to solutions—like saying, “I want to use WordPress”—without fully thinking about whether they fit our real needs.

Here is what I decided were my (informal) requirements:

  • The site should let me blog about green IT and sustainable tech.
  • It should be responsive and mobile optimized.
  • It should score as high as possible on eco-impact tools. Minor issues that don’t affect the score too much are fine.
  • I need a decent selection of templates since design is not my strong suit.
  • The hosting should be environmentally friendly.

Let’s dive into how I tackled each of these!

Choosing a Green Hosting Provider

The first step was to find a green hosting provider. A quick way to start is with the Green Web Check. You can use it to check if a provider’s site is listed as green, which can give you an idea of their eco-friendliness. But keep in mind, it is just an indicator. Not all providers using green energy are listed yet, and I do not know, how far the verification process goes.

Once you have a provider in mind, dig a bit deeper—visit their site and see if their sustainability claims seem solid. For example, you can check out the provider I ended up choosing to see what green hosting can look like.

Choosing a Green Web Framework

The framework you choose can make a big difference in how energy-intensive your website is. Unfortunately, there is not a ton of research comparing frameworks yet, but there are some useful examples out there. For instance, green-coding.io did a comparison between Hugo and WordPress. It is kind of an “apples to oranges” comparison, since Hugo is a static site generator and WordPress is a dynamic, multi-user platform. But the takeaway is still clear—simplifying requirements can lead to significant energy savings.

Going with a static site generator does come with a few trade-offs—like no (easy) multi-user editing and limited options for built-in comments (you would need to integrate comments from another platform). But for my needs, these limitations weren’t deal-breakers. That said, setting up a static site with these generators does require a decent amount of IT knowledge, so it is not necessarily beginner-friendly.

Out of the many possible options, I tried out Hugo and Jekyll and ended up going with Hugo, mostly because I am more comfortable with Go than with Ruby. These tools don’t completely abstract away the languages they’re built on, so having familiarity with the language can be helpful.

Measuring

After deciding on Hugo, I went ahead and tried out some templates. I tested the resulting sites with these tools:

The choice of template did not have a big impact on the score. But, aiming for the best score possible, I chose the Mainroad theme. It had the features I wanted and scored well on the tests. Plus, it does not use Node.js, which is a dependency I would rather avoid.

Conclusion

The steps needed for a green website—such as green hosting, an energy-efficient framework, and regular measurement—do add extra effort to building a site and come with varying levels of difficulty. Choosing a host is fairly straightforward, but using a simpler framework can make things more challenging, and constant monitoring needs to be set up. My website is already quite energy-efficient in many ways, and I plan to keep improving it.

More research is needed to understand which web frameworks contribute most to energy-efficient websites. It is also important to explore how WordPress, as the most widely used platform, can be optimized for better energy efficiency.