From Dotclear to Eleventy 2

Table of content

• Introduction
• Install eleventy
• Migrating the content
• Rebuilding navigation and pages
• Other features

Install eleventy

This part is quite easy. I made a starter called Huwindity that covers more what I want to have on my blog:

• navigation menu
• responsive images
• meta tags on all pages
• CMS back office
• search
• accessibility check

Creating the new site would be as simple as starting a new repository with Huwindity, change the design a bit and copy the content over.

Starting a new repository was the easy part since the Huwindity repo has a one click button to create a repository based on it. me in Amsterdam is now on Github.

After cloning it I could start to work on it locally.

New design

Not much to say about the new design. Since Huwindity is relying on Tailwind for styles. I used it to make something that ressembles the old site but with enhanced legibility (I hope).

The main styles are defined in _layout/css/tailwind.css as a theme but since I don’t need to be able to switch themes, I also heavily used tailwind classes in the layouts.

To speed things up, I decided to use the olded css to manage fonts. So fonts.css was copied over to assets and font files into their own folder. Mixing old css and tailwind is a bit messy but this is something that can be reviewed later on.

Install the new server

I created a new server with a temporary name to run tests and slowly buld up. This server runs on Nginx. All I need to do is to make sure the static site that eleventy creates under _site is copied over to the document root of the server. This is done automatically thanks to a pipeline that comes with Huwindity.

.github/workflows/test.yml Builds the eleventy site and copies files to the document root (this parts needs to be edited in the yaml file) of the server.

Credentials are saved in the github project secrets in settings > secrets and variables > actions.

USERNAME is the user owning the server
HOST is the name of the host
PORT is the port for ssh (usually 22)
KEY is the private key of the user to connect to the server.

Add content and Publish

At this point, I can work on style with the existing content (Huwindity documentation). But the real content now needs to be converted from the database in a specific wiki syntax into a set of markdown files. There are more than 700 articles to convert and this is the biggest part of the work. It’ll be explained on the next chapter.

Next: - Migrating the content →