{"id":1504,"date":"2019-03-30T12:13:20","date_gmt":"2019-03-30T04:13:20","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=1504"},"modified":"2020-05-12T10:33:59","modified_gmt":"2020-05-12T02:33:59","slug":"how-to-host-a-static-website-on-your-raspberry-pi-zero-w-with-raspbian-stretch-lite-and-nginx-web-server","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-host-a-static-website-on-your-raspberry-pi-zero-w-with-raspbian-stretch-lite-and-nginx-web-server\/","title":{"rendered":"How to host a static website on your Raspberry Pi Zero W with Raspbian Stretch Lite and Nginx web server"},"content":{"rendered":"<p>After you <a href=\"https:\/\/www.techcoil.com\/blog\/how-to-capture-the-northern-lights-with-an-entry-level-dslr\/\" rel=\"noopener\" target=\"_blank\">capture the Northern Lights with an entry level DSLR<\/a>, 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 <a href=\"https:\/\/www.techcoil.com\/glossary\/static-website\/\" rel=\"noopener\" target=\"_blank\">static website<\/a>. <\/p>\n<p>At this point in time, you saw that <a href=\"https:\/\/www.amazon.com\/Raspberry-Zero-Argon-Forty-Barebones\/dp\/B075FPYVTD\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=e85667358cbaace3abb541a748143854&language=en_US\" rel=\"noopener\" target=\"_blank\">Raspberry Pi Zero W and cover<\/a> lying on the table. In addition to that, you have a spare <a href=\"https:\/\/www.amazon.com\/Travel-Charger-Adapter-Samsung-Galaxy\/dp\/B0117O020U\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=fd8291ff961fda480c4d8aa71cbe0a68&language=en_US\" rel=\"noopener\" target=\"_blank\">micro USB charger<\/a> that you used for charging your old Android phone. <\/p>\n<p>Since you do not have any other use for these items, you decided to host your personal portfolio on that Raspberry Pi Zero W. <\/p>\n<p>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.<\/p>\n<h2>What do you need to setup a Raspberry Pi Zero W web server to host your static website?<\/h2>\n<p>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. <\/p>\n<p>In order to host your static website on a Raspberry Pi W Zero web server, you will need the following:<\/p>\n<ul>\n<li>A domain name and the corresponding DNS \/ DDNS configurations to direct HTTP requests to your Raspberry Pi Zero W.<\/li>\n<li>The Raspberry Pi Zero W hardware.<\/li>\n<li>A copy of Raspbian Stretch Lite installed on a microSD card.<\/li>\n<li>A Nginx instance running on Raspbian Stretch Lite<\/li>\n<\/ul>\n<h2>Getting a domain name and configuring DNS \/ DDNS to direct HTTP requests to your Raspberry Pi<\/h2>\n<p>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 <a href=\"https:\/\/www.techcoil.com\/glossary\/http-server\/\" rel=\"noopener\" target=\"_blank\">HTTP server<\/a> and build the web page based on the HTTP responses from the server.<\/p>\n<p>In case you are <a href=\"https:\/\/namecheap.pxf.io\/c\/1303251\/386170\/5618?u=https%3A%2F%2Fwww.namecheap.com%2Fdomains%2Fdomain-name-search.aspx\" rel=\"noopener\" target=\"_blank\">getting a domain name<\/a> for your web server on the Internet, you can consider <a href=\"https:\/\/namecheap.pxf.io\/c\/1303251\/386170\/5618?u=https%3A%2F%2Fwww.namecheap.com\" rel=\"noopener\" target=\"_blank\">Namecheap<\/a>.<\/p>\n<p>So <a href=\"https:\/\/www.techcoil.com\/blog\/why-namecheap-is-the-best-domain-name-registrar-for-hosting-your-web-server-at-home\/\" rel=\"noopener\" target=\"_blank\">why do I recommend Namecheap for hosting a Raspberry Pi Zero W Web server at home<\/a>? This is because, you can <a href=\"https:\/\/www.techcoil.com\/blog\/how-to-get-your-raspberry-pi-3-to-use-namecheap-dynamic-dns-to-update-your-domain-when-your-homes-public-ip-address-changes\/\" rel=\"noopener\" target=\"_blank\">get your Raspberry Pi Zero W to use Namecheap dynamic DNS to update your domain when your home\u2019s public IP address changes<\/a>.<\/p>\n<p>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 <a href=\"https:\/\/www.techcoil.com\/blog\/host-web-server-behind-linksys-ea7500-max-stream-ac1900-router\/\" rel=\"noopener\" target=\"_blank\">follow the tutorial on how to forward port 80 and port 443 on Linksys EA7500 Max-Stream AC1900 router<\/a>.<\/p>\n<h2>Recommended Raspberry Pi hardware for your Raspberry Pi Zero W web server<\/h2>\n<p>When you do not yet have any Raspberry Pi Zero W yet, I will recommend that you <a href=\"https:\/\/www.techcoil.com\/blog\/how-to-host-a-static-website-on-your-raspberry-pi-3-with-raspbian-stretch-lite-and-nginx\/\" rel=\"noopener\" target=\"_blank\">host a static website on a Raspberry Pi 3<\/a> instead. However, if you still want to host your static website on a Raspberry Pi Zero W, you can consider getting the following hardware:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.amazon.com\/CanaKit-Raspberry-Wireless-Official-Supply\/dp\/B071L2ZQZX\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=c980686107bbad7b407edf12e62db1f9&language=en_US\" rel=\"noopener\" target=\"_blank\">CanaKit Raspberry Pi Zero W (Wireless) with Official Case and Power Supply<\/a><\/li>\n<li><a href=\"https:\/\/www.amazon.com\/SanDisk-Ultra-microSDXC-Memory-Adapter\/dp\/B073JWXGNT\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=51fb65ad39bd62a847e332f2540277b2&language=en_US\" rel=\"noopener\" target=\"_blank\">SanDisk Ultra 32GB microSDHC UHS-I card with Adapter - 98MB\/s U1 A1 - SDSQUAR-032G-GN6MA<\/a><\/li>\n<\/ul>\n<h2>Setup Raspbian Stretch Lite with remote configuration over WiFi on first boot<\/h2>\n<p>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 <a href=\"https:\/\/www.techcoil.com\/blog\/how-to-setup-raspbian-stretch-lite-with-remote-configuration-over-wifi-on-first-boot\/\" rel=\"noopener\" target=\"_blank\">setup Raspbian Stretch Lite with remote configuration over WiFi on first boot<\/a>. <\/p>\n<p>After you had done so, you will be able to SSH into your Raspbian Stretch Lite to perform further configurations.<\/p>\n<h2>Assemble your Raspberry Pi Zero W board with the official case<\/h2>\n<p>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.<\/p>\n<h2>Starting the Raspbian Stretch Lite operating system on your Raspberry Pi Zero W<\/h2>\n<p>After you had assemble your Raspberry Pi Zero W board with the case, connect your micro USB cable to the board and supply power. <\/p>\n<p><strong>Be careful not to plug your cable into the wrong port<\/strong>. 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:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Raspberry-Pi-Zero-W-with-micro-USB-cable-plugged-into-power-port.jpg\" alt=\"Raspberry Pi Zero W with micro USB cable plugged into power port\" \/> <\/p>\n<h2>Changing default password, Locale and Timezone of your Raspbian Stretch Lite<\/h2>\n<p>There are a few configurations that we should perform on the first run of our Raspbian Stretch Lite. Therefore, proceed on to <a href=\"https:\/\/www.techcoil.com\/blog\/set-of-configurations-to-perform-on-the-first-run-of-your-raspbian-stretch-lite\/\" rel=\"noopener\" target=\"_blank\">change the default password, Locale and Timezone of Raspbian Stretch Lite<\/a>.<\/p>\n<h2>Installing Nginx on Raspbian Stretch Lite<\/h2>\n<p>After you had preformed the configurations on the first run of your Raspbian Stretch Lite, proceed to install Nginx. <\/p>\n<p>In order to install Nginx on Raspbian Stretch Lite, you need to run the following command:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsudo apt-get update\r\nsudo apt-get install nginx -y\r\n<\/pre>\n<p>When the commands had completed, run the following command to verify that the installation was successful:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsystemctl status nginx.service\r\n<\/pre>\n<p>When Nginx is successfully installed, 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\nLoaded: loaded (\/lib\/systemd\/system\/nginx.service; enabled; vendor preset: enabled)\r\nActive: active (running) since Fri 2019-03-29 10:41:37 UTC; 15s ago\r\nDocs: man:nginx(8)\r\nProcess: 1478 ExecStart=\/usr\/sbin\/nginx -g daemon on; master_process on; (code=exited, status=0\/SUCCESS)\r\nProcess: 1475 ExecStartPre=\/usr\/sbin\/nginx -t -q -g daemon on; master_process on; (code=exited, status=0\/SUCCESS)\r\nMain PID: 1479 (nginx)\r\nCGroup: \/system.slice\/nginx.service\r\n\u251c\u25001479 nginx: master process \/usr\/sbin\/nginx -g daemon on; master_process on;\r\n\u251c\u25001480 nginx: worker process\r\n\u251c\u25001481 nginx: worker process\r\n\u251c\u25001482 nginx: worker process\r\n\u2514\u25001483 nginx: worker process\r\n\r\nMar 29 10:41:37 raspberrypi systemd&#x5B;1]: Starting A high performance web server and a reverse proxy server...\r\nMar 29 10:41:37 raspberrypi systemd&#x5B;1]: Started A high performance web server and a reverse proxy server.\r\n<\/pre>\n<p>Given that Nginx is successfully installed, you will be able to view the <a href=\"https:\/\/www.techcoil.com\/blog\/understanding-the-default-nginx-virtual-host-or-server-configuration\/\" rel=\"noopener\" target=\"_blank\">default static website that Nginx serves out of the box<\/a>. When you enter the private IP address of your Raspberry Pi Zero W, you will see the following web page:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Nginx-1.10.3-welcome-page.gif\" alt=\"Nginx 1.10.3 welcome page\"><\/p>\n<h2>Configuring Nginx to serve the contents of your static website<\/h2>\n<p>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 <code>\/etc\/nginx\/sites-available\/default<\/code>. Since Nginx pick up configuration files from <code>\/etc\/nginx\/sites-enabled<\/code>, there is a symbolic link at <code>\/etc\/nginx\/sites-enabled\/default<\/code> that links to the configuration file.<\/p>\n<p>In order to <a href=\"https:\/\/www.techcoil.com\/blog\/configuring-nginx-to-serve-files-for-a-static-website\/\" rel=\"noopener\" target=\"_blank\">configure Nginx to serve the contents of your static website<\/a>, you need to add in some configurations inside the <code>\/etc\/nginx\/sites-enabled<\/code> directory. In addition, let's assume that you wish to host your static website at <code>yourdomain.com<\/code>.<\/p>\n<p>Given these points, first use <code>nano<\/code> to create your configuration file:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsudo nano \/etc\/nginx\/sites-enabled\/yourdomain.com.conf\r\n<\/pre>\n<p>When <code>nano<\/code> loads up, paste the following contents into the editor:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nserver {\r\n        server_name yourdomain.com www.yourdomain.com;\r\n        listen 80;\r\n        root \/var\/www\/yourdomain.com;\r\n        index index.html;\r\n}\r\n<\/pre>\n<p>After you had done so, type <strong>Ctrl-X<\/strong> followed by <strong>Y<\/strong> to save the configuration file.<\/p>\n<p>Once you had saved the configuration file, restart Nginx by running the following command:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsudo systemctl restart nginx.service\r\n<\/pre>\n<p>After Nginx had restarted successfully, you can then put the contents of your static website inside the <code>\/var\/www\/yourdomain.com<\/code> directory.<\/p>\n<p>Whenever a user sends a <a href=\"https:\/\/www.techcoil.com\/glossary\/http-request\/\" rel=\"noopener\" target=\"_blank\">HTTP request<\/a> to <code>http:\/\/yourdomain.com<\/code> or <code>http:\/\/www.yourdomain.com<\/code>, <code>\/var\/www\/yourdomain.com\/index.html<\/code> will be returned as part of the <a href=\"https:\/\/www.techcoil.com\/glossary\/http-response\/\" rel=\"noopener\" target=\"_blank\">HTTP response<\/a>. Therefore, if you are using the configurations mentioned earlier, remember to include a <code>index.html<\/code> file inside the <code>\/var\/www\/yourdomain.com<\/code> directory.<\/p>\n<h2>Summing it up<\/h2>\n<p>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 <a href=\"https:\/\/www.techcoil.com\/glossary\/dynamic-website\/\" rel=\"noopener\" target=\"_blank\">dynamic website<\/a> with PHP, this is <a href=\"https:\/\/www.techcoil.com\/blog\/how-to-setup-a-raspberry-pi-web-server-with-raspbian-stretch-lite-nginx-mariadb-and-php-as-the-lemp-stack\/\" rel=\"noopener\" target=\"_blank\">how to deploy PHP applications on a Raspberry Pi LEMP stack<\/a>. <\/p>\n<h2>Buying the Raspberry Pi Zero W hardware to host your static website<\/h2>\n<p>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.<\/p>\n<p><center><\/p>\n<form action=\"https:\/\/www.amazon.com\/gp\/aws\/cart\/add.html\" method=\"GET\" target=\"_blank\"><input name=\"AssociateTag\" type=\"hidden\" value=\"clivsperswebs-20\"><input name=\"SubscriptionId\" type=\"hidden\" value=\"[AKIAIMND5UBCQU2HRSUA]\"><input name=\"ASIN.1\" type=\"hidden\" value=\"B071L2ZQZX\"><input name=\"Quantity.1\" type=\"hidden\" value=\"1\"><input name=\"ASIN.2\" type=\"hidden\" value=\"B073JWXGNT\"><input name=\"Quantity.2\" type=\"hidden\" value=\"1\"><br \/>\n<input alt=\"Buy from Amazon.com\" name=\"add\" type=\"image\" src=\"https:\/\/images-na.ssl-images-amazon.com\/images\/G\/01\/associates\/remote-buy-box\/buy4.gif\" value=\"Buy from Amazon.com\"><\/form>\n<p><\/center><\/p>\n<p><center><br \/>\n<img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/How-to-host-a-static-website-on-your-Raspberry-Pi-Zero-W-with-Raspbian-Stretch-Lite-and-Nginx-web-server.jpg\" alt=\"How to host a static website on your Raspberry Pi Zero W with Raspbian Stretch Lite and Nginx web server\" \/><br \/>\n<\/center><\/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-og\" 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-og&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-og&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%2F1504&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 <a href=\"https:\/\/www.techcoil.com\/blog\/how-to-capture-the-northern-lights-with-an-entry-level-dslr\/\" rel=\"noopener\" target=\"_blank\">capture the Northern Lights with an entry level DSLR<\/a>, 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 <a href=\"https:\/\/www.techcoil.com\/glossary\/static-website\/\" rel=\"noopener\" target=\"_blank\">static website<\/a>. <\/p>\n<p>At this point in time, you saw that <a href=\"https:\/\/www.amazon.com\/Raspberry-Zero-Argon-Forty-Barebones\/dp\/B075FPYVTD\/ref=as_li_ss_tl?ie=UTF8&#038;linkCode=ll1&#038;tag=clivsperswebs-20&#038;linkId=e85667358cbaace3abb541a748143854&#038;language=en_US\" rel=\"noopener\" target=\"_blank\">Raspberry Pi Zero W and cover<\/a> lying on the table. In addition to that, you have a spare <a href=\"https:\/\/www.amazon.com\/Travel-Charger-Adapter-Samsung-Galaxy\/dp\/B0117O020U\/ref=as_li_ss_tl?ie=UTF8&#038;linkCode=ll1&#038;tag=clivsperswebs-20&#038;linkId=fd8291ff961fda480c4d8aa71cbe0a68&#038;language=en_US\" rel=\"noopener\" target=\"_blank\">micro USB charger<\/a> that you used for charging your old Android phone. <\/p>\n<p>Since you do not have any other use for these items, you decided to host your personal portfolio on that Raspberry Pi Zero W. <\/p>\n<p>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.<\/p>\n","protected":false},"author":1,"featured_media":1505,"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,409,412,445,506,438],"jetpack_featured_media_url":"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Raspberry-Pi-Zero-W-with-micro-USB-cable-plugged-into-power-port.jpg","jetpack_shortlink":"https:\/\/wp.me\/p245TQ-og","jetpack-related-posts":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/1504"}],"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=1504"}],"version-history":[{"count":0,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/1504\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media\/1505"}],"wp:attachment":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media?parent=1504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/categories?post=1504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/tags?post=1504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}