How I made this website
In this section I will explain how this website was made, from scratch. I will give a detailed exlanations of each step. And at every step, I first describe the current state of the project and the next issue to deal with, then the solution to resolve that issue!
1. Deploying a server
Current situation
We have nothing. We don’t even know how where to start!
Let’s do this!
The first thing we need to do is get a machine where we will run our website. Nowadays, there are many cloud solutions that offer machines that run 24h/24h with enough processing power to run a small website! I decided to go with Digital Ocean because of their simplicity in terms of user interface and pricing. Their pricing page indicates that I can rent a small Droplet with 1GB RAM, 1 virtual CPU and 25GB of disk storage for $5/month. That’s cheap and should be sufficient for the scale of my tiny website. I want it to be minimal anyway!
How do I know that’s enough to run a website? Actually, I have no idea! Let’s try setting everything up and if it’s not enough, we can always very easily upgrade the Droplet on Digital Ocean.
There are several other options we could have chosen here, from any cloud provider like Amazon EC2, Google Cloud, Heroku, etc.
Once we have purchased an instance, Digital Ocean’s dashboard tells us the public IP of the server. We can use that to log into the machine and do the initial setup.
2. Setting up the server
Current situation
We are renting a virtual server in the cloud and have got the public IP of the machine. But this machine is as empty as my shoes when I’m sleeping! We need to connect to it, do some basic security configurations and start setting up the programs to run our website.
Entering the cave
I then installed and configured Ubuntu 18.04 on it, setting up my user and the basic security configuration to protect my website against the wild internet.
User and security setup
TODO
3. Running a web server
Current situation
Yoopi! We have a setup server in the cloud, which we can access easily and is protected from the internet baddies and malicous bots. But it still isn’t running any website. You can’t send a URL to your grandmother yet, asking her to visit your brand new and fancy website. It doesn’t exist yet! All we have is a machine in the cloud that we have configured and control.
Installing the correct program
TODO
When my server’s basic setup was done, I installed the Apache2 web server. A web server is a program that can run a website for you. I will handle incoming connections to your server, dispatching them to the correct content.
4. Giving your IP baby a name
Current situation
Now, we have a running website in the wild! But to access it, you need to type in the full ip address of your server, which is not very convenient. What you’d like is for your website to have a name, like all the other babies on the internet!
Why babies have names
DNS & history
Making the difficult choice
domain name, purchase and setup
The next step was to purchase a domain name to have human readable url. How did you find this website? by typing the ip address? No! You can the domain name in your browser’s search bar: csbenz.com! I have automatic https redirection enabled. I’m using certbot to manage the certificate myself :)
5. Adding content
Current situation
TODO
Once my website was up and running, accessible through port 443 (https), I needed to add some content to it. I decided to use Hugo as Content Management System (CMS). A CMS is a program that helps you manage the content on your website. Without it, you’d have to setup the style of each page yourself and handle navigation and sidebars manually on each page of your website. A CMS takes care of that for you. Then you simply need to write the content, and it will organize it nicely for you, the way you configured it to! For example, on this website, I write each page in a textfile, and the sidebar, search bar, etc. are rendered automatically. How nice :)
Finalizing the setup and making my life easier
TODO
Next thing to do is to setup a sync system between my local computer and the server, so that I can edit files and content locally, and sync to my server when needed, so that I don’t need to ssh into the droplet everytime I want to modify something, plus it allows me to use my favorite local editor and markdown preview!
To do so, I used rsync. I first copied the server directory to my local computer. Now, I can modify the files locally, run rsync (with the -u parameter), and the file updates are uploaded to the server. I ran “hugo -w” on the server, so Hugo will watch for file changes and create a new build everytime it detects changes.
git backup