An Easy Step-by-Step Guide to Creating and Hosting Your Own Free Website

Step 1, find a free template. Yes, a free one. Why would you want to waste precious programming time to prettify your site, when there are hundreds of gorgeous free templates out there? If you’re not sure where to start looking, try Start Bootstrap. I’ve chosen to download their New Age template. When you find the one, move the downloaded files into the public folder of your website folder directory by typing the following code (make sure to change the file path accordingly):

In the gif below you’ll see me executing the command above and checking to see if the files were moved correctly.

Step 2, start up your server. Now that we know how our website is going to look, it’s time to create a server. Don’t worry, below you’ll see that a server is simply a file that will give my website to whomever requests for it.

The line const express = require('express'); imports the express module so that we can use it.const app = express(); starts a new express application. app.use(express.static('public')); allows us to serve static files in express. console.log('Your server is running...'); is simply a string output I like to include to check if my server is running fine. app.get
allows our server to respond to each GET request (when someone visits vimgirls.com) with the index.html file that I just downloaded.

To run the server simply type node server.js (server.js is the name of the file where I created my server, yours may be different so don’t forget to change it accordingly.)

YAY, it works! If it doesn’t at first, run these commands before trying again: npm install and npm install express

Step 3, buy a domain. If you want the entire world to see your website, you’ll need to buy yourself a domain name. I bought vimgirls.com from GoDaddy. After dropping a few bucks, watch the gif below. It’ll show you how to make sure that when someone goes to your website, their request will be sent to your server. All I did was ask the internet what my IP address is, copied it, and then pasted it into my router’s DNS settings.

Now all requests for vimgirls.com will head straight to my IP address!

Step 4, implement port forwarding. To reiterate, every single requests now goes to your server. But if your sister, brother, or dog are all connected to the router, how will the router know what to do with those requests? The solution for this dilemma is called port forwarding.

Port forwarding is simply a means of directing traffic from the outside world to the appropriate server. To implement it, you’ll need to go into your router’s settings and tell the router that all requests coming in from port 80 (what the browser uses) must be sent to your computer. Before doing that, you’ll need to find your computer’s IP address on the terminal with command ifconfig. I’ve included a gif to show you where you can find/copy it:

Awesome, now you’re ready to make some changes to your router’s http settings. Recall which port your server is listening to (hint: check your server.js file). Mine is 3003, so you’ll see below that the first thing I do is replace the internal port range with 3003. Then I replaced the internal IP address with the one that I found in the terminal using ifconfig.

Cool, now anyone in the world can access vimgirls.com!

Step 5, add security.
Did you know that it’s really easy to hack sites? Maybe I’ll write another blog post on how to do it. This is why it’s important to secure your website with SSL (Secure Sockets Layer). The simplest (and cheapest) way to get SSL is to use certbot. There are 4 steps I’m going to walk you through on how to implement SSL, so hang in there!

A. Generate the SSL certificate. First thing you’ll need to do is download certbot by executing the following command:

Next you’ll need to run certbot and then validate your website by responding to the GET request in your server file with the code they’ll provide. Here is a more detailed list of each step:

  1. Download certbot by running command sudo certbot certonly --manual
  2. Copy the generated data certbot provides.
  3. Go into your server.js file and change the app.get block so that it is only sending a string rather than a file (see Example below).
  4. Paste the data into the res.send function.
  5. Save, exit and run your server again with command node server.js

Here’s a gif showing you how I followed the steps above:

B. Copy the certificates into your project directory. In certbot’s response, you’ll find the path to the fullchain.pem certificate. You’ll use the same path to access privkey.pem. To access those certificates, run the following commands (careful though, make sure you use the path that was given to you). What they’ll do is sudo copy the files into your current directory:

I like to keep my projects as organized as possible, so I’m going to make a new directory called sslcert and move both certificates into it with the following commands:

Here’s a gif following the above steps just to ensure you’re on the right track:

C. Change the server code to serve the SSL certificate. I’ll need to make my server read the SSL certificate. To do that, I’ll need to modify server.js

We added a few new lines of code. const fs = require('fs'); lets you send files. const https = require('https'); gives us the SSL certificate. The const https_server function creates a server that implements the SSL certificate. We use that function to have our server listen to port 3003: https_server.listen(3003);

D. Change port forwarding for https. Instead of port 80, https uses port 443. This means you’ll need to change your router to forward all requests on 443 to your computer. I’ve provided a gif below to show you how it’s done.

First I had to undo the changes I made earlier to http (internal start port is back to 80 and internal IP address is back to 192.168.1.5). Then I modified the https service by replacing the internal start port with 80 and internal IP address with 192.168.1.29.

Great! Now, everyone in the world can securely connect to my server and access my website.

That’s it for this guide! I hope that it helped. If you have any questions regarding any of the steps we covered, please leave me a comment below. Good luck modifying your website (all you’ll need to do is edit the index.html file)!