Margo Holowicki

moon indicating dark mode
sun indicating light mode

How to Build a Free, Fast, and Simple Website Based on Sustainable Design Principles

August 25, 2019

Summary

  • I prefer Sustainable Design Principles,
  • but I like React so I use a Static Site Generator called Gatsby
  • and host my website for free on Google’s 100% renewables-powered, energy efficient databases.

Sustainable Design

I first learned about Sustainable Design when I was exploring the Chicago tech industry and attended a talk by Mightbytes designer, Tim Frick. As it turns out, the internet is releasing as much carbon as entire countries or the entire airline industry. If it were considered a country, it would rank 6th for carbon emmissions. This typically leads to less javascript and less complexity in the design process.

As a Solar industry professional, that sounded like something I for the most part could get down with and have since attended Sustainable UX conferences for 2018 and 2019. They’re a great resource and I encourage you to check them out.

Beating Javascript Bloat with Gatsby

Now, I said I could mostly get down with Sustainable Design. I have one exception: I have an addiction to Javascript and want to use it for everything. This is a problem because Javascript can be one of the most data-intensive computer languages.

To functionalize my addiction, I turned to a static site generator called Gatsby. Gatsby is a React based static site generator and runs locally or on a CPU to transform React JSX and MDX syntax into static HTML/CSS/Javascript. The result is a blazing fast, low data website that can be stored in the cloud.

The company recently received funding and has some great, beginner-friendly documentation. I love it because I can practice React without dealing with Webpack and other packages necessary to run it. I simply downloaded Gatsby and can code JSX, add component libraries, and get quick feedback on mistakes. I will likely go into the details of Gatsby Themes in order to better communicate how to use them, as they were freshly released this month.

Firebase Hosting on Google’s 100% Renewable & Energy Efficient Cloud

Did you know Google’s Cloud has ran on 100% renewable electricity since 2017? And that’s just the beginning of their contributions to sustainability efforts. They revolutionized the Solar industry with their early investment in solar farms as well as with efforts like Google Project Sunroof. The same can’t be said for their competitors, like Amazon.

Firebase hosting is dead simple if you have a grasp of plugging in Node.js applications, like Gatsby. I can push the public folder of my Gatsby produced static files to Firebase and have my website hosted for free.

I won’t go into how to set-up Firebase Hosting for static websites, since it’s been explained in the documentation. I will say SSL and routing through your DNS takes a little digging. My gp-to DNS, Namecheap, makes this simple and also has great documentation for how to hook up to different hosting providers.