{"id":1335,"date":"2018-10-23T22:13:19","date_gmt":"2018-10-23T14:13:19","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=1335"},"modified":"2019-03-30T11:14:01","modified_gmt":"2019-03-30T03:14:01","slug":"how-to-host-a-static-website-on-your-raspberry-pi-3-with-raspbian-stretch-lite-and-nginx","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-host-a-static-website-on-your-raspberry-pi-3-with-raspbian-stretch-lite-and-nginx\/","title":{"rendered":"How to host a static website on your Raspberry Pi 3 with Raspbian Stretch Lite and Nginx"},"content":{"rendered":"<p>When you want to host a <a href=\"https:\/\/www.techcoil.com\/glossary\/static-website\" rel=\"noopener noreferrer\" target=\"_blank\">static website<\/a> as your personal portfolio, you can consider using a <a href=\"https:\/\/www.amazon.com\/ELEMENT-Element14-Raspberry-Pi-Motherboard\/dp\/B07BDR5PDW\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=520ad955085b11b39caa12813f4f3616&language=en_US\" rel=\"noopener noreferrer\" target=\"_blank\">Raspberry Pi 3<\/a>. In addition to having a small form factor, a Raspberry Pi 3 is a <a href=\"https:\/\/www.techcoil.com\/glossary\/single-board-computer\" rel=\"noopener noreferrer\" target=\"_blank\">single board computer<\/a> that does not take up too much energy to run 24-7.<\/p>\n<p>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.<\/p>\n<h2>Prerequisites to hosting a website at home<\/h2>\n<p>In order to host a website at home, there are some prerequisites to meet.<\/p>\n<h3>Your Raspberry Pi is accessible via a public IP address<\/h3>\n<p>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.<\/p>\n<p>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 <a href=\"https:\/\/www.techcoil.com\/blog\/host-web-server-behind-linksys-ea7500-max-stream-ac1900-router\/\" rel=\"noopener noreferrer\" target=\"_blank\">configure Linksys EA7500 Max-Stream AC1900 router to host a web server<\/a>.<\/p>\n<p>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.<\/p>\n<h3>Your public IP address does not change and you have a domain name that maps to your public IP address<\/h3>\n<p>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 <a href=\"https:\/\/namecheap.pxf.io\/c\/1303251\/386170\/5618?u=https%3A%2F%2Fwww.namecheap.com%2Fdomains%2Fdomain-name-search.aspx\" rel=\"noopener noreferrer\" target=\"_blank\">buy a Namecheap domain<\/a> and <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 noreferrer\" target=\"_blank\">get your Raspberry Pi 3 to use Namecheap dynamic DNS to update your domain when your home\u2019s public IP address changes<\/a>.<\/p>\n<p>For the purpose of simplicity, this post will assume that you want your static website to be accessible via a domain name - <strong>yourdomain.com<\/strong>.<\/p>\n<h2>Recommended hardware to build your Raspberry Pi 3 web server for hosting your static website<\/h2>\n<p>In case you are wondering <a href=\"https:\/\/www.techcoil.com\/raspberry-pi-3-buying-guide\/\" rel=\"noopener noreferrer\" target=\"_blank\">what to buy for your Raspberry Pi 3 project<\/a>, you can consider the following hardware list:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.amazon.com\/CanaKit-Raspberry-Micro-Supply-Listed\/dp\/B01C6FFNY4\/ref=as_li_ss_tl?s=pc&ie=UTF8&qid=1517212574&sr=1-4&keywords=raspberry+pi+3&linkCode=ll1&tag=clivsperswebs-20&linkId=76113a630916ac804456aa1f5dd76c85\" rel=\"noopener noreferrer\" target=\"_blank\">CanaKit Raspberry Pi 3 with 2.5A Micro USB Power Supply<\/a> or <a href=\"https:\/\/www.amazon.com\/CanaKit-Raspberry-Power-Supply-Listed\/dp\/B07BC6WH7V\/\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=facc24accf03fbe5cd45b1893a1e9ab1\" rel=\"noopener noreferrer\" target=\"_blank\">CanaKit Raspberry Pi 3 B+ (B Plus) with 2.5A Power Supply (UL Listed)<\/a><\/li>\n<li><a href=\"https:\/\/www.amazon.com\/dp\/B01F1PSFY6\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=d68c56d79a1d84f89f596fa715743a9e\" rel=\"noopener noreferrer\" target=\"_blank\">Raspberry Pi 2\/3 official case Black\/Grey<\/a> or <a href=\"https:\/\/www.amazon.com\/dp\/B01CCPKCSK\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=1e69ae5649504fb86c6597e0774eb3d8\" rel=\"noopener noreferrer\" target=\"_blank\">Raspberry Pi 2\/3 official case Red\/White<\/a><\/li>\n<li><a href=\"https:\/\/www.amazon.com\/Sandisk-Ultra-Micro-UHS-I-Adapter\/dp\/B073JWXGNT\/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=clivsperswebs-20&linkId=20db403fc5e8bbc15e46ec21868a1488\" rel=\"noopener noreferrer\" target=\"_blank\"> Sandisk Ultra 32GB Micro SDHC UHS-I Card with Adapter<\/a><\/li>\n<li><a href=\"https:\/\/www.amazon.com\/gp\/product\/B00N2VISLW\/ref=as_li_tl?ie=UTF8&tag=clivsperswebs-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=B00N2VISLW&linkId=132403a064ff21634835c1deee4bc983\" target=\"_blank\" rel=\"noopener noreferrer\">AmazonBasics RJ45 Cat-6 Ethernet Patch Cable - 3 Feet (0.9 Meters)<\/a><\/li>\n<\/ul>\n<h2>Setting up Raspbian Stretch Lite with SSH server enabled on your microSD card<\/h2>\n<p>Once you had gathered all the necessary hardware, proceed to <a href=\"https:\/\/www.techcoil.com\/blog\/how-to-setup-raspbian-stretch-lite-with-ssh-server-enabled-on-your-microsd-card\/\" rel=\"noopener noreferrer\" target=\"_blank\">setup Raspbian Stretch Lite with SSH server enabled on your microSD card<\/a>. When you had done so, you will be able to SSH into your Raspbian Stretch Lite to perform further configurations.<\/p>\n<h2>Assembling the hardware for your Raspberry Pi 3 web server<\/h2>\n<p>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 <a href=\"\/blog\/how-to-assemble-the-raspberry-pi-3-board-with-the-raspberry-pi-official-case\/\" target=\"_blank\" rel=\"noopener noreferrer\">assemble the Raspberry Pi 3 board to the Official Raspberry Pi case<\/a>.<\/p>\n<h2>Starting the Raspbian Stretch Lite operating system<\/h2>\n<p>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 <a href=\"https:\/\/www.amazon.com\/s\/ref=as_li_ss_tl?url=search-alias=aps&field-keywords=home+router&linkCode=ll2&tag=clivsperswebs-20&linkId=6c98d01cf201ca0ba30aef3b3c806168\" target=\"_blank\" rel=\"noopener noreferrer\">home router<\/a>. After that, connect your micro USB cable and supply power to your Raspberry Pi 3 board.<\/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 noreferrer\" 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>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:<\/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>After that, 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>At this point, as an indication that Nginx was installed successful, 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 Tue 2018-10-23 11:46:37 UTC; 13s 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\nOct 23 11:46:37 raspberrypi systemd&#x5B;1]: Starting A high performance web server and a reverse proxy server...\r\nOct 23 11:46:37 raspberrypi systemd&#x5B;1]: Started A high performance web server and a reverse proxy server.\r\n<\/pre>\n<p>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:<\/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>The static page that you saw earlier is the result of the configuration file at <code>\/etc\/nginx\/sites-available\/default<\/code>. Nginx picked up the configuration file through a symbolic link at <code>\/etc\/nginx\/sites-enabled\/default<\/code>.<\/p>\n<p>In order to <a href=\"https:\/\/www.techcoil.com\/blog\/configuring-nginx-to-serve-files-for-a-static-website\/\" rel=\"noopener noreferrer\" 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.<\/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 nano loads up, paste the following contents into the editor:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nserver {\r\nserver_name yourdomain.com www.yourdomain.com;\r\nlisten 80;\r\nroot \/var\/www\/yourdomain.com;\r\nindex 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>When 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 noreferrer\" 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 noreferrer\" 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>Buying the Raspberry Pi 3 hardware to host your own static website<\/h2>\n<p>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.<\/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=\"B07BC6WH7V\"><input name=\"Quantity.1\" type=\"hidden\" value=\"1\"><input name=\"ASIN.2\" type=\"hidden\" value=\"B01F1PSFY6\"><input name=\"Quantity.2\" type=\"hidden\" value=\"1\"><input name=\"ASIN.3\" type=\"hidden\" value=\"B073JWXGNT\"><input name=\"Quantity.3\" type=\"hidden\" value=\"1\"><input name=\"ASIN.4\" type=\"hidden\" value=\"B00N2VISLW\"><input name=\"Quantity.4\" 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\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-lx\" 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-lx&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-lx&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%2F1335&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>When you want to host a <a href=\"https:\/\/www.techcoil.com\/glossary\/static-website\" rel=\"noopener noreferrer\" target=\"_blank\">static website<\/a> as your personal portfolio, you can consider using a <a href=\"https:\/\/www.amazon.com\/ELEMENT-Element14-Raspberry-Pi-Motherboard\/dp\/B07BDR5PDW\/ref=as_li_ss_tl?ie=UTF8&#038;linkCode=ll1&#038;tag=clivsperswebs-20&#038;linkId=520ad955085b11b39caa12813f4f3616&#038;language=en_US\" rel=\"noopener noreferrer\" target=\"_blank\">Raspberry Pi 3<\/a>. In addition to having a small form factor, a Raspberry Pi 3 is a <a href=\"https:\/\/www.techcoil.com\/glossary\/single-board-computer\" rel=\"noopener noreferrer\" target=\"_blank\">single board computer<\/a> that does not take up too much energy to run 24-7.<\/p>\n<p>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.<\/p>\n","protected":false},"author":1,"featured_media":1336,"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,308,438,453],"jetpack_featured_media_url":"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Nginx-1.10.3-welcome-page.gif","jetpack_shortlink":"https:\/\/wp.me\/p245TQ-lx","jetpack-related-posts":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/1335"}],"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=1335"}],"version-history":[{"count":0,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/1335\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media\/1336"}],"wp:attachment":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media?parent=1335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/categories?post=1335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/tags?post=1335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}