I am starting a new journey, by finally getting my own domain, and serving a blog on it. The idea behind this site is to have my latest blog musings, a professional section, and a few other projects that will come through. The blog itself will be served using the technology from 11ty (Eleventy).
My professional interests lay in the sphere of DevOps and Cloud engineering, with specialty on Azure service due to my line of work. Here you will find, in the coming months, posts on topics connected to CI/CD pipelines, infrastructure management in the cloud, containers, scripting, monitoring, and much much more.
The idea behind using Eleventy as a blog platform came recently as I was learning more about Static Site Generators (SSGs) and how they connect the modern era of the Internet infrastructure to the simple origins of no-fluff HTML, that's easy to read and digest. From a DevOps perspective, a static site is perfect for deployment, as it takes very little resources, can be self-hosted most of the time, and gives you a blazing fast performance.
The setup of the blog is simple, since with Eleventy you aren’t locked into a single templating engine. You can basically mix and match multiple languages within the same project, including: Markdown (.md), Nunjucks (.njk), Liquid (.liquid), Handlebars (.hbs), JavaScript (.11ty.js), HTML (.html). I used Markdown files, as this is the format of the AI era (for now) and simply generate the html versions (which are hosted in the _site/ folder) by running the Eleventy build command, which in turn compiles all your templates, layouts, and data into this directory.
At the root level, your project includes the standard files required to run Eleventy:
.eleventy.js: The core configuration file where you define how Eleventy behaves, handle passthrough file copying (like your CSS folder), and manage custom filters or plugins.package.json&package-lock.json: Tracks your project dependencies (such as the@11ty/eleventypackage itself).node_modules/: Contains the installed packages and code required to run your local build environment.
From there, Eleventy processes the source files these to build the final website:
_includes/: This directory holds your reusable layout templates.layout.html: Likely your master or default layout wrapper (containing the<html>,<head>, and<body>tags).portfolio-layout.html: A specialized layout designed specifically for your portfolio content.
css/: Contains your source stylesheets (portfolio.cssandstyle.css). Your.eleventy.jsfile should be configured to copy this folder directly into the output directory.posts/: This folder contains your individual blog post files (likely written in Markdown or HTML).blog.html&index.html: Your root-level content pages.index.htmlserves as your homepage, whileblog.htmllikely acts as an archive listing all your posts.
Overall, the liberty that a simple Vanilla interfaces gives is something that appreciate a lot, and I think that you can combine beautiful layouts with pragmatic solutions without going the way of complex frontend frameworks, unless there is a specific purpose of course. For a personal site with some blog posts, this will be enough.
Stay tuned for more news to come, and in the meantime you are welcome to follow me on Medium and on Linkedin.