The website is built on Hugo. It is a framework for building fast websites with static content, which is precisely what the goal of steynguelen.nl is.

Installing Apache2

It runs on my own server, using Apache2 and Nginx. My server is running Debian 11 (previously Ubuntu) so using a few commands I was able to install Apache2. My server is running headless, so all commands are sent over an SSH terminal (Putty in my case) First, as always, make sure that the OS is up to date. To install Apache, install the latest meta-package apache2 by running:

sudo apt update && upgrade
suto apt install apache2

After the command is finished, all packages and backbones have been installed. Apache2 is installed as a service, so it runs automatically at startup. We can test it by going to the IP of the machine in a web browser, where the following page should show up:

Apache-Installed

Configuring Apache2

Apache comes with a default site (see above), which is stored in /var/www/html. All incoming requests are pointed to this site: not something we want for our case. Luckily, we can modify how Apache handles incoming requests and have multiple sites on a single server. This is called VirtualHost configuration. In this example, it is assumed that you already have a domain registered, which can be done cheaply (<5 euro). Also, it assumed that port 80 is open on your network.

We can enable and disable sites in Apache, which can also be traced to its folder layout. If we go to /etc/apache2/, we can see two folders: sites-enabled and sites-available. The first one is for sites currently running on your webserver; the latter is for sites that are disabled.

To create our own VirtualHost configuration, Apache has created a great example which we can use to extend from. We can copy it using (change your-website.com to whatever you want):

cd /etc/apache2/sites-available/
cp 000-default.conf your-website.com.conf

Now edit that file using for example nano:

nano your-website-com.conf

There are certain lines we have to change to our setup. These configuration lines make sure that users actually go to the right website.

ServerName www.your-website.com
ServerAdmin your@email.com
DocumentRoot /var/www/your-website.com

After saving (ctrl+c & y + enter), we have to enable the site via Apache. We can do that by running the command:

sudo a2ensite your-website.com.conf

An output like this is expected:

Enabling site your-website.com.
To activate the new configuration, you need to run:
  service apache2 reload
steyn@nas:/etc/apache2/sites-available#

To load the new site, restart Apache:

service apache2 reload

The configuration file has now automatically been moved to /etc/apache2/sites-enabled, which can be verified with the command:

ls /etc/apache2/sites-enabled/

and should give an output similar to this:

steyn@nas:~$ ls /etc/apache2/sites-enabled/
your-website.com.conf

Testing our new website

We have now setup Apache2, which is pointed towards an empty directory (/var/www/your-website.com). We can create a quick test HTML site by running:

sudo nano /var/www/your-website.com/index.html

Make sure the filename is index.html. In this file, copy the following contents:

<html>
<head>
  <title> I rock! </title>
</head>
<body>
  <p> I'm running this website on my own server!
</body>
</html>

After saving, if we go to a web browser and go to our domain, we should see our HTML text.

Installing Hugo

Getting our Apache2 configuration was one part of the puzzle. The other part is installing Hugo and getting it up and running. The documentation of Hugo is amazing, so for more info, please go there.

For now, installing Hugo on Debian can be done in multiple ways. I had a lot of issues with Brew and Snap and noticed the limitations of both ways quite fast. Although it is not recommended, I used

sudo apt-get install hugo

to install Hugo, since it worked immediately of of the box and did not require any other setup. We can verify the installation by using:

steyn@nas:~$ hugo version
Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: 2021-07-18T09:31:51Z (debian 0.80.0-6+b5)

Creating a new Hugo website

After successfully installing Hugo, we can create our own website with it. This part is where the customization starts: I can only give you a basic guide on using Hugo, but what you want to add or change is up to you.

To create a new site, create a new folder to run store your work-in-progress site. It is recommended to create a backup; in my case, I synchronise it with GitHub for version control. This part is however up to you. Then, run:

mkdir /your-folder/ && cd /your-folder/
hugo new site your-website.com

Now, we can add a theme. There are thousands of themes to choose from: https://themes.gohugo.io/ is a great way to start. Next to that, you can search GitHub or Google for different themes. Some are paid!

Hugo uses markdown as its way for content creation. Markdown is easy to learn and understand. We can manually create a markdown file, or let Hugo do it for us. To let Hugo create our file, run the command below in the main folder of your server.

cd /your-folder/
hugo new posts/test.md

Content in Hugo is stored in the /content/ folder of your website folder. For Hugo to work, it needs some basic information:

---
title: "My First Post"
date: 2022-09-02T11:32:11+01:00
draft: true
---

Drafts are not deployed when you build your site. Change draft to true for it to be exported in the final HTML file.

Now, we can start our Hugo server. First, we want to test it in a localhost environment, so we run

hugo server -D

If we now go to localhost:1313 (or your-ip:1313) we can see our site.

Finalizing the site

Finally, after all our content has been managed and created, we can export our website to our above-created Apache2 server. To do so, run the below commands in our website folder (/your-folder). Make sure the website is backed up first!

rm -rf ./public
hugo

This does not create a virtual server and the site is exported as HTML files to the ./public folder. Then, copy these files to our /var/www/your-website.com folder. This can be done using:

rm -rf /var/www/your-website/
cp -v -rf /your-folder/public/ /var/www/your-website.com

After completion, our site should be live at your domain. Some browsers use cache for displaying sites (this decreases load times in case of bad internet), so clear your cache or use an incognito mode to see the changes.

Adding content

I would like to add content remotely to my website in a good-looking environment. Luckily, there are multiple CMS (content-management-systems) out there. In the end, I settled on forestry.io, which is free for personal use and has great integration with GitHub and Hugo. I can only highly recommend this tool.