{"id":305,"date":"2018-02-23T19:05:42","date_gmt":"2018-02-23T11:05:42","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=305"},"modified":"2018-09-22T15:49:00","modified_gmt":"2018-09-22T07:49:00","slug":"configuring-nginx-to-serve-files-for-a-static-website","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/configuring-nginx-to-serve-files-for-a-static-website\/","title":{"rendered":"Configuring Nginx to serve files for a static website"},"content":{"rendered":"<p>In the world of HTTP, static files are content hosted on a web server that does not change. Some examples of static files include images, CSS files, JavaScript files and HTML files. <\/p>\n<p>Although it is not too hard to implement a <a href=\"https:\/\/www.techcoil.com\/glossary\/dynamic-website\/\" rel=\"noopener\" target=\"_blank\">dynamic website<\/a> through a content management framework like <a href=\"https:\/\/wordpress.org\/\" rel=\"noopener\" target=\"_blank\">WordPress<\/a> on your own server, there are cases where it makes more sense to just host a couple of static files to realise your website.<\/p>\n<p>Nginx is an excellent web server for serving static websites. If you already have <a href=\"https:\/\/www.techcoil.com\/blog\/building-a-reverse-proxy-server-with-nginx-certbot-raspbian-stretch-lite-and-raspberry-pi-3\/\" rel=\"noopener\" target=\"_blank\">Nginx running on a Raspberry Pi 3<\/a> or any other kinds of server, you may want to configure it to serve files for your <a href=\"https:\/\/www.techcoil.com\/glossary\/static-website\/\" rel=\"noopener\" target=\"_blank\">static website<\/a>.<\/p>\n<h2>Nginx configuration to serve files for a static website<\/h2>\n<p>Suppose you have:<\/p>\n<ul>\n<li>the domain names <code>example.com<\/code> and <code>www.example.com<\/code> that are mapped to the IP address of the server where your Nginx installation is running from, and<\/li>\n<li>the directory <code>\/var\/www\/example.com<\/code> on your server that contains the static files for your static website.<\/li>\n<\/ul>\n<p>You can make your Nginx web server serve static files for your static website with the following configurations: <\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nserver {\r\n    server_name example.com www.example.com;\r\n    listen 80;\r\n    root \/var\/www\/example.com;\r\n    index index.html;\r\n}\r\n<\/pre>\n<h3>What does the <code>server_name<\/code> and <code>listen<\/code> directives tell Nginx?<\/h3>\n<p>The <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#server_name\" rel=\"noopener\" target=\"_blank\"><code>server_name<\/code><\/a> directive along with the <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#listen\" rel=\"noopener\" target=\"_blank\"><code>listen<\/code><\/a> directive instructs Nginx to handle HTTP GET requests directed at either <code>http:\/\/example.com<\/code> or <code>http:\/\/www.example.com<\/code> to take the instructions specified by this <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#server\" rel=\"noopener\" target=\"_blank\"><code>server<\/code><\/a> block.<\/p>\n<h3>What does the <code>root<\/code> directive tells Nginx?<\/h3>\n<p>The <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#root\" rel=\"noopener\" target=\"_blank\">root<\/a> directive tells Nginx to look for files inside the <code>\/var\/www\/example.com<\/code> directory to serve incoming HTTP GET requests. With this configuration, Nginx will map requests made to:<\/p>\n<ul>\n<li><code>http:\/\/example.com\/images\/logo.png<\/code> into the file path <code>\/var\/www\/example.com\/images\/logo.png<\/code>.<\/li>\n<li><code>http:\/\/example.com\/contact.html<\/code> into the file path <code>\/var\/www\/example.com\/contact.html<\/code><\/li>\n<li><code>http:\/\/example.com\/about\/us.html<\/code> into the file path <code>\/var\/www\/example.com\/about\/us.html<\/code><\/li>\n<\/ul>\n<h3>What does the <code>index<\/code> directive tells Nginx?<\/h3>\n<p>The <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_index_module.html#index\" rel=\"noopener\" target=\"_blank\"><code>index<\/code><\/a> directive tells Nginx that whenever a HTTP GET request is made to a directory inside the directory specified by the <code>root<\/code> directive, it should attempt to serve the <code>index.html<\/code> file from that directory. For this configuration, Nginx will map requests made to:<\/p>\n<ul>\n<li><code>http:\/\/example.com\/<\/code> into the file path <code>\/var\/www\/example.com\/index.html<\/code>.<\/li>\n<li><code>http:\/\/example.com\/about<\/code> into the file path <code>\/var\/www\/example.com\/about\/index.html, if <code>\/var\/www\/example.com\/about<\/code> is a directory on the server's file system<\/code>.<\/li>\n<\/ul>\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-4V\" 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-4V&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-4V&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%2F305&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>In the world of HTTP, static files are content hosted on a web server that does not change. Some examples of static files include images, CSS files, JavaScript files and HTML files. <\/p>\n<p>Although it is not too hard to implement a <a href=\"https:\/\/www.techcoil.com\/glossary\/dynamic-website\/\" rel=\"noopener\" target=\"_blank\">dynamic website<\/a> through a content management framework like <a href=\"https:\/\/wordpress.org\/\" rel=\"noopener\" target=\"_blank\">WordPress<\/a> on your own server, there are cases where it makes more sense to just host a couple of static files to realise your website.<\/p>\n<p>Nginx is an excellent web server for serving static websites. If you already have <a href=\"https:\/\/www.techcoil.com\/blog\/building-a-reverse-proxy-server-with-nginx-certbot-raspbian-stretch-lite-and-raspberry-pi-3\/\" rel=\"noopener\" target=\"_blank\">Nginx running on a Raspberry Pi 3<\/a> or any other kinds of server, you may want to configure it to serve files for your <a href=\"https:\/\/www.techcoil.com\/glossary\/static-website\/\" rel=\"noopener\" target=\"_blank\">static website<\/a>.<\/p>\n","protected":false},"author":1,"featured_media":1240,"comment_status":"open","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":[23,199,510,508,225,502,507,509,195,506,438,57],"jetpack_featured_media_url":"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Nginx-Logo.jpg","jetpack_shortlink":"https:\/\/wp.me\/p245TQ-4V","jetpack-related-posts":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/305"}],"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=305"}],"version-history":[{"count":0,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media\/1240"}],"wp:attachment":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}