How to host a static website on your Raspberry Pi Zero W with Raspbian Stretch Lite and Nginx web server
After you capture the Northern Lights with an entry level DSLR, you may want include them in your personal portfolio. Until you find the time to setup a content management system for your personal portfolio, you want to keep it as a static website.
At this point in time, you saw that Raspberry Pi Zero W and cover lying on the table. In addition to that, you have a spare micro USB charger that you used for charging your old Android phone.
Since you do not have any other use for these items, you decided to host your personal portfolio on that Raspberry Pi Zero W.
With this intention, this is how you can host a static website on your Raspberry Pi Zero W with Raspbian Stretch Lite and Nginx web server.
What do you need to setup a Raspberry Pi Zero W web server to host your static website?
Before diving into the details, let's look at what you will need to setup a Raspberry Pi Zero W web server to host your static website.
In order to host your static website on a Raspberry Pi W Zero web server, you will need the following:
- A domain name and the corresponding DNS / DDNS configurations to direct HTTP requests to your Raspberry Pi Zero W.
- The Raspberry Pi Zero W hardware.
- A copy of Raspbian Stretch Lite installed on a microSD card.
- A Nginx instance running on Raspbian Stretch Lite
Getting a domain name and configuring DNS / DDNS to direct HTTP requests to your Raspberry Pi
Before a user sees your website, he/she will type a domain name on a browser. Given that domain name, the browser then uses the Domain Name System to get an IP address. Once the browser has the IP address, it then sends HTTP requests to your HTTP server and build the web page based on the HTTP responses from the server.
In case you are getting a domain name for your web server on the Internet, you can consider Namecheap.
So why do I recommend Namecheap for hosting a Raspberry Pi Zero W Web server at home? This is because, you can get your Raspberry Pi Zero W to use Namecheap dynamic DNS to update your domain when your home’s public IP address changes.
When your Raspberry Pi Zero W sits behind a router, you will also need to forward port 80 and port 443 of your router to your Raspberry Pi. In case you need a reference, you can follow the tutorial on how to forward port 80 and port 443 on Linksys EA7500 Max-Stream AC1900 router.
Recommended Raspberry Pi hardware for your Raspberry Pi Zero W web server
When you do not yet have any Raspberry Pi Zero W yet, I will recommend that you host a static website on a Raspberry Pi 3 instead. However, if you still want to host your static website on a Raspberry Pi Zero W, you can consider getting the following hardware:
- CanaKit Raspberry Pi Zero W (Wireless) with Official Case and Power Supply
- SanDisk Ultra 32GB microSDHC UHS-I card with Adapter - 98MB/s U1 A1 - SDSQUAR-032G-GN6MA
Setup Raspbian Stretch Lite with remote configuration over WiFi on first boot
Since there is no RJ45 port on your Raspberry Pi Zero W, you will want it to connect to your home router on first boot. Therefore, proceed to setup Raspbian Stretch Lite with remote configuration over WiFi on first boot.
After you had done so, you will be able to SSH into your Raspbian Stretch Lite to perform further configurations.
Assemble your Raspberry Pi Zero W board with the official case
Next, remove your microSD card from your SD card reader and insert it to the microSD card slot on your Raspberry Pi Zero W board. After you had done so, assemble your Raspberry Pi Zero W board with the official case.
Starting the Raspbian Stretch Lite operating system on your Raspberry Pi Zero W
After you had assemble your Raspberry Pi Zero W board with the case, connect your micro USB cable to the board and supply power.
Be careful not to plug your cable into the wrong port. In case you need it, the following image shows where you should plug in your micro USB cable to supply power to your Raspberry Pi Zero W:
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
After you had preformed the configurations on the first run of your Raspbian Stretch Lite, proceed to install Nginx.
In order to install Nginx on Raspbian Stretch Lite, you need to run the following command:
sudo apt-get update sudo apt-get install nginx -y
When the commands had completed, run the following command to verify that the installation was successful:
systemctl status nginx.service
When Nginx is successfully installed, 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 Fri 2019-03-29 10:41:37 UTC; 15s 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 Mar 29 10:41:37 raspberrypi systemd[1]: Starting A high performance web server and a reverse proxy server... Mar 29 10:41:37 raspberrypi systemd[1]: Started A high performance web server and a reverse proxy server.
Given that Nginx is successfully installed, you will be able to view the default static website that Nginx serves out of the box. When you enter the private IP address of your Raspberry Pi Zero W, you will see the following web page:
Configuring Nginx to serve the contents of your static website
So why does Nginx serve the page that you saw earlier? That static page that you saw earlier is the result of the configuration file at /etc/nginx/sites-available/default. Since Nginx pick up configuration files from /etc/nginx/sites-enabled, there is a symbolic link at /etc/nginx/sites-enabled/default that links to the configuration file.
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. In addition, let's assume that you wish to host your static website at yourdomain.com.
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
After 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.
Summing it up
At this point in time, you will be able to host your static website on a Raspberry Pi Zero W. When you wish to host a dynamic website with PHP, this is how to deploy PHP applications on a Raspberry Pi LEMP stack.
Buying the Raspberry Pi Zero W hardware to host your static website
If you do not have the Raspberry Pi Zero W 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 Zero W hardware to your cart. You may remove anything that you already have or replace some of the hardware with other hardware.
Share
Tweet
Share
Save
