### Intro Welcome back to our introductory tutorial on Nginx. Yesterday we got a good introductory walkthrough on Nginx including how it works and what makes it unique. We also installed a prebuilt binary of Nginx on an instance of FreeBSD so we can begin working without any hiccups or unnecessary complications. Today, we're going to focus on how to host static websites using Nginx. It's important to remember that in the beginning, Nginx was started as as experiment to speed up loading static content on an HTTP server. To this day, this is the number one place where Nginx is still the champion. So knowing this, let's crack open the terminal and get to work. ```bash ssh freebsd@your_server_ip_address ``` For accessibility purposes, we previously installed Nano on to our FreeBSD server to have quick and easy editing capabilities. For some of you, this will suffice and you will want to follow along just using that. However, I will be using the SFTP add on to Sublime Text to edit future documents remotely. This will make things much easier to read and reason about because let's face it... nobody likes staring a document with no text coloring or convenient formatting options. For those who wish to learn more about the Sublime SFTP plugin, a link will be provided below. So knowing this, let's move forward. This time, we're going to focus on how to locate the central Nginx config file. This will vary from system to system so it's worth knowing this trick in the event that you are following this tutorial from Ubuntu, CentOS, or whatever other system you may be using. ```bash nginx -V ``` There, now pay attention here where the --conf-path flag is located. This is telling us exactly where the file is located. Let's go ahead and navigate to the directory right quick. ```bash cd /usr/local/etc/nginx/ ls ``` Great, now we can see `nginx.conf` located here. Let's open the file in our text editor and have a look at the file. You may remember a lot of this from yesterday so now, to make things easier to comprehend, let's clear out most of the config file so we can write out our own details from scratch. `clear file` Good, before we begin with writing our web site configuration, we of course need a website.To do this, let's open a new window in our terminal so we can build us a super simple web page in HTML and CSS. ```bash cd to/your/project/directory mkdir nginx-test-site cd nginx-test-site touch index.html app.css ``` Ok, now let's write the HTML file. ```html Fun with Nginx

My Big Fancy Headline!

This is a website. It is simple. It is beautiful.

No fanciness, no nothing. Simple, easy, clear.

For those who don't like it. Deal with it.

``` See? Simple is the goal for now. Let's right the CSS file to give Nginx something else to serve. ```css header h1 { color: blue; } .red { color: red; } ``` There, we're done with that. Now let's close out of our text editor for the time being and configure an SFTP client for our FreeBSD server. To do this, we're going to use CyberDuck but you may use whatever SFTP client you wish to accomplish this task. Let's get it done. `video of SFTP client being setup with CyberDuck` `upload to directory /usr/local/www/nginx/` Excellent, now let's load our newly built website to our FreeBSD server. ```bash sudo su root mkdir /var/www/nginx chown -R freebsd /var/www/nginx ``` `video showing the drag and drop upload to /var/www/nginx/` ```bash chown -R freebsd /usr/local/etc/nginx/nginx.conf ``` That's it, not too bad wasn't it? Now we need to go our text editor and edit that nginx.conf file we cleared out earlier. ```nginx events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name test; location / { root /var/www/nginx/nginx-test-site; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/local/www/nginx-dist; } } } ``` Excellent, now let's take a quick look at how our website renders. `video showing website load on browser` ### Conclusion That's it, now we have our static website loaded and working on our Nginx server. If we wanted, we could easily create more server contexts within Nginx to host different websites but this will do for now. Tomorrow, we will shift our focus to handling an Express.js application by having Nginx serve the static files that our Express application would depend on for rendering web pages. ### Helpful Links * https://www.nginx.com/resources/wiki/ * https://www.freebsd.org * https://wbond.net/sublime_packages/sftp