Setting up a cloud webserver for hosting a static site

Why would I want to do this?

Since there are many easier (options) for hosting a static website (of which I recommend and also use Github pages) then why would I want to go through this process. For me, I need to use the server for a few other things as well, but the main reason was just to test putting a few things together quickly to see what was involved. The TL;DR version is:

1. Getting a cloud linux server
2. Installing NGINX for the webserver
3. Getting a domain name and configuring the DNS
4. Getting an SSL certificate
5. Putting some static content up to test

The tools

• Linode for the Cloud server
• Ubuntu for the operating system
• Nginx for the webserver
• Fastcomet for the domain name
• Let’s Encrypt for the SSL certificate
• React renders the UI
• MDX converts markdown into React components
• Navi handles routing and creates static HTML files for each route
• create-react-app builds the app’s assets and provides the dev server

1. Getting a cloud linux server

There are lots of options out there these days. I went with Linode for this one. The smallest shared CPU option will be totally fine for hosting a static site and any of the LTS Ubuntu images will be fine too.

Once you have created the machine you will need to get the machines IP address to access it.

2. Installing NGINX for the webserver

There is no point in writing the steps to install Nginx as it has already been written many times. I’ll link to the tutorial from Ubuntu. Install and configure Nginx

But before you can run the shell commands you’ll need to access your machine via SSH. If you are using Windows, I’ll give a shout out to the Windows Terminal.

Using a Powershell session in Windows Terminal we can connect to our server using:

ssh root@<ip-address>

3. Getting a domain name and configuring the DNS

Since I have other hosting and domains with Fastcomet it was easy enough for me to get another domain through them. I found a domain that cost around $10 USD a year.

Once you have purchased a domain name, you’ll need to find out how to configure the DNS. Once you’ve found this you’ll need to configure an A Record and add your machines IP address.

4. Getting an SSL certificate

The last thing I wanted to do was to get an SSL certificate. After listing to this SyntaxFM podcast, and reading up the benefits for even static sites to have SSL certificated, I was convinced that it was easy enough to do using Let’s encrypt.

Just select NGINX and Ubuntu from the Let’s encrypt page and follow the instructions.

Now you’ll have HTTPS. But you probably want a redirect for all HTTP traffic. You can add a basic NGINX configuration change to achieve this:

server {
    listen 80;
    server_name mystaticstie.net www.mystaticsite.net;
    return 301 https://mystaticstie.net$request_uri;
}

5. Putting some static content up

I previously have used Gatsby (this blog site is built using Gatsby), which is great, but I wanted to try a basic Create React App site this time. I chose to use create-react-blog a build a basic static blog.

Results

Check out the results at https://thefog.xyz/