The journey of creating my first personal website
Published:
Hoorah! My first blog post. In this post I’d like to share how this website was created.
Part 1: Server Configuration
Hosting platform
My goal was to configure the webserver myself ‘from scratch’. I considered Amazon Web Services (AWS), Microsoft Azure and DigitalOcean as a hosting platform. Initially I was overwhelmed by the amount of services all three parties offer. All of them would be fit-for-purpose. DigitalOcean happened to have a $100 credit for new members, so I went for DigitalOcean.
Server specs
I created a ‘droplet’ (DigitalOcean’s name for a virtual server) with 1 CPU Core, 1 GB Memory and 64GB HD. The OS of my choice was Ubuntu 20. This is the absolute lightest configuration available, but in order to serve a simple static website this is more than sufficient.
After choosing the desired configuration my droplet was deployed and available within 2 minutes. Awesome! 
Right after the deployment and logging in as root I created a ‘webserver’ user. You don’t want your root user to run your daemons 👿. This user installed nginx. Nginx is a free, open-source, HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. For now i’ll use Nginx solely as a HTTP server. Configuration was easy. I used the following tutorial to configure Nginx: How to install nginx on Ubuntu 20.04.
Domain Registrar
No specific requirements here. I wanted a cost-efficient (read: cheap) registrar to claim swartele.nl. I went with Versio. Cost: 20 EUR per year.
Domain Name Services (DNS)
After the server was set-up and my domain was registrered, traffic had to be routed from swartele.nl to my DigitalOcean server. This is where DNS joins the party. DigitalOcean offers it’s own DNS. How to use the DNS of DigitalOcean instead of your domain registrar can be found here: DigitalOcean: How to point to DigitalOcean nameservers.
In the configuration panel of my DigitalOcean server, I created ‘A’ records from www.swartele.nl and swartele.nl to my servers IP adress. Very straight forward, but more on managing DigitalOcean’s DNS can be found here: DigitalOcean: How to Manage DNS Records.
Voíla! 🎈 After executing the steps above the whole world is able to reach my webserver via swartele.nl and view nginx’s default webpage. This milestone called for a cup of ☕ and a ‘snapshot’ of the server. DigitalOcean offers snapshots at a price of 0.05 USD per GB per month. My snapshot was 2GB. For 0.10 USD I was now always able to restore my configuration to this moment in time.
Part 2: Website creation
Content Management System and Theme
In the past I’ve worked with various Content Management Systems (CMS). Joomla, Drupal, Wordpress and probably others I can’t recall. There are many mature CMS’s which each offer a wide range of functionality out-of-the-box. When you choose your CMS I would recommend taking the desired functionality and your experience into account:
- functionality: What functionality does your website require?
- experience: Which technology stack have you worked with in the past?
During my online research I stumbled on an open-source website theme from Academic pages. This theme uses the following technology stack:
- Jekyll
- Markdown
- Ruby on Rails
That’s all!
Jekyll
Jekyll takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.
When you’re done making your plain text changes you execute a jekyll build command and Jekyll compiles the website for you.
Markdown
Jekyll is able to parse HTML and Markdown . I 
Markdown for it’s simplicity. Markdown is a lightweight, git-friendly, mark-up language
and is widely used by developers to create readme files, software specifications, blog posts and other documentation. On this website, each page is an individual Markdown file parsed by Jekyll into a simple and static HTML-page.
Ruby On Rails
Ruby on Rails is an open-source web application framework. Jekyll is written in Ruby. Without installing Ruby on Rails I would not be able to use Jekyll and generate this website.
Next steps
A few ideas:
- Apply version control (git)
- Containerize the website
- Automate website deployment