Behind the Scenes of My Static Blog

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:

• Responsive design for a pleasant reading experience on both mobile and PC.
• Quick back-to-top button at the top of the page.
• On mobile, table content can scroll horizontally for easier reading.

Multilingual:

• The site is available in both French and English. The same pages exist in both languages.
• Automatic detection of the browser's language upon arrival on the homepage.
• Users can switch languages by clicking an item in the main menu.

Custom Taxonomy:

• Articles are categorized and can have one or more tags.
• Articles are first searched by category, then filtered by tags.
• Tags can be nested, and their order defines their relevance level for the article. When filtering articles by tag, matching articles are sorted by the tag's position in their tag list to display the most relevant articles first.

Article Navigation:

• The blog page displays article categories. Clicking a category shows the list of articles in that category.
• At the top of each article, a breadcrumb trail shows the article's category and allows returning to the category page.
• At the bottom of each article, links allow navigation to the previous and next articles.

Enriched Text:

• Different fonts for titles, regular text, and code.
• GitHub alert blocks to highlight notes, important elements, warnings, tips, and critical points.
• Syntax highlighting for code blocks, with the ability to highlight specific lines.
• Font Awesome icons to embellish the 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.

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:

• markdown-it-github-alerts for GitHub alert blocks.
• markdown-it-anchor to add anchors to headings and build a table of contents.
• @11ty/eleventy-plugin-syntaxhighlight for syntax highlighting.
• @11ty/font-awesome to easily add Font Awesome icons to pages. It automatically generates sprites to avoid duplicates.

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.

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

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 😉.