About this website
This web site is static, i.e. pages and their contents coming from the same domain are sent as is by the server, without any on-the-fly creation.
If you're not interested in the technique, you can also learn more about Nicolas Hoizey.
With Eleventy, static is fantasticPermalink to heading With Eleventy, static is fantastic
The site was previously generated by Jekyll, another famous Static Site Generator, but its development staled, and after multiple years I still wasn't confortable with Ruby development, so I moved to something easier (for me), yet at least as powerful.
Even before, I was using SPIP which has its own specific syntax (not so different from Markdown), so in order to migrate the hundreds of contents written since 2001, I developed a SPIP → Markdown plugin which transforms as much as possible this specific syntax into Markdown syntax, including the YAML Front Matter.
Some pluginsPermalink to heading Some plugins
An increasing number of plugins exist in the Eleventy ecosystem to enrich the base solution.
The images benefit from my
eleventy-plugin-images-responsiver plugin to use the SaaS Cloudinary service in order to generate the different versions necessary for Responsive Web Design, while optimizing performance.
The webperfPermalink to heading The webperf
Web site performance has been one of my hobbies for many years, being above all frustrated as a simple visitor by sites that are slower and heavier than the others.
Producing a static website helps to optimize this performance, as generating pages on the fly is no longer necessary. But I have focused on providing a very pleasant experience for visitors, with a high-performance site.
For this purpose, several recipes have been combined:
- For basic operations such as concatenation and minification of CSS and JS, plus adding a hash to force a long cache to the browser, I use Rollup.
- For fonts, after testing the Flash Of Faux Text technique from Zach Leatherman, I finally gave up loaded fonts to go back to web safe fonts.
- For images, the standard syntax
<img srcset="..." sizes="..." />generated by my
eleventy-plugin-images-responsiverplugin is perfect: it's enough in 95% of the cases, is lighter in HTML, and more optimizable by browsers.
The external resources, potential sources of trouble, are mainly :
- the video players, including Youtube, Vimeo or Dailymotion
- the widgets of certain services, including Ulule, Speakerdeck or Slideshare
CommentsPermalink to heading Comments
Switching to static made me lose the comments I had natively in SPIP, so I decided a little later to switch to Disqus so as not to lose the contribution of the discussions, although I don't really like the comments to be hosted elsewhere.
I had also started to implement Webmention fairly quickly to explore a new standard inter-blog dialog technique.
Search with AlgoliaPermalink to heading Search with Algolia
Setting up an internal search engine on a static site is no simpler than for comments. It is necessary to make dynamics, find elements meeting the search criteria and list them.
With a dynamic site, it is possible to index directly the contents present in the content repository, usually a database. Some CMS even directly integrate this functionality, more or less turnkey.
Algolia is a search engine in SaaS mode, fully controlled by an extremely rich REST API. It is the choice I made back in 2015 to have a search engine on this site, and I later moved from a classic search to integrate Algolia InstantSearch seamlessly as a progressive enhancement of my static archives pages.
It's a progressive enhancement because:
- all content is already available in the static HTML provided by the server, and this static version already contains "filters" for content type and year/month of publication (it takes most of my build time… 😅)
- Algolia InstantSearch is then loaded as an module, so only recent browsers can load it and the code can use ES6. Old browsers will not get it, but they are often on devices with lower capacities, so browsing the static version is enough, as for people with JS disabled (or unavailable) for any reason.
I tried to make the switch as seamless as possible for the user, with a stable page layout to prevent Cumulative Layout Shift.
- for example: here are the notes from November 2020: https://nicolas-hoizey.com/notes/2020/11/. This page exists on the server, and it is enhanced as a search to allow for free text search and other facets (tags, language).
- another example: if you go to the full archives page, selecting one (only one) of the content type facets will update both the URL and the selected item in the main navigation.
There are still some things I would like to improve, so any advice is welcome:
- Algolia's first results list before the user type any keyword is exactly the same as the static page (if the URL contains only a content type and/or a year/month), so I would like to NOT run the search on first hit. I know it is however necessary to get the facets values and numbers, so I would at least not replace the results list, and I didn't find a way yet.
- When I'm on any InstantSearch page and I click an item in the navigation corresponding to one of the content types, I would like to select the related facet and deselect any other previously selected, instead of reloading the full page HTML and re-initialize InstantSearch, but I didn't find yet how to do it.
I hope it will inspire other people to provide a great UX for navigating archives on content sites!
But...Permalink to heading But...
Publishing new content has become more complicated, since you have to produce the Markdown and possible illustrations, then launch the compilation by Eleventy, before deploying.
All this could be made easier with Netlify, but I didn't move this site there yet.
But having a clean content source, in a more standard format, and versioned in GitHub, is a considerable gain.