How to create and host a website with NGiNX

Preface

Anyone can do this. Even if you you're not technically inclined you still deserve equal representation on the internet (plus you'll learn a lot). Like I stated in my first blog post, the best way to for us (the people) to take back the internet is to have our own platforms. I will do my best to explain how to do this on a systemd running Linux system, and an OpenBSD system. This will include side-by-side examples for both types of systems. This tutorial is designed to be done on a lazy afternoon and shouldn't take you more than a few hours. However, some steps can possibly take longer, your mileage may vary.

Finally, if you need any help setting anything up, feel free to send me an email I'll do my best to respond within 48 hours.

Part 1: The server

When it comes to finding a server to run your website there are quite a few options. Firstly, you can source a physical system from the sea of used computer parts on the internet (ebay is great for used server grade hardware). Secondly, you might already have a system kicking around that you'd be willing to commit to hosting your site (this system can be 10 years old and it will still be plenty). Finally, you can source your server from a IaaS (Infrastructure as a Service) provider. I've used Vultr in the past and I was very impressed. Ultimately, the way you source the machine does not effect the outcome of the following processes, and as long as it has at least single CPU core, and 512MB of memory your server should do absolutely fine.

Picking an operating system

As stated previously, this tutorial will only cover systemd enabled Linux distributions and OpenBSD. If this is your first time ever setting up a server, I would highly recommend you stick to a Linux distribution. If you find yourself to be a little more tech-savvy or if you've gone through the process of setting up a web server on Linux, you can go ahead and use OpenBSD. OpenBSD is a very powerful, security oriented operating system that has great tooling for very efficient servers.

Recommended Linux distributions

OpenBSD

This tutorial won't cover installing your operating system. There are thousands of tutorials available for each of the operating systems listed above. All of the websites linked above also have their own install manuals, which you should follow before moving onto the next part. Good luck.

Part 2: Preparing the server

If you've got an install of your selected operating system booted and working, stop for a second and give yourself a pat on the back, you're through the most time consuming part outside of making the website itself. Now we can move onto installing the requisite software to get your web server up and running. NOTE: The following steps will only cover the recommended operating systems listed above. If you have a different operating systems adjust accordingly.

Updating the system

Once you're logged into the system with your user account, we'll need to update the system to ensure our software repositories (the places the package manager looks for software to download) are up to date. You can update them with the following commands:

For Linux systems, run the following:


sudo apt update && sudo apt upgrade

For OpenBSD systems, run the following:

doas syspatch -c && doas pkg_add -u

Installing

For Linux systems we need to run the following command to install: NGiNX, nano, git. NOTE: You can install any text editor you'd like instead of nano, however it is the best for less experienced people. If you want to learn more, or challenge yourself try emacs or Vim.


sudo apt install nginx nano git

On OpenBSD systems run the following to source those packages.

doas pkg_add nginx nano git

Enabling NGiNX

Now we have to enable NGiNX with the init system on your server. On Linux run the following command:


sudo systemctl enable nginx

On OpenBSD run the following command:

doas rcctl enable nginx

Once you've enabled nginx, you can start it. On Linux use the following:

sudo systemctl start nginx

And on OpenBSD:

doas rcctl start nginx

This will start NGiNX and now you should be able to navigate to your servers IP address and see the "welcome to NGiNX" screen. If you don't see that screen, follow the next section troubleshooting.

Troubleshooting Networking

If your server is hosted from your own home network you'll need to make sure you've done the following:

Once you're done whats listed above, you need to open the port on your server with the following commands. On Linux use:

sudo ufw allow http

On OpenBSD you'll have to edit the /etc/pf.conf file to have the following lines

pass in proto tcp from any to any port 443 
pass in proto tcp from any to any port 80
Then run this command to enable the changes to the config:

doas pfctl -f /etc/pf.conf

Once these are configured you should be able to navigate to your networks WAN address which you can find here. You should then see the welcome to NGiNX default webpage.

Part 3: Setting up DNS (optional)

If you want your website to be registered by a domain like: www.mycoolwebsite.com, you'll need to purchase a domain name and register your server with an A record. You can purchase these from hundreds of different places but I would recommend getting yours from Epik since most will cost you pocket change (Plus I've noticed that Epik's DNS servers seem to update much faster than google domains or Godaddy).

Once you've purchased your domain you'll have to follow the documentation on your domain providers site to register an A record to point to your web server. This is a really straight forward process for most DNS providers and it shouldn't take you more than a few minutes.

Part 4: Configuring NGiNX

Now that we have NGiNX installed and running (and potentially a domain name), we can begin to configure it to host our own site. To do this, we'll have to edit a few configuration files, and then create our own website with HTML.

Creating our sites configuration file

To begin, let's delete the default site hosted by NGiNX and create our own configuration. We'll start by running the following commands to create a new configuration for our website. These commands work on both OpenBSD and Linux, however OpenBSD users will have to substitute sudo with doas. You may or may not have a domain at this point, if you do go ahead and replace "mydomain.com" with your domain name. If not it's fine, you can always come back and adjust as needed.


sudo touch /etc/nginx/sites-available/mydomain.com.conf 
sudo ln -s /etc/nginx/sites-available/mydomain.com.conf /etc/nginx/sites-enabled/mydomain.com.conf
NOTE: OpenBSD users may not have a /etc/nginx/sites-available or a /etc/nginx/sites-enabled folder, create those as needed.

Editing /etc/nginx/nginx.conf

Great, our configuration file is made and its symbolically linked to an enabled site, so it will automatically update whenever we make changes to it in the /etc/nginx/sites-available directory. Let's start by making sure NGiNX that NGiNX will read our enabled sites from the /etc/nginx/sites-enabled directory. Edit the file with the following:


sudo nano /etc/nginx/nginx.conf

Now look for this line:

include /etc/nginx/sites-enabled/*.conf

If you can't find it at all (OpenBSD users will most likely not have this) add it under the http directive near the bottom. It should be around line 60 for Linux users.

Editing our sites configuration file

Now that the core of NGiNX is setup we can lay out a basic configuration for our site. To begin delete the default configuration file in both /etc/nginx/sites-available and /etc/nginx/sites-enabled with the following command:


sudo rm /etc/nginx/sites-available/default 
sudo rm /etc/nginx/sites-enabled/default
Now we've got to make a folder to store our website. The most common place to do this is in the /var/www/ directory. Lets make a folder for our site with the following. (obviously, replacing "mydomain.com" with your domain name)

sudo mkdir -p /var/www/mydomain.com

Now we can go ahead and edit our configuration with the following (obviously, replacing "mydomain.com" with your domain name):

sudo nano /etc/nginx/sites-available/mydomain.com.conf

Inside of the configuration file, Linux users will need to add the following:

server { 
 listen 80;
 listen [::]:80;
 root /var/www/mydomain.com;
 sendfile on;
 servername: www.mydomain.com mydomain.com;
 location / {
  index index.html;
  try_files $uri /$uri;
  return 404;
 }
}
OpenBSD users will have to complete a little more since their /etc/nginx/nginx.conf will most likely be a little less pre-configured than Linux users. OpenBSD users will have to ensure their include /etc/nginx/sites-enabled is within an nginx http block before adding the above snippet. This will setup the server to spit out HTML files on the root, listening on port 80.

Finally we'll have to restart our web server to make these changes come into effect. Linux users should use the following:


sudo systemctl restart nginx

OpenBSD users can use:

doas rcctl restart nginx

Creating some content

Now we can add some HTML to serve from the web server! Regardless of your platform you can use the following to initialize an empty index file:


touch /var/www/mydomain.com/index.html

If you get permissions denied, add sudo or doas accordingly. Now, lets edit the index to have a little content, then we can say we successfully hosted our own website!

nano /var/www/mydomain.com/index.html

Add the following to your index.html

<!DOCTYPE html> 
<html>
 <head>
  <title>My Website!</title>
 </head>
 <body>
  <h1>100% Mine!</h1>
  <p>Thanks rawley.xyz!</p>
 </body>
</html>
Save the changes, and navigate to your website either via your domain (if you have one) or your IP address. If you see the content you specified in the index page, congratulations! You did it!

You did it!

If you got it working, excellent work! If not it's okay! Go back through the steps or seek out more help, either by contacting me, or the internet. There is still a lot to learn, but if you've completed this you'll have a much better understanding of the internet and hopefully a little nook on the web where you can be free. If you're interested in going deeper, I've provided some links to some useful tools for web development and a few tutorials.

Thanks for reading, and keep on keeping on.



Checkout the source code for this site on github.

All opinions expressed on this website are that of my own, they do not reflect those of my employer(s); future, past, or present.