Title: How to build a Low-Tech website: Software & Hardware
Date: 2018-9-08
Category: solar server
Tags: solar power, static sites, energy optimization
Slug: solar-powered-server
Summary: A low tech website that optimizes web design and server hardware for minimal data, low energy and solar power.
Tags: solar power, static sites, energy optimization, web design
Slug: low-tech-website-howto
Summary: How to build a low tech website by optimizing web design, server settings and hardware.
Author: Roel Roscam Abbing
Status: draft
Status: published
[TOC]
@ -31,13 +31,13 @@ The webserver is running on [Armbian Stretch](https://www.armbian.com/olimex-lim
## Pelican Static Site & Design
The main change in the webdesign was to move from a dynamic website based on Typepad[^typepad] to a static site generated by [Pelican](https://blog.getpelican.com/). Static sites load faster and require less processing than dynamic websites because the pages are pre-generated and read off the disk, rather than being generated on every visit.[^static]
The main change in the webdesign was to move from a dynamic website based on Typepad[^typepad] to a static site generated by [Pelican](https://blog.getpelican.com/). Static sites load faster and require less processing than dynamic websites. This is because the pages are pre-generated and read off the disk, rather than being generated on every visit.[^static]
You can find the source code for 'solar', the Pelican theme we developed [here](https://github.com/lowtechmag/solar)
### Image compression
One of the main challenges was to reduce the overal size of the website. Particularly to try and reduce the size of each page to something less than 1MB . Since a large part of both the appeal and the weight of the magazine comes from the fact it is richly illustrated, this presented us with a particular challenge.
One of the main challenges was to reduce the overall size of the website. Particularly to try and reduce the size of each page to something less than 1MB . Since a large part of both the appeal and the weight of the magazine comes from the fact it is richly illustrated, this presented us with a particular challenge.
Image from the blog showing 19th century telephone switchboard operators, 159.5KB
@ -45,7 +45,7 @@ In order to reduce the size of the images, without diminishing their role in the
The same image but dithered with a 3 color palette, 36.5KB
This is a technique 'to create the illusion of "color depth" in images with a limited color palette'[^illusion]. It based on the print reporoduction technique called [halftoning](https://en.wikipedia.org/wiki/Halftone). Dithering, or digital half-toning[^digitalhalftone], was widely used in videogames and pixel art at a time when a limited amount of video memory constrained the available colors. In essence dithering relies on optical illusions to simulate more colors. These optical illusions are broken however by the distinct and visible patterns that the dithering algorithms generate.
This is a technique 'to create the illusion of "color depth" in images with a limited color palette'[^illusion]. It based on the print reproduction technique called [halftoning](https://en.wikipedia.org/wiki/Halftone). Dithering, or digital half-toning[^digitalhalftone], was widely used in videogames and pixel art at a time when a limited amount of video memory constrained the available colors. In essence dithering relies on optical illusions to simulate more colors. These optical illusions are broken however by the distinct and visible patterns that the dithering algorithms generate.
Dithered with a six tone palette, 76KB
@ -55,11 +55,11 @@ Our design instead celebrates the visible patterns introduced by the technique,
Dithered with an eleven tone palette, 110KB
We chose dithering not only for the compression but also for the aesthetic and reading experience. Converting the images to greyscale and then dithering them allows us to scale them in a visually attractive way to 100% of the viewport, despite their small sizes. This gives each article a visual consistency and provides the reader with pauzes in the long articles.
We chose dithering not only for the compression but also for the aesthetic and reading experience. Converting the images to grayscale and then dithering them allows us to scale them in a visually attractive way to 100% of the viewport, despite their small sizes. This gives each article a visual consistency and provides the reader with pauses in the long articles.
To automatically dither the images on the blog we wrote [a plugin for pelican](https://github.com/lowtechmag/solar-plugins) that converts all source images of the blog. The plugin is based on the [Python Pillow](https://pillow.readthedocs.io/en/5.2.x/#) imaging library and [hitherdither](https://github.com/hbldh/hitherdither), a dithering palette library by [Henrik Blidh](https://blog.hbldh.se/).
Using this custom plugin we reduced the total weight of the 623 images on the blog by 89% from 194.2MB to a mere 21.3MB.
Using this custom plug-in we reduced the total weight of the 623 images that are on the blog so far by 89%. From 194.2MB to a mere 21.3MB.
### Archiving and portability
@ -75,21 +75,21 @@ Increasing the uptime of the server to 99% on solar energy means increasing the
Rather than that we opted for a low-tech approach that accepts being off-line during longer stretches of cloudy weather. However, we wanted to provide the reader with off-line reading options. Our primary method of doing so currently is by providing an [RSS feed containing all the articles and images on the site](https://solar.lowtechmagazine.com/feeds/all.rss.xml). In the future we will explore other means of providing off-line reading of the magazine.
 Mmost browsers preview only the article titles and summaries of the RSS feed. In fact the feed contains the full articles. Once you add the feed to your favorite reader, it will download the full articles that you can read at any given time.
 Most browsers preview only the article titles and summaries of the RSS feed. In fact the feed contains the full articles. Once you add the feed to your favorite reader, it will download the full articles that you can read at any given time.
## Material Server
> "[...] the minimal file-based website is contrary to a cloud mentality, where the material circumstances of the hardware and hosting location are made irrelevant (for the cloud/vps customer) meaning that any 'service' can be 'deployed', 'scaled' 'migrated' etc. Our approach instead informs what can be hosted based on the material circumstances of the server."[^varia]
One of the page's fundamental design elements is to stress the materiality of the webserver. In web design there is a clear distinction between 'front-end', the visual and content side of the website and the 'back-end', the infrastructure it runs on top. Outside of professional circles, the material conditions of the web or the internet's infrastructure are rarely discussed. This has become especially the case with cloud computing as the dominant paradigm, as resources are taken for granted or even completely virtualized.
One of the page's fundamental design elements is to stress the materiality of the webserver. In web design there is a clear distinction between 'front-end', the visual and content side of the website and the 'back-end', the infrastructure it runs on top. Outside of professional circles, the material conditions of the web or the internet's infrastructure are rarely discussed. This has become especially the case with cloud computing as the dominant paradigm, as resources are taken for granted or even completely virtualised.
A low-tech website means this distinction between front-end and back-end needs to dissapear as choices on the front-end necessarily impact what happens on the back-end and vice-versa. Pretending it doesn't usually leads to more energy usage.
A low-tech website means this distinction between front-end and back-end needs to disappear as choices on the front-end necessarily impact what happens on the back-end and vice-versa. Ignoring this connection usually leads to more energy usage.
An increase in traffic for example will have an impact on the amount of energy the server uses, just as a heavy or badly designed website will. Part of [solar.lowtechmagazine.com](solar.lowtechmagazine.com)'s design is to give the visitor an insight in the amount of power consumed and the potential (un)availability of the page in the coming days, based on current power usage and forecasts of the weather.
An increase in traffic for example will have an impact on the amount of energy the server uses, just as a heavy or badly designed website will. Part of [solar.lowtechmagazine.com](solar.lowtechmagazine.com)'s design aims to give the visitor an insight in the amount of power consumed and the potential (un)availability of the page in the coming days, based on current power usage and forecasts of the weather.
The power statistics can actually be queried from the server hardware. More on that [below](#server). To make the statistics available to the web site we wrote [a bash script](https://github.com/lowtechmag/materialserver) that exposes them as JSON in the webroot.
To activate it there is a `cron` entry that runs the script every minute and writes it into the web directory:
To activate this feature there is a `cron` entry that runs the script every minute and writes it into the web directory:
@ -111,7 +111,7 @@ To test some of the assumed optimizations we've done some measurements using a f
`CW` = [How To Downsize A Transport Network: Chinese Wheelbarrows](https://solar.lowtechmagazine.com/2011/12/the-chinese-wheelbarrow/), 996.8KB, 23 images
For this test the pages which are hosted in Barcelona have been loaded from a machine in the Netherlands. Times are all averages of 3 measurements.
For this test the pages which are hosted in Barcelona have been loaded from a machine in the Netherlands. The indicated times are all the averages of 3 measurements.
### Compression of transmitted data
@ -139,14 +139,14 @@ A comparison of the amount of data sent with gzip compression enabled or disable
### Caching of static resources
Caching is a technique in which some of the site's resources, such as style sheets and images, are provided with additional headers thta tell the visitor's browser to save a local copy of those files. This ensures that the next time that visitor loads the same page, the files are loaded from the local cache rather than being transmitted over the network again. This not only reduces the time to load the entire page, but also lowers resource usage both on the network and on our server.
Caching is a technique in which some of the site's resources, such as style sheets and images, are provided with additional headers thta tell the visitor's browser to save a local copy of those files. This ensures that the next time they visit the same page, the files are loaded from the local cache rather than being transmitted over the network again. This not only reduces the time to load the entire page, but also lowers resource usage both on the network and on our server.
The common practice is to cache everything except the HTML, so that when the user loads the web page again the HTML will notify the browser of all the changes. However since lowtechmagezine.com publishes only 12 articles per year, we decided to also cache HTML. The cache is set for 7 days, meaning it is only after a week that the user's browser will automatically check for new content. Only for the front and about pages this behaviour is disabled.
The common practice is to cache everything except the HTML, so that when the user loads the web page again the HTML will notify the browser of all the changes. However since lowtechmagezine.com publishes only 12 articles per year, we decided to also cache HTML. The cache is set for one day, meaning it is only after a week that the user's browser will automatically check for new content. Only for the front and about pages this behaviour is disabled.
:::console
map $sent_http_content_type $expires {
default off;
text/html 7d;
text/html 1d;
text/css max;
application/javascript max;
~image/ max;
@ -177,7 +177,7 @@ In case you want to force the browser to load cached resources over the network
### HTTP2, a more efficient hyper text transfer protocol.
Another optimization is the use of [HTTP2](https://http2.github.io/) over HTTP/1.1. This is a relatively recent protocol that increases the transport speed of the data. This increase is the result of HTTP2 compressing the packet data headers and multiplexing multiple requests into a single TCP connection. To summarize, it has less data overhead and needs to opens less connections between the server and the browser.
Another optimization is the use of [HTTP2](https://http2.github.io/) over HTTP/1.1. This is a relatively recent protocol that increases the transport speed of the data. This increase is the result of HTTP2 compressing the packet data headers and multiplexing multiple requests into a single TCP connection. In other words, it produces less overhead data and needs to opens less connections between the server and the browser.
The effect of this is most notable when the browser needs to do a lot of different requests, since these can all be fit into a single connection. In our case that specifically means that articles with more images will load slightly faster over HTTP2 than over HTTP/1.1.
@ -202,7 +202,7 @@ It is enabled at the start of the server directive:
Even though the website has no dynamic functionality like login forms, we have also implemented SSL to provide Transport Layer Security. We do this mostly to improve page rankings in search engines.
There is something to be said to support both HTTP and HTTPS versions of the website but in our case that would mean more redirects or maintaining two versions of the website.
There is something to be said in favour of supporting both HTTP and HTTPS versions of the website but in our case that would mean more redirects or maintaining two versions of the website.
For this reason we redirect all our traffic to HTTPS via the following server directive:
@ -223,7 +223,7 @@ Then we've set up SSL with the following tweaks:
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 180m;
SSL sessions only expire after three hours meaning that while someone browses the website, they don't need to renegotiate a new SSL session all the time:
SSL sessions only expire after three hours meaning that while someone browses the website, they don't need to renegotiate a new SSL session during this period:
:::console
# Enable server-side protection against BEAST attacks
@ -251,13 +251,13 @@ We enable OCSP stapling which is quick way in which browsers can check whether t
resolver 87.98.175.85 193.183.98.66 valid=300s;
resolver_timeout 5s;
Last but not least, we set change the size of the SSL buffer to increase to so-called 'Time To First Byte'[^TTFB] which essentially shortens the time between a click and things changing on the screen:
Last but not least, we set change the size of the SSL buffer to increase to so-called 'Time To First Byte'[^TTFB] which shortens the amount of time between passing between a click and elements changing on the screen:
:::console
# Lower the buffer size to increase TTFB
ssl_buffer_size 4k;
These SSL tweaks are heavily indebted to these two articles by [Bjorn Johansen](https://bjornjohansen.no/optimizing-https-nginx) and [Hayden James](https://haydenjames.io/nginx-tuning-tips-tls-ssl-https-ttfb-latency/)
The above SSL tweaks are heavily indebted to these two articles by [Bjorn Johansen](https://bjornjohansen.no/optimizing-https-nginx) and [Hayden James](https://haydenjames.io/nginx-tuning-tips-tls-ssl-https-ttfb-latency/)
### Setting up LetsEncrypt for HTTPS
@ -408,29 +408,21 @@ We chose it because of the quality of the (open source) hardware[^olimex], the l
This chip makes it possible to query power statistics such as current voltage and amperage both from the DC-barrel jack connection and the battery. The maintainers of [Armbian](https://www.armbian.com/olimex-lime-2/) exposed these statistics via `sysfs` bindings in their OS.
In addition to the power statistics the power chip can charge and discharge a Lithium Polimer battery and automatically switch between the battery and DC-barrel connector. This means the battery can then act as an uninterruptable power supply, which helps prevent sudden shutdowns. The LiPo battery used has a capacity of 6600mAh which is about 24 Watt hour.
The server operating system all runs on an SD-card. Not only are these low-powered but also much faster than hard drives. We use high speed Class 10 16GB mirco-sd card. A 16GB card is actually a bit of an overkill considering the operating system is around 1GB and the website a mere 30MB, but for the price it doesn't make sense to buy high-performance cards any smaller.
### Solar setup
The power source for this server is a 50W solar panel. This panel is connected to a generic PWM solar charge controller with an additional USB output. The charge controller operates a 12v lead-acid battery with a nominal capacity of 86Wh.
To prevent deep-discharging and use the 'metered' LiPo battery as much as possible, the solar charge controller has a cut-in voltage of 12.9v and cut-off voltage of 12.6v. This voltage controls the supply voltage over the USB-port to the Olimex.
The server thus is powered in turn either via the DC-barrel jack connector (which is connected via a Barrel-To-USB cable to the solar charge controller) or the LiPo battery in case there is no sunlight.
In addition to the power statistics the power chip can charge and discharge a Lithium Polimer battery and automatically switch between the battery and DC-barrel connector. This means the battery can then act as an uninterruptible power supply, which helps prevent sudden shutdowns. The LiPo battery used has a capacity of 6600mAh which is about 24 Watt hour.
This is not an optimal situation yet and we're looking to build a custom circuit to measure the voltage of the lead acid battery.
The server operating system all runs on an SD-card. Not only are these low-powered but also much faster than hard drives. We use high speed Class 10 16GB mirco-sd card. A 16GB card is actually a bit of an overkill considering the operating system is around 1GB and the website a mere 30MB, but considering the price it doesn't make sense to buy any smaller high-performance cards.
### Network
The server gets it's internet access through the existing connection of the home office in Barcelona. This connection is a 100mbit consumer fiber connection with a static IP-adress. Having fiber itself is not necessary, especially if you keep your data footprint small, but a fixed IP adress is very handy.
The server gets it's internet access through the existing connection of the home office in Barcelona. This connection is a 100mbit consumer fiber connection with a static IP-adress.
The router is a standard consumer router that came with the internet contract. To make the website available, some settings in the router's firewall had to be changed. With a process called 'port forwarding', the following ports had to be forwarded between the external network and the internal one:
The fiber connection itself is not necessary, especially if you keep your data footprint small, but a fixed IP adress is very handy.
The router is a standard consumer router that came with the internet contract. To make the website available, some settings in the router's firewall had to be changed.
Using a process called 'port forwarding', the following ports had to be forwarded between the external network and the server's local IP address:
Port 80 to 80 for HTTP
Port 443 to 443 for HTTPS
@ -439,23 +431,32 @@ The router is a standard consumer router that came with the internet contract. T
# Room for improvements?
### OS Optimization
While the Armbian operating system has all kinds of optimizations for running on a SoC, there probably are still many tweaks that can be made to lower the energy usage. Optimizations such as disabling the USB-hub via the software. Some tips or insights into this are greatly appreciated!
While the Armbian operating system has all kinds of optimizations for running on a SoC, there probably are still many tweaks that can be made to lower the energy usage.
For example energy savings from disabling some of the hardware such as the the USB-hub? Some tips or insights into this are greatly appreciated!
### Image dithering
We're looking for suggestions how to further compress the images while maintaining this visual quality. We know PNGs are in theory not optimal for representing images on the web, even though they let us limit the color palette to save bandwidth and produce very crisp dithered images. We've found that saving them as JPEG after dithering in fact increases the file size but perhaps other file formats exist.
We're looking for suggestions how to further compress the images while maintaining this visual quality. We know PNGs are in theory not optimal for representing images on the web, even though they let us limit the color palette to save bandwidth and produce very crisp dithered images.
We've found that saving them as JPEG after dithering in fact increases the file size but perhaps other file formats exist that give is similar quality but have a lighter footprint.
### Sensible comments on static sites
Dynamic content such as comments are in theory incompatible with a static site, yet at the same time they are a big part of the community of knowledge around lowtechmagazine.com. The comment box under each article is widely used, but in fact e-mail is equally used (often the comments are then added to the article by the author after moderating).
Dynamic content such as comments are in theory incompatible with a static site.
There are some plugins such as Bernhard Scheirle's ['Pelican Comment System'](https://github.com/getpelican/pelican-plugins/tree/master/pelican_comment_system) but these we haven't tested.
At the same time they are a big part of the community of knowledge around lowtechmagazine.com.
The comment box under each article on that site is widely used, but e-mail is equally used (often the comments are then added to the article by the author after moderating).
There are some plugins that might address this such as Bernhard Scheirle's ['Pelican Comment System'](https://github.com/getpelican/pelican-plugins/tree/master/pelican_comment_system) but these we haven't tested.
### SSL & Legacy browsers
An open question remains: In what a way would it be possible to further extend for support older machines and browsers without comprimising on security by using deprecated cyphers? Should we maintain both HTTP and HTTPS sites?
An open question remains: In what a way would it be possible to further extend the support for older machines and browsers without comprimising on security by using deprecated ciphers? Should we maintain both HTTP and HTTPS versions of the site?
# Donations
As is mentioned on the ['donate'](https://solar.lowtechmagazine.com/donate/) page of the site, advertising trackers are incompatible with the new web site design and we really want to keep Low-Tech Magazine tracker free and sustainable so if you enjoy our work or find our public research useful please consider donating donating.
As is mentioned on the ['donate'](https://solar.lowtechmagazine.com/donate/) page of the site, advertising trackers are incompatible with the new web site design and we really want to keep Low-Tech Magazine tracker free and sustainable so if you enjoy our work or find our public research useful please consider donating.
