This site is hosted on a Raspberry Pi

After looking into sustainable web design, I started thinking about my personal website's hosting and how I could improve its green credentials and also be able to store a lot more content.

This site you're on right now—is hosted on one of the original Raspberry Pis that were released back in 2012. It has minimal hardware and and a 4GB SD card which homes the operating system and the site's contents. It is powered using green energy supplied by our office in Barnsley and based on calculations, should cost around £5 a year in electricity.

If you want to do this for your own static site, you will need:

  • A Raspberry Pi of some sort with an SD card and power supply
  • An internet connection with a dedicated IP address
  • Your router's login details

Below is an overview of how I did this. I tried to keep configuration as minimal as possible as I do plan on upgrading the SD card in the future and thought that I may have to start from scratch unless I can find a way of cloning the current card to a much bigger one.

  • Setup Raspberry Pi with operating system and configure for use with ethernet
  • Forward ports 80 and 443 to the Raspberry Pi
  • Configure NGINX to point to my website's root directory
  • Deploy the site's files using Rsync

Setup Raspberry Pi with operating system and configure for use with ethernet

As this was an old Raspberry Pi and hadn't been used for a while, I reinstalled the operating system on the 4GB SD card so I had a fresh operating system.

I used Raspberry Pi's official imager to create a bootable SD card. Initially I tried this with a 32GB card but it kept failing and then wouldn't mount in my Mac correctly. I ended up abandoning it as I thought I may have bricked it or something.

Whilst creating the image you can set a username and password so you don't have to plug the RP into a keyboard and monitor. I wanted to be able to put the RP in our networking cabinet out of the way so it beneficial to set a username and password at this point.

Once connected to the network I fired up Angry IP Scanner to see what the IP address was. Once I had the IP address, I could login with SSH to start working on the RP. To do this open a terminal window and type the following. The user is what you set when using the RP Imager. The IP address after the @ symbol is the IP that you've just found using Angry IP Scanner.

ssh shrff@10.0.1.2

Whilst I was logged in I got the MAC address of the network device so I could use this in the next step.

ifconfig

You are looking for the address after ether line if you're using a wired connection.

Forward ports 80 and 443 to the Raspberry Pi

Your RP will need a local static/reserved IP address. Once your RP has a reserved IP, it will stop your router giving it to another device. This will help when we forward ports from the outside world to our RP. Each router manufacturer will have a way to assign a reserved IP address but generally use the MAC address.

To be visible to the outside world your router has to be configured to forward requests it receives to the right place which in our case is the RP. Your router acts the gateway between your local network (our office in this case) and the outside world (the internet)

Web pages are served by default on port 80 and port 443 (secure, HTTPS) so you'll need to open these ports and point them to the reserved IP address that you created in your router.

Configure NGINX to point to my website's root directory

Luckily the operating system I installed: Raspbian 11 (bullseye) has NGINX installed on it by default. This meant that all I had to do was edit the default configuration with my own domain name and I was ready to go. By default, the NGINX config will have the web root, where your site's files will sit, set as etc/var/www/html. I had permission problems at the next step trying to copy my site's files to this location so I opted for /home/shrff/ instead.

sudo systemctl restart nginx

Deploy the site's files using Rsync

As my site is static, all I now needed to do was copy the site's files to my home directory. I used the following command to do this:

rsync -av static/ shrff@10.0.1.2:/home/shrff/

If all has gone well, when you look at the public IP address, your ports have been forwarded correctly and your NGINX config is correct you should now see your site. If you're confident you have a static IP address you could theoretically change your domain's A-records to point at it.

James Sheriff

written by James Sheriff