From Dotclear to Eleventy 2

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

• start a new repository with Huwindity on it
• style it a bit
• copy content over
• and publish

Starting a new repository was the easy part since the Huwindity repo has a onclick 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). 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.

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.

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 virtual server owner 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 already publish the existing content (Huwindity documentation) and work on style. Converting the content from the database in a wiki syntax into a bunch of markdown files is the biggest part of the work. It'll be on the next chapter.