Rob O'Leary

Eleventy tutorials (8)

In this series, I will explore the Eleventy static site generator. I will give some guidance on how to make some cool things with Eleventy.

  1. A simple bar chart is in the center of the frame. The eleventy possum is floating beside it on a balloon. It is cast againt a soft purple background.

    Eleventy - Zero JS charts

    It’d be cool to be able to sprinkle in some charts to your website easily. And without a lick of client-side JavaScript.

  2. A file with the label 'CSV' and an excel-like table as its content is in the center of the frame. It is cast againt a soft purple background with the eleventy possum floating beside it on a balloon.

    Eleventy - Add CSV data file support

    It would be cool to be able to drop a CSV file into a project and use it in a page. My motivation was to show bookshelves from my library database

  3. A section of a machine is exposed with a series of cogs showing. At the bottom is a RSS icon and at the top is a symbol for an array. It is cast againt a soft purple background with the eleventy possum floating beside it on a balloon.

    Eleventy - Convert a RSS Feed to a collection

    I want to create an archive of all my writing. One source is the author RSS feeds of blogs I wrote for. How about I turn it into an eleventy collection?

  4. Two different coloured strands of a mesh are twisting together in the center of frame. This is cast againt a soft purple background with the eleventy possum floating beside it on a balloon.

    Eleventy - Merge data with an existing collection

    I wanted to make an archive of my writing, merging content I wrote for other websites with my exising ‘posts’ collection. Here is how I did it.

  5. A series of posts are grouped by the year 2024 in descending order. The block has a black square bracket as an outline to the left. The first post has a date of 2024 Feb 14 and the second posts has a date of 2024 Fed 12. The title of the image says 'group posts by year. This is cast againt a soft purple background with the eleventy possum floating beside it on a balloon.

    Eleventy - Group posts by year

    A common organisation pattern for a blog is to group posts by year. I will show you how to do this efficiently and succinctly in JavaScript.

  6. An exercept of a screenhot shows 2 tabs of a browser sesssion. The first tab shows a green box as the favicon with the text 'home'. the second tab shows a red box as the favicon with the text 'home'. A title says 'dev favicon'. This is cast againt a soft purple background with the eleventy possum floating beside it on a balloon.

    Eleventy - Differentiate between dev and production builds with unique favicons

    It is easy to mix up the dev and production versions of a website in the browser. Let’s make them look unique by using different favicons.

  7. A card for a GitHub repository is shown in the center in the image that closely resembles the layout on GitHub. The card has a title of 'Eleventy Tutorials' on top, it has a description of 'To the point tutorials on Eleventy' underneath, following by an orange dot beside the word HTML to indicate the language, and a star with the number zero beside it to indicate the number of stars recieved on the repository. This is cast againt a soft purple background with the eleventy possum floating beside it on a balloon.

    Eleventy - Fetch data from the Github REST API to populate a projects page

    We will populate a page with data from GitHub. We will use the eleventy-fetch plugin to do this with minimal code and refresh the data every 2 days.

  8. A flag attached to a pole is fluttering with a white background and a red X. Above it the words 'production flag' are written. Next to it is the Eleventy possum floating on a balloon.

    Eleventy - Create a global production flag

    A production flag enables you to run activites in production only e.g. minifying assets. There isn’t a built-in flag in eleventy. How can we add one?