How to host a static website on your Raspberry Pi 3 with Raspbian Stretch Lite and Nginx

When you want to host a static website as your personal portfolio, you can consider using a Raspberry Pi 3. In addition to having a small form factor, a Raspberry Pi 3 is a single board computer that does not take up too much energy to run 24-7.

In order to host a static website on Raspberry Pi 3, you will need an operating system and a web server. Given these points, this is how to host a static website on your Raspberry Pi 3 with Raspbian Stretch Lite as the operating system and Nginx as the web server.

Prerequisites to hosting a website at home

In order to host a website at home, there are some prerequisites to meet.

Your Raspberry Pi is accessible via a public IP address

When you connect your Raspberry Pi directly to your ISP internet modem via a RJ45 cable, your Raspberry Pi most probably will be given a public IP address.

However, if you connect your Raspberry Pi to a router, then you will need to configure port forwarding on your router. For example, this is how to configure Linksys EA7500 Max-Stream AC1900 router to host a web server.

For the purpose of this post, let's assume that you had connected your Raspberry Pi 3 to a router. In addition, your router will forward port 80 and 443 of the public IP address to the private IP address of your Raspberry Pi 3.

Your public IP address does not change and you have a domain name that maps to your public IP address

When you do not leave your Internet connection 24-7, chances are that your public IP address changes. In this situation, you will want to use dynamic DNS to map IP changes to a domain name. For example, you may want to buy a Namecheap domain and get your Raspberry Pi 3 to use Namecheap dynamic DNS to update your domain when your home’s public IP address changes.

For the purpose of simplicity, this post will assume that you want your static website to be accessible via a domain name - yourdomain.com.

Recommended hardware to build your Raspberry Pi 3 web server for hosting your static website

In case you are wondering what to buy for your Raspberry Pi 3 project, you can consider the following hardware list:

Setting up Raspbian Stretch Lite with SSH server enabled on your microSD card

Once you had gathered all the necessary hardware, proceed to setup Raspbian Stretch Lite with SSH server enabled on your microSD card. When you had done so, you will be able to SSH into your Raspbian Stretch Lite to perform further configurations.

Assembling the hardware for your Raspberry Pi 3 web server

Next, remove your microSD card from your SD card reader and insert it to the microSD card slot on the Raspberry Pi 3 board. Thereafter, proceed to assemble the Raspberry Pi 3 board to the Official Raspberry Pi case.

Starting the Raspbian Stretch Lite operating system

Following the assembly of your Raspberry Pi 3 board and Official Raspberry Pi case, connect one end of the RJ45 cable to the RJ45 port on your Raspberry Pi 3 board and the other end of the cable to one of the switch port of your home router. After that, connect your micro USB cable and supply power to your Raspberry Pi 3 board.

Changing default password, Locale and Timezone of your Raspbian Stretch Lite

There are a few configurations that we should perform on the first run of our Raspbian Stretch Lite. Therefore, proceed on to change the default password, Locale and Timezone of Raspbian Stretch Lite.

Installing Nginx on Raspbian Stretch Lite

Once you had preformed the configurations on the first run of your Raspbian Stretch Lite, proceed on to install Nginx. To install Nginx on Raspbian Stretch Lite, run the following command:

sudo apt-get update
sudo apt-get install nginx -y

After that, run the following command to verify that the installation was successful:

systemctl status nginx.service

At this point, as an indication that Nginx was installed successful, you should see output similar to the following:

● nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Tue 2018-10-23 11:46:37 UTC; 13s ago
Docs: man:nginx(8)
Process: 1478 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 1475 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 1479 (nginx)
CGroup: /system.slice/nginx.service
├─1479 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
├─1480 nginx: worker process
├─1481 nginx: worker process
├─1482 nginx: worker process
└─1483 nginx: worker process

Oct 23 11:46:37 raspberrypi systemd[1]: Starting A high performance web server and a reverse proxy server...
Oct 23 11:46:37 raspberrypi systemd[1]: Started A high performance web server and a reverse proxy server.

At this point in time, you will be able to view the sample static website that Nginx had included in the installation. When you enter the private IP address of your Raspberry Pi 3, you will see the following web page:

Nginx 1.10.3 welcome page

Configuring Nginx to serve the contents of your static website

The static page that you saw earlier is the result of the configuration file at /etc/nginx/sites-available/default. Nginx picked up the configuration file through a symbolic link at /etc/nginx/sites-enabled/default.

In order to configure Nginx to serve the contents of your static website, you need to add in some configurations inside the /etc/nginx/sites-enabled directory.

Given these points, first use nano to create your configuration file:

sudo nano /etc/nginx/sites-enabled/yourdomain.com.conf

When nano loads up, paste the following contents into the editor:

server {
server_name yourdomain.com www.yourdomain.com;
listen 80;
root /var/www/yourdomain.com;
index index.html;
}

After you had done so, type Ctrl-X followed by Y to save the configuration file.

Once you had saved the configuration file, restart Nginx by running the following command:

sudo systemctl restart nginx.service

When Nginx had restarted successfully, you can then put the contents of your static website inside the /var/www/yourdomain.com directory.

Whenever a user sends a HTTP request to http://yourdomain.com or http://www.yourdomain.com, /var/www/yourdomain.com/index.html will be returned as part of the HTTP response. Therefore, if you are using the configurations mentioned earlier, remember to include a index.html file inside the /var/www/yourdomain.com directory.

Buying the Raspberry Pi 3 hardware to host your own static website

If you do not have the Raspberry Pi 3 hardware mentioned in this post yet, you may want to purchase them from Amazon. Simply click on the button below to add the Raspberry Pi 3 hardware to your cart. You may remove anything that you already have or replace some of the hardware with other hardware.


About Clivant

Clivant a.k.a Chai Heng enjoys composing software and building systems to serve people. He owns techcoil.com and hopes that whatever he had written and built so far had benefited people. All views expressed belongs to him and are not representative of the company that he works/worked for.