Simple, efficient and elegant dev.

Behind the Scenes of My Static Blog

Last edition :

Table of contains

In this article, I briefly introduce the functional and technical characteristics of the blog you're currently viewing. This will give you a good overview of what can be achieved with a static site generator like Eleventy and might even inspire ideas for your own blog.

Features of My Blog

Here are the main features of my blog:

Ergonomics:

Multilingual:

Custom Taxonomy:

Article Navigation:

Enriched Text:

Comment Management: Visitors can log in with their GitHub account to leave comments.

RSS Feeds: Automatically generated in English and French.

SEO and Social Media Integration Optimization using standard metadata, Open Graph data, canonical URLs, and Schema.org structured data.

Upcoming Feature

At the bottom of some articles, I plan to add a form allowing visitors to subscribe to my newsletter or receive zip files of sources associated with certain articles. The data entered in the form (name, surname, email address, and page ID) will be sent to an API I developed with ASP.Net Core. My API will then interface with the system.io API, an automated system for contact management and email sending.

Note

What I love about static sites is that the technical architecture and deployment remain simple while allowing the use of external APIs for complex features. The overall solution is more fragmented than with a traditional SPA architecture, but it is lightweight and doesn't require any specific JavaScript framework.

Technical Characteristics

Without delving into code details, here are the essential technical characteristics of my Eleventy project:

Styles: I don't use any CSS framework. All CSS code is embedded in <style> tags in the templates for a modular architecture and fast loading. Each page typically includes no more than 10 KB of CSS (unminified).

JavaScript: I also don't use any JavaScript framework. I use vanilla JavaScript for filtering articles by tags, redirecting to the homepage matching the browser's language, the back-to-top button, and connecting to Google Analytics.

For the form management described earlier, about 60 lines of JavaScript are enough to collect form data, send it to the API, and display a confirmation message.

Templates: I use the Nunjucks language, which is powerful and versatile. Eleventy natively handles template inheritance. I use Nunjucks macros to create reusable components: breadcrumb trail, short article summary, form.

Multilingual: The language code ('en' or 'fr') is included in the URL and page metadata. Source files that depend on the language (Markdown files for articles and translated metadata files) have the same names in both languages but are stored in folders named en and fr. This simplifies navigation and language switching.

Article Categories and Tags: In the project, each category corresponds to a subfolder of the language folder. This makes it easier to locate articles. In the code, each category page contains its collection of articles, stored in the data cascade, a unique Eleventy architecture.

Article tags are defined in the YAML frontmatter of the Markdown files.

Enriched Text: Eleventy uses the Markdown-it engine by default to interpret Markdown, and I've added the following packages to enhance the syntax:

Images: All images are centralized in an img folder for easy reference and sharing between languages. My images are mostly diagrams and screenshots in PNG format, but I've configured Eleventy to convert them to AVIF to optimize their size (thanks to the eleventy-img plugin).
I don't create any size variants, and Eleventy automatically generates the HTML for dimensions and lazy loading, which is super convenient!
Finally, I prefix all image names with the article name in which they are used to quickly locate the images for each article.

Note

This image management is pure bliss compared to what I was used to in WordPress!

Comments are managed using the Utterances API and stored in a GitHub repository.


Important

The feature that had the most impact on my blog's technical architecture is multilingual support. Indeed, all articles, general interface texts, metadata, and RSS feeds must be available in at least two languages, which complicates things quite a bit.

But while a WordPress site would have required a paid and rather heavy plugin to handle this, my solution remains lightweight and entirely free! I'll present it in more detail in future articles.

Other Templates

On the Starter Projects page of Eleventy's official website, you'll find about 170 templates for different types of sites: blogs, showcase sites, portfolios, etc. The templates usually come with a minimalist demo site. However, it's often impossible to know their technical characteristics without downloading the template and examining its code, which is a shame.

I hope this article has given you a clearer idea of the possibilities offered by the Eleventy SSG. Let me know in the comments if you found it useful, and feel free to ask questions if you have any 😉.