Build a Ready-To-Use Jekyll Setup — Part 4: Webserver Configuration

Photo by Paz Arando on Unsplash

Intro

This is the fourth and last article of a series on how to build a Jekyll setup that can be used to develop multi-page websites with static contents in two languages and which are served by an Apache HTTP Server. In the third part we implemented methods to dynamically generate navigation menus according to a pre-defined structure.

In This Part

We will configure a virtual host for the Apache HTTP Server which serves the website either in German or in English over HTTPS, depending on the Accept-Language field of the HTTP request header. This approach requires the Accept-Language field to be set by the browser in order to receive the website in the desired language. If the value of the Accept-Language filed is different from de or is not provided at all, we decide to serve the English version of the website.

The following configuration is a minimal working example and is tested on Ubuntu Server 20.04 LTS using Apache HTTP Server 2.4. Security related settings are omitted for simplicity and are not the topic of this article.

Prerequisites

• The website was build according to Part 1 to Part 3 of this guide. You can download the resulting source code from Part 3 on GitHub, as we will use it as a starting point here.
• Ubuntu Server 20.04 LTS with Apache HTTP Server v2.4 installed on your machine
• sudo user with root privileges
• Your Apache user (www-data under Ubuntu) has read permissions for the directory /var/www/<yourdomain>/
• Firewall with port 80 and 443 being open for TCP connections and the Apache HTTP Server process is listening on these two ports.

Uploading Files

We upload the contents of the _site/ folder to /var/www/<yourdomain>/ which should then have the following folder structure:

/var/www/<yourdomain>/
  de/
    index.html
    leistungen.html
    ...
  en/
    index.html
    services.html
    ...
  css/
    main.css
  js/
    main.js

Note that the folders which host the HTML files automatically take the names of the collections as defined in Jekyll, i.e. de and en.

Virtual Host

In /etc/apache2/sites-available/ we create <yourdomain>.conf and start with configuring a virtual host for port 443.

In line 2 and 3 we specify the name of the server — the domain, with and without www. In line 3 to 7 we specify the root directory of our website and grant full access.

The rewrite module is used to redirect the requests. First, we always want to serve the website from www.yourdomain.com and threfore redirect yourdomain.com to www.yourdomain.com if necessary (line 10 and 11). If that is not required for your use case adjust the configuration according to your needs.

Then, when the webserver receives a request for www.yourdomain.com, it has to decide, whether to return the English or the German website. This is done by checking the request against two patterns. First, we check if the path (the part after “www.yourdomain.com") only contains a forward slash / (line 13). Second, in line 14 we check, if the value of the request header Language-Accept starts with de. If both conditions match, we reply with a temporary redirect R=307 to the target URL of the German website, www.yourdomain.com/de/ (line 15). The L flag instructs Apache to stop processing further rewrite conditions in case of a matching condition. If you choose different collection names in Jekyll, you need to adjust the path of the URL you want the user redirect to. Also consider to change the HTTP redirect code in your production environment.

If these two conditions do not match, the next condition in line 17 is processed, which is the similar to the condition in line 13. However, this condition matches, if the value of the Accept-Language header contains any language code different from those beginning with de or if the field is missing at all. In this case, the server replies with a temporary redirect to the target URL of the English website, www.yourdomain.com/en/ (line 18) as a default.

Next, we need to configure the virtual host for port 80. Therefore add the following snippet at the top the configuration file:

Line 1 to 4 are the same as for port 443. After that we check, if Apache’s SSL module is enabled. If so, we reply with a temporary redirect to port 443.

Result

The final configuration file now looks as follows:

We now check our configuration for syntax errors with

sudo apachectl configtest

If the console outputs Sytnax OK, we can enable our config with

sudo a2ensite yourdomain.conf

and then reload the Apache2 configuration with

sudo systemctl reload apache2

If you now open your browser and browse to www.yourdomain.com the website will be delivered.

Source Code

GitHub: Jekyll Setup - Part 4 (Apache 2 Configuration File)

GitHub: Jekyll Setup - All Parts

Summary

In this guide we built a Jekyll framework that can be used a base for your next static, bilingual and multi-page website. In doing so we implemented a navigation menu that is dynamically generated, based on a pre-defined list of navigation items, as well as we configured a virtual host for an Apache HTTP Server, which serves the website depending on the Accept-Language header field of the HTTP request.

Disclaimer

Please be careful when executing commands as sudo user. Executing incorrect commands as sudo user can interrupt running processes. Furthermore, the presented virtual host configuration for the Apache HTTP Server is a minimal working example and security related settings are omitted.