New Website, refactored

Having neglected our web site for a long time, I read a post on X of someone that used Eleventy to create his web site. Being a guy that alwys likes to try out new technology, I thought I'd give it a go. Our previous website was created with Hugo, which is also great but still required a lot of tweaking to get right. Since I am not a web developer by trade, reading up on Eleventy seemed like it could make the job easier.

Getting started

I used the blog template available on Github to get started, cloned it into my local git environment and started customizing it to the Ascode look and feel. One if the nice features of Eleventy (same with Hugo) is that you can run a local web server using eleventy --serve that starts a web server on http://localhost:8081 together with a file system watcher that once a change is made to a file, immediately processes the change and makes your chanegs visible through the local web server. This is great for immediate feedback on the result of the changes that were made.

There are a bunch of plugins available, we wanted to get up and running quickly so I kept the first version really simple.

Hosting on Cloudflare Pages

The previous web site was a really nice project to test out the serverless features of AWS, but it involved deploying and maintaining quite a bit of resources so we decided to keep it really simple this time and host the web site with Cloudflare Pages.

You can generate the static content for upload to Cloudflare by running the command npx @11ty/eleventy which generates all required files and stores them by default in the _site folder. Then, upload the contents of the _site folder to Cloudflare (in the Compute (Workers)/Workers & Pages section). The name you give the project is the name that is used to generate the default Cloudflare Pages url, in this case the name is ascode-web which automatically generates the url https://ascode-web.pages.dev/. That's it for basics, pretty simple - love it.

The first go for me resulted in none of the pictures being visible, they contained broken links. After some troubleshooting I found the --serve option does not clean up after itself; after removing the local _site folder and re-running eleventy --serve all was looking fine again.

Here is the documentation for the image plugin that might help you out: https://www.11ty.dev/docs/plugins/image/

Setting a custom domain

We are hosting the ascode.nl at Cloudflare which makes it super-easy to add the custom domain ascode.nl to Cloudflare Pages. Just add the custom domain on the Workers & Pages page and Cloudflare will take care of creating or updating the required DNS record, and generate an SSL certificate with the same name. Keep in mind that ascode.nl and www.ascode.nl are 2 separate custom domains in the Pages sense and need to be generated seperately.

Automating deployments

Coming soon.