{"id":1754,"date":"2019-09-29T16:05:15","date_gmt":"2019-09-29T08:05:15","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=1754"},"modified":"2020-05-12T13:36:25","modified_gmt":"2020-05-12T05:36:25","slug":"how-to-host-a-static-website-on-your-raspberry-pi-with-nginx-running-on-raspbian-buster-lite","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-host-a-static-website-on-your-raspberry-pi-with-nginx-running-on-raspbian-buster-lite\/","title":{"rendered":"How to host a static website on your Raspberry Pi with Nginx running on Raspbian Buster Lite"},"content":{"rendered":"<p>After you had understood HTML, CSS and JavaScript from <a href=\"https:\/\/click.linksynergy.com\/deeplink?id=qGQokmUY1xA&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fthe-web-developer-bootcamp%2F\" rel=\"noopener\" target=\"_blank\"> The Web Developer Bootcamp<\/a>, you can start to host a static website on an actual web server. <\/p>\n<p>If you had been the kind of fan who buy newly-launched Raspberry Pis, then you may find some lying around the house collecting dust.<\/p>\n<p>In this situation, why not use one of your Raspberry Pi to host something that you had just learnt?<\/p>\n<p>Given that, let's look at how you can host a static website on your Raspberry Pi with <a href=\"http:\/\/www.nginx.org\" rel=\"noopener\" target=\"_blank\">Nginx<\/a> running on Raspbian Buster Lite.<\/p>\n<h2>Recommended hardware list<\/h2>\n<p>In case you ask, we recommend using at least a Raspberry Pi 2B and later as the board. If you do not have a Raspberry Pi yet, you may want to consider getting the following items:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.amazon.com\/CanaKit-Raspberry-4GB-Basic-Kit\/dp\/B07TXKY4Z9\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=ee0bc12c3f4cdcf9d11b2736e813db35&language=en_US\" rel=\"noopener\" target=\"_blank\">CanaKit Raspberry Pi 4 Basic Kit 4GB<\/a><\/li>\n<li><a href=\"https:\/\/www.amazon.com\/SanDisk-128GB-Extreme-microSD-Adapter\/dp\/B07FCMKK5X\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=449c21149acf87d69f38abf28778dd6f&language=en_US\" rel=\"noopener\" target=\"_blank\">SanDisk 128GB Extreme microSDXC UHS-I Memory Card with Adapter<\/a><\/li>\n<li><a href=\"https:\/\/www.amazon.com\/dp\/B07WV9H1V4\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=2ba999d51cce65ad705ad8f2347cb079&language=en_US\" rel=\"noopener\" target=\"_blank\">ZkeeShop Magnetic Installation Acrylic Case for Raspberry Pi 4 Model B<\/a><\/li>\n<li><a href=\"https:\/\/www.amazon.com\/Ethernet-VANDESAIL-Gigabit-Network-Plated\/dp\/B013W0ARNY\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=2144de5a3a7469fc8587b1162b13a280&language=en_US\" rel=\"noopener\" target=\"_blank\">Gigabit Ethernet Cable<\/a> (If you want to connect your Pi to an Ethernet network)<\/li>\n<\/ul>\n<h2>Setup Raspbian Buster Lite on your Raspberry Pi<\/h2>\n<p>Once you had gathered you Raspberry Pi hardware, proceed to <a href=\"https:\/\/www.techcoil.com\/blog\/how-to-setup-raspbian-buster-lite-for-raspberry-pi-server-projects\/\" rel=\"noopener\" target=\"_blank\">setup Raspbian Buster Lite for Raspberry Pi server projects<\/a>.<\/p>\n<p>When you had done so, you would have setup the SSH connection to your Raspberry Pi. Given that, this tutorial will assume that you have a terminal window with an active SSH connection to your Raspberry Pi.<\/p>\n<p>In case you had not done so, start a terminal window and SSH into your Raspberry Pi. If your Raspberry Pi had <strong>192.168.1.114<\/strong> as its IP address, you will then enter the following command to SSH into your Raspberry Pi:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nssh pi@192.168.1.114\r\n<\/pre>\n<p>After you had entered the password that you had set (or <strong>raspberry<\/strong> if you did not change the default password), you will be able to configure your Raspberry Pi.<\/p>\n<h2>Install Nginx server on your Raspberry Pi<\/h2>\n<p>Once you had logged into your Raspberry Pi, install Nginx server with the following command:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsudo apt-get update\r\nsudo apt install nginx -y\r\n<\/pre>\n<p>When the commands had been executed successfully, enter the following command to check your Nginx installation:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsystemctl status nginx.service\r\n<\/pre>\n<p>If your Nginx had been installed properly, then you should see output similar to the following:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\n\u25cf nginx.service - A high performance web server and a reverse proxy server\r\n   Loaded: loaded (\/lib\/systemd\/system\/nginx.service; enabled; vendor preset: enabled)\r\n   Active: active (running) since Tue 2019-09-24 23:52:46 +08; 2min 23s ago\r\n     Docs: man:nginx(8)\r\n  Process: 520 ExecStartPre=\/usr\/sbin\/nginx -t -q -g daemon on; master_process on; (code=exited, status=0\/SUCCESS)\r\n  Process: 579 ExecStart=\/usr\/sbin\/nginx -g daemon on; master_process on; (code=exited, status=0\/SUCCESS)\r\n Main PID: 580 (nginx)\r\n    Tasks: 5 (limit: 4915)\r\n   Memory: 9.8M\r\n   CGroup: \/system.slice\/nginx.service\r\n           \u251c\u2500580 nginx: master process \/usr\/sbin\/nginx -g daemon on; master_process on;\r\n           \u251c\u2500581 nginx: worker process\r\n           \u251c\u2500582 nginx: worker process\r\n           \u251c\u2500583 nginx: worker process\r\n           \u2514\u2500584 nginx: worker process\r\n\r\nSep 24 23:52:45 raspberrypi systemd&#x5B;1]: Starting A high performance web server and a reverse proxy server...\r\nSep 24 23:52:46 raspberrypi systemd&#x5B;1]: Started A high performance web server and a reverse proxy server.\r\n<\/pre>\n<p>In addition to that, when you use your browser to access http:\/\/&lt;your_pi_ip_address&gt;\/, you should see the following screen. For example, I will see this the following screen if I enter <strong>http:\/\/192.168.1.114<\/strong> into my browser's location bar:<\/p>\n<p><img decoding=\"async\" width=\"579\" height=\"259\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/default-welcome-page-of-Nginx-1.14.2.gif\" alt=\"default welcome page of Nginx 1.14.2\" class=\"aligncenter size-full wp-image-1756\" \/><\/p>\n<h2>How to serve your static website regardless of which IP address or domain name is used to access your Nginx server on your Raspberry Pi<\/h2>\n<p>As I had mentioned in, <a href=\"https:\/\/www.techcoil.com\/blog\/understanding-the-default-nginx-virtual-host-or-server-configuration\/\" rel=\"noopener\" target=\"_blank\">understanding the default configuration of Nginx<\/a>, what you had seen earlier is the effect of the Nginx default configurations.<\/p>\n<p>Since the Nginx installation includes a Virtual Host configuration that handles HTTP requests directed to any IP address and domain name in the Location header, we can simply replace the contents in <code>\/var\/www\/html\/<\/code> directory with the static contents of our website. When we do so, we will have completed our objective of hosting a static website with our Raspberry Pi.<\/p>\n<h3>Hosting a sample resume as a static website on your Raspberry Pi<\/h3>\n<p>For example, I can simply dump the contents of <a href=\"https:\/\/github.com\/mnjul\/html-resume\" rel=\"noopener\" target=\"_blank\">html-resume<\/a> onto the <code>\/var\/www\/html\/<\/code> directory, I will be able access that static website with <strong>http:\/\/192.168.1.114\/resume.html<\/strong>. If you want that resume to appear when the browser hits <strong>http:\/\/192.168.1.114<\/strong>, simply change <strong>resume.html<\/strong> to <strong>index.html<\/strong>.<\/p>\n<p>In case you need it, these are the commands that you can run on your Raspberry Pi to host a sample resume as a static website:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\ncd \/var\/www\r\nsudo wget https:\/\/github.com\/mnjul\/html-resume\/archive\/master.zip\r\nsudo unzip master.zip\r\nsudo cp -r html-resume-master\/* html\r\nsudo rm master.zip\r\nsudo rm -r html-resume-master\r\nsudo mv html\/resume.html html\/index.html\r\n<\/pre>\n<p>When you access <strong>http:\/\/192.168.1.114<\/strong> this time, you should see the following screen:<\/p>\n<p><img decoding=\"async\" width=\"800\" height=\"958\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Chrome-accessing-sample-HTML-resume-hosted-as-static-website-on-Nginx-running-on-Raspberry-Pi.gif\" alt=\"Chrome accessing sample HTML resume hosted as static website on Nginx running on Raspberry Pi\" class=\"aligncenter size-full wp-image-1773\" \/><\/p>\n<h2>How to host multiple static websites with your Raspberry Pi's Nginx<\/h2>\n<p>So what if you want to host multiple static websites with your Raspberry Pi?<\/p>\n<h3>Prerequisites for hosting websites from home with your Raspberry Pi<\/h3>\n<p>As I had mentioned in <a href=\"https:\/\/www.techcoil.com\/blog\/how-to-host-multiple-websites-from-home\/\" rel=\"noopener\" target=\"_blank\">how to host multiple websites from home<\/a>, we can host multiple websites by allocating a domain name to each website.<\/p>\n<p>At the domain registrar, we will map the domain name to the public IP address that our home router gets from our Internet service provider. <\/p>\n<p>In addition to that, we will configure our home router to map port 80 (and 443) of the public address to the private address of our Raspberry Pi. For example, this is <a href=\"https:\/\/www.techcoil.com\/blog\/host-web-server-behind-linksys-ea7500-max-stream-ac1900-router\/\" rel=\"noopener\" target=\"_blank\">how you can configure a Linksys router to map port 80 and 443 of the public address to the private address of a web server<\/a>.<\/p>\n<h3>How does a HTTP server differentiates between HTTP requests directed at different host<\/h3>\n<p>Whenever a browser accesses a <a href=\"https:\/\/www.techcoil.com\/glossary\/http-server\/\" rel=\"noopener\" target=\"_blank\">HTTP server<\/a>, the host portion of the URL is included inside the Location header of the HTTP request that is sent to the server.<\/p>\n<p>For example, for <strong>http:\/\/www.techcoil.com\/about<\/strong>, the host portion is <strong>www.techcoil.com<\/strong>. Similarly, for  http:\/\/<strong>192.168.1.114<\/strong>\/resume.html, the host portion is <strong>192.168.1.114<\/strong>.<\/p>\n<p>When the HTTP server receives a HTTP request, it will look at the Location header to know which domain the HTTP request is designated for.<\/p>\n<p>In the case of Nginx, it will then check through its Virtual Host configurations to determine how to handle that request.<\/p>\n<h3>Configuring Nginx to differentiate each static website by domain names<\/h3>\n<p>Given these points, we can configure Nginx to serve files for multiple static websites by creating a Virtual Host entry for each domain.<\/p>\n<p>In order to do so:<\/p>\n<ul>\n<li>Create a separate directory to contain the static content of each website.<\/li>\n<li>Create a separate Nginx configuration file for each website.<\/li>\n<\/ul>\n<h4>Creating a separate directory to contain the static content of each website<\/h4>\n<p>We can create a separate directory to contain the static content of each website by running the <code>mkdir<\/code> command on our Raspbian Buster Lite. For example, if my domain name is <strong>anewdomainname.com<\/strong>, I will run the following command to create a directory to contain the static contents:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsudo mkdir \/var\/www\/anewdomainname.com\r\n<\/pre>\n<p>Be sure to replace <strong>anewdomainname.com<\/strong> with your own domain name.<\/p>\n<h4>Creating a separate Nginx configuration file for each website<\/h4>\n<p>Once we had created the directory to contain the static contents of a website, we then create a Nginx configuration file inside <strong>\/etc\/nginx\/sites-enabled<\/strong> directory.<\/p>\n<p>Given that, we first use <code>nano<\/code> to create the configuration file:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsudo nano \/etc\/nginx\/sites-enabled\/anewdomainname.com.conf\r\n<\/pre>\n<p>Once <code>nano<\/code> loads, we can then copy the Nginx configurations into the editor:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nserver {\r\n    server_name anewdomainname.com;\r\n    listen 80;\r\n    root \/var\/www\/anewdomainname.com;\r\n    index index.html;\r\n}\r\n<\/pre>\n<p>After you had replaced <strong>anewdomainname.com<\/strong> with your domain, press <strong>Ctrl-X<\/strong>, <strong>Enter<\/strong> and <strong>Y<\/strong> to save the changes.<\/p>\n<h4>Getting Nginx to take in your static website configurations<\/h4>\n<p>Once you had created the configurations and directories for your static websites, you can first test the configurations with the following command:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsudo nginx -t\r\n<\/pre>\n<p>When you see output similar to the following:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nnginx: the configuration file \/etc\/nginx\/nginx.conf syntax is ok\r\nnginx: configuration file \/etc\/nginx\/nginx.conf test is successful\r\n<\/pre>\n<p>you can then run the following command to restart your Nginx server:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nsudo systemctl restart nginx.service\r\n<\/pre>\n<p>Once your Nginx server had restarted, you will be able to access your static websites via their domain names.<\/p>\n<p><img decoding=\"async\" width=\"600\" height=\"900\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/How-to-host-a-static-website-on-your-Raspberry-Pi-with-Nginx-running-on-Raspbian-Buster-Lite.jpg\" alt=\"How to host a static website on your Raspberry Pi with Nginx running on Raspbian Buster Lite\" class=\"aligncenter size-full wp-image-1798\" \/><\/p>\n\n      <ul id=\"social-sharing-buttons-list\">\n        <li class=\"facebook\">\n          <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwp.me%2Fp245TQ-si\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n            <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Facebook.png\" alt=\"Facebook icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"twitter\">\n          <a href=\"https:\/\/twitter.com\/intent\/tweet?text=&url=https%3A%2F%2Fwp.me%2Fp245TQ-si&via=Techcoil_com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Twitter.png\" alt=\"Twitter icon\"> Tweet\n          <\/a>\n        <\/li>\n        <li class=\"linkedin\">\n          <a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=1&title=&url=https%3A%2F%2Fwp.me%2Fp245TQ-si&source=https:\/\/www.techcoil.com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/linkedin.png\" alt=\"Linkedin icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"pinterest\">\n          <a href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=https%3A%2F%2Fwww.techcoil.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1754&description=\" class=\"pin-it-button\" target=\"_blank\" role=\"button\" rel=\"nofollow\" count-layout=\"horizontal\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Pinterest.png\" alt=\"Pinterest icon\"> Save\n          <\/a>\n        <\/li>\n      <\/ul>\n    ","protected":false},"excerpt":{"rendered":"<p>After you had understood HTML, CSS and JavaScript from <a href=\"https:\/\/click.linksynergy.com\/deeplink?id=qGQokmUY1xA&#038;mid=39197&#038;murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fthe-web-developer-bootcamp%2F\" rel=\"noopener\" target=\"_blank\"> The Web Developer Bootcamp<\/a>, you can start to host a static website on an actual web server. <\/p>\n<p>If you had been the kind of fan who buy newly-launched Raspberry Pis, then you may find some lying around the house collecting dust.<\/p>\n<p>In this situation, why not use one of your Raspberry Pi to host something that you had just learnt?<\/p>\n<p>Given that, let&#8217;s look at how you can host a static website on your Raspberry Pi with <a href=\"http:\/\/www.nginx.org\" rel=\"noopener\" target=\"_blank\">Nginx<\/a> running on Raspbian Buster Lite.<\/p>\n","protected":false},"author":1,"featured_media":1773,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":""},"categories":[4],"tags":[225,240,412,678,438,453],"jetpack_featured_media_url":"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Chrome-accessing-sample-HTML-resume-hosted-as-static-website-on-Nginx-running-on-Raspberry-Pi.gif","jetpack_shortlink":"https:\/\/wp.me\/p245TQ-si","jetpack-related-posts":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/1754"}],"collection":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/comments?post=1754"}],"version-history":[{"count":0,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/1754\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media\/1773"}],"wp:attachment":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media?parent=1754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/categories?post=1754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/tags?post=1754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}