{"id":20125905,"url":"https://github.com/robole/eleventy-tutorials","last_synced_at":"2025-06-23T15:36:54.509Z","repository":{"id":222738030,"uuid":"753221782","full_name":"robole/eleventy-tutorials","owner":"robole","description":"To-the-point tutorials on Eleventy 🎯","archived":false,"fork":false,"pushed_at":"2025-02-22T11:08:37.000Z","size":992,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-06T17:49:13.948Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Nunjucks","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robole.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-02-05T17:47:16.000Z","updated_at":"2025-02-22T11:08:40.000Z","dependencies_parsed_at":"2024-11-13T20:11:53.935Z","dependency_job_id":"646e3301-5274-4d6c-abb5-2fc4492bddcb","html_url":"https://github.com/robole/eleventy-tutorials","commit_stats":null,"previous_names":["robole/eleventy-tutorials"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/robole/eleventy-tutorials","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Feleventy-tutorials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Feleventy-tutorials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Feleventy-tutorials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Feleventy-tutorials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robole","download_url":"https://codeload.github.com/robole/eleventy-tutorials/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Feleventy-tutorials/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261505468,"owners_count":23169046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T20:11:41.698Z","updated_at":"2025-06-23T15:36:54.184Z","avatar_url":"https://github.com/robole.png","language":"Nunjucks","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n    \u003cimg align=\"center\" alt=\"A cartoon possum is floating on a balloon with a black circle in the background and the text 'tutorials' above it\" src=\".img/logo.png\" width=\"200\"\u003e\n  \u003cbr\u003e\n\t\u003cbr\u003e\n  Eleventy tutorials\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\u003ch4 align=\"center\"\u003eTo-the-point tutorials on Eleventy 🎯\u003c/h4\u003e\n\u003cbr\u003e\n\nTutorials on the [Eleventy](https://www.11ty.dev/) static site generator.\n\nEach tutorial is a self-contained eleventy project.\n\n## Conventions\n\nI use eleventy's default settings most of the time for simplicity. The default project folder looks like this:\n\n```\ndefault-elventy-project/\n|- _data/    \u003c- global data files\n|\n|- _includes/ \u003c- includes and layouts\n|\n|- _site/ \u003c- the output folder for the generated website\n|\n|- eleventy.config.js   \u003c- eleventy config file\n```\n\nThe one exception is that I use nunjucks templating instead of Liquid because it is more popular, and has more a few powerful features.\n\nIf I stray from these conventions, I will mention in the tutorial.\n\n## Running tutorials\n\nOpen one of the tutorial subfolders. Then, run `npm install` (or equivalent for your favourite package manager) to install the dependencies. Then, you can run the website locally with `npm run dev`.\n\n## Tutorials\n\n\u003c!-- TOC --\u003e\n**Tutorial List**\n1. [GitHub projects](#github-projects)\n1. [Group posts by year](#group-posts-by-year)\n1. [Favicon to differentiate between dev and production build modes](#favicon-to-differentiate-between-dev-and-production-build-modes)\n1. [Production flag](#production-flag)\n1. [Merge custom data with a collection (Make a writing archive)](#merge-custom-data-with-a-collection-make-a-writing-archive)\n1. [Convert a RSS Feed into a collection (Make a writing archive)](#convert-a-rss-feed-into-a-collection-make-a-writing-archive)\n1. [CSV data file (Make a \"currently reading\" bookshelf)](#csv-data-file-make-a-currently-reading-bookshelf)\n1. [Charts (Make a \"post count\" bar chart)](#charts-make-a-post-count-bar-chart)\n\u003c!-- /TOC --\u003e\n\n### GitHub projects\n\nA *projects* page that is populated with data fetched from the GitHub API.\n\n![projects page](/.img/github-projects-screenshot.png)\n\nWe provide a list of repositories that we want to feature in *_data/projects.json* in the following format:\n\n```json\n[\n  {\n    \"title\": \"Eleventy Tutorials\",\n    \"repository\": \"https://github.com/robole/eleventy-tutorials\"\n  },\n  {\n    \"title\": \"Snippets Ranger\",\n    \"repository\": \"https://github.com/robole/vscode-snippets-ranger\"\n  }\n]\n```\n\nWe use the GitHub API to provide the additional fields: *description*, *language*, and *star count*.\n\nYou can read [this tutorial](https://www.roboleary.net/webdev/2024/02/07/eleventy-fetch.html) for a walkthrough.\n\nThe project is in the [github-projects](/github-projects/) folder.\n\n### Group posts by year\n\nIt is popular to group posts by year for a blog or archive. I will show you how to do this in ascending or descending order.\n\n![a blog page with the posts grouped by year from newest to oldest. there are 5 posts grouped into 3 groups: 2024, 2023, and 2022.](.img/group-posts-by-year.png)\n\nThe project is in the [group-posts-by-year](/group-posts-by-year/) folder.\n\n### Favicon to differentiate between dev and production build modes\n\nShow a different favicon if the project is run in dev mode or production mode. This gives a clear visual indicator of what version of your website you are seeing in the browser.\n\n![favicon is different in dev mode and prod mode](.img/favicon-dev-prod.png)\n\nYou can read [this tutorial](https://www.roboleary.net/2024/02/15/eleventy-favicon-modes.html) for a walkthrough.\n\nThe project is in the [favicon-dev](/favicon-dev/) folder.\n\n### Production flag\n\nA production flag is useful for activites that you only want to happen in production such as minifying assets. This project adds a `production` variable that can be used everywhere.\n\nThe demo changes the `title` of the homepage if it is run in dev mode or production mode.\n\n![title is different in dev mode and prod mode](.img/production-flag-title-modes.png)\n\nYou can read [this tutorial](https://www.roboleary.net/webdev/2024/01/24/eleventy-production-flag.html) for a walkthrough.\n\nThe project is in the [production-flag](/production-flag/) folder.\n\n### Merge custom data with a collection (Make a writing archive)\n\nPerhaps you post on other websites and would like to reference those external posts on your blog. For example, [I wrote a couple of articles on CSS Tricks](https://css-tricks.com/author/robjoeol/) and would like to include them in my blog for posterity. Rather than make a markdown file for each external post, you could just create a JSON data file and merge it with your `posts` collections.\n\nThis is the *_data/externalPosts.json* file:\n\n```json\n[\n  {\n    \"url\": \"https://css-tricks.com/is-vendor-prefixing-dead/\",\n    \"date\": \"2021-05-21T00:00:00Z\",\n    \"data\": {\n      \"title\": \"Is Vendor Prefixing Dead?\",\n      \"description\": \"Browser vendors slowly began to move away from prefixing in 2012. It appeared that the problems created by vendor prefixes would fade away in time. The question is: has that time come yet?\",\n      \"image\": \"/assets/img/external-posts/2021-05-21-prefixing-dead.webp\",\n      \"publisher\": \"CSS Tricks\",\n      \"tags\": [\"CSS\"]\n    }\n  }\n]\n```\n\nMy CSS Tricks posts gets added to my blog list as below.\n\n![includes ](.img/external-posts-blog.png)\n\nThe project can be found in the [external-posts](/external-posts/) folder.\n\n### Convert a RSS Feed into a collection (Make a writing archive)\n\nHere I demonstrate how to fetch a RSS feed with [eleventy fetch](https://www.11ty.dev/docs/plugins/fetch/), and parse the feed to use as a collection.\n\nIn this instance, I am creating a collection from the articles I wrote for LogRocket. LogRocket creates a RSS feed for each author. I list the LogRocket articles on the \"Other Writing\" page, as per screenshot below.\n\n![A page my other writing. It lists articles I wrote for LogRocket with each item showing the title and date.](.img/rss-feed-to-collection.png)\n\nThe project can be found in the [rss-feed-to-collection](/rss-feed-to-collection/) folder.\n\n### CSV data file (Make a \"currently reading\" bookshelf)\n\nHere I demonstrate how to add the CSV file type as a data file.\n\nIn this example, I am displaying my \"currently reading\" bookshelf. I exported the data as a CSV from the [Calibre e-book library app](https://calibre-ebook.com/) that I use to manage my library.\n\n![A page for the currently reading bookshelf. The title says 'books I am reading\". 3 books are shown with a title, cover, and author names. ](.img/csv.png)\n\nThe project can be found in the [csv](/csv) folder.\n\n### Charts (Make a \"post count\" bar chart)\n\nThis is a demonstration of making a chart using the [chart.css](https://chartscss.org/) library. It enables styling a HTML table as a chart without the need for JavaScript. This is great for performance and accessibility.\n\n![a bar chart of posts grouped by year](./.img/graph.png)\n\nIn this example, I create a bar chart of the number of blog posts written each year.\n\nThe project can be found in the [chart](/chart/) folder.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobole%2Feleventy-tutorials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobole%2Feleventy-tutorials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobole%2Feleventy-tutorials/lists"}