# eleventy Published articles for eleventy. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Automating Advent Calendar with Github Actions and Eleventy DevFeed: [Automating Advent Calendar with Github Actions and Eleventy]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2023-01-14T13:29:58.901000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Eleventy](), [GitHub Actions](), [Accessibility](), [CSS]() Tags: [accessibility](), [css](), [eleventy](), [github-actions]() ### AI overview A tutorial describing how to build an Advent calendar with Eleventy, plain CSS, a private repository, and GitHub Actions. It explains using Eleventy's ignore mechanism and an unpublished directory to keep future content out of the build, avoiding client-side JavaScript. ### Source excerpt I've always seen advent/Christmas calendars as an interesting, technical challenge. How to build something that hides content until some specified time? And to do that without client-side JavaScript? And automatically, so I don't need to deploy the page daily manually? Last year, I decided to take up the challenge and build an advent calendar. After some consideration, the concept was clear: it would be in Finnish and about accessibility. I have a Finnish Instagram account where I talk about accessibility, so this combination made the most sense. After that, there was all the technical decisions and solving the problem above: How to keep content hidden until the right time? In this blog post, I'll share how I solved that problem. But first, let's look into the stack I chose to use. The Stack The calendar is built with Eleventy - my go-to choice when I want to create something that's not so complicated that I need to break it into smaller components. Actually, now that I think of it, I'd still take Eleventy - my projects are usually simple. Other than that, I'm using plain CSS and no client-side JavaScript. I love how you can do that with Eleventy. So, if you're wondering how I'm doing "not showing the content before the correct date": No, it's not with JavaScript. It's a combination of Eleventy's features, a private repository, and Github Actions. Let's talk about them next. Hiding Content with Eleventy I spent quite some time trying to come up with a solution that would solve my problem. I could have used client-side JavaScript, but then again, if I could solve that without it, it would be great. So I started doing some research. Is there a way to prevent some pages from getting into the build Eleventy does? After searching with some terms that did not give me good results, I finally found the solution: .eleventyignore and having an unpublished-directory containing the unpublished content. This way, the contents of the unpublished-directory won't be part of the bui ## How I Created Neule.art DevFeed: [How I Created Neule.art]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2024-11-03T12:00:49.100000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Eleventy](), [SVG](), [static-site-generator](), [Forms](), [Serverless](), [Web Development]() Tags: [blog-post](), [eleventy](), [how-to](), [html](), [serverless](), [static-site-generator](), [svg]() ### AI overview This article explains the creation of Neule.art, a color picker and visualizer for Riddari sweaters and other knitting patterns. It discusses using SVG for color visualization and choosing Eleventy, Eleventy Serverless, and HTML forms to build the site with minimal or no client-side JavaScript. ### Source excerpt I'm a knitter. It's one way of expressing my creativity and also passing the time. And it's sometimes super relaxing. And I (and people around me) get to wear some nice, warm, self-made garments. One ongoing project is that I'm knitting some Riddari-sweaters as presents to some of my close ones when they turn 30. Usually, I've just decided on the colors myself, but this time I wanted to ask from the recipient for their color choice. So, I could have tried to find some pictures of the sweater in potential colors. But there was a chance that I couldn't find those. And it takes some imagination to try to think how some colors play together if you only see a picture of the yarn ball and the sweater in random color. Trust me; I've bought some new yarn in the middle of making a sweater because what I was knitting was not what I had imagined. I needed a way of visualizing the colors somehow. And thus, the idea for my next project was born. In this blog post, I'll introduce you to Neule.art, a color picker or color visualizer for the Riddari sweater (among other patterns), and how I created it. If you're interested in the code, you can find it from the Neule.art repository. The code is nowhere perfect, and I know I could polish it a lot, but my goal has been just to get it out and then, maybe at some point, improve the code quality. The Planning and Decisions So, I began pondering how to create this site or app. I instantly started thinking about using SVGs for the visualization, as you can manipulate the colors of an SVG pretty straightforwardly. Another thing to decide on was the technologies. What should I use? React? NextJS? Something else? I wanted to build a page with the least possible amount of JavaScript, so I decided to go with Eleventy. That's a framework I've used before, and my website, for example, is built on Eleventy. I'm a bit bored with JavaScript and wanted to try if I could build the site without any client-side JS. As Eleventy is a static site generator ## Add a Comments Section to an Eleventy Website with MongoDB and Netlify DevFeed: [Add a Comments Section to an Eleventy Website with MongoDB and Netlify]() Original publisher: [Read original article]() Author: Nic Raboy Published: 2022-03-23T13:00:00Z Content type: tutorial Language: en Sources: [Nic Raboy]() Topics: [Tutorial](), [Eleventy](), [MongoDB](), [Netlify](), [Website](), [Database](), [Web Development](), [HTTP](), [Node.js](), [Command-line interface]() Tags: [database](), [eleventy](), [http](), [javascript](), [mongodb](), [netlify](), [node-js](), [nosql](), [serverless](), [tutorial]() ### AI overview This tutorial explains how to add database-backed comments to a static Eleventy website hosted on Netlify. It describes rendering existing comments during site generation, loading newer comments with timestamp-based HTTP requests, and storing new comments in MongoDB. ### Source excerpt I'm a huge fan of static generated websites! From a personal level, I have The Polyglot Developer, Poké Trainer Nic, and The Tracy Developer Meetup, all three of which are static generated websites bu... The post Add a Comments Section to an Eleventy Website with MongoDB and Netlify appeared first on MongoDB. ## Add Pagination to Your Eleventy Static Generated Website in Minutes DevFeed: [Add Pagination to Your Eleventy Static Generated Website in Minutes]() Original publisher: [Read original article]() Author: Nic Raboy Published: 2022-01-19T14:00:00Z Content type: tutorial Language: en Sources: [Nic Raboy]() Topics: [Eleventy](), [Nunjucks](), [modern web development]() Tags: [api](), [eleventy](), [html](), [javascript](), [tutorial]() ### AI overview A tutorial explains how to add pagination to an Eleventy website using video data and a Nunjucks template. It covers displaying page numbers and next or previous page controls, while focusing on functionality rather than styling or Eleventy basics. ### Source excerpt A few months ago you might remember a tutorial I put out regarding remote caching in Eleventy. In this tutorial titled, Download and Cache YouTube Data in an Eleventy Website with Simple JavaScript, I... The post Add Pagination to Your Eleventy Static Generated Website in Minutes appeared first on The Polyglot Developer. ## Download and Cache YouTube Data in an Eleventy Website with Simple JavaScript DevFeed: [Download and Cache YouTube Data in an Eleventy Website with Simple JavaScript]() Original publisher: [Read original article]() Author: Nic Raboy Published: 2021-09-15T13:00:00Z Content type: tutorial Language: en Sources: [Nic Raboy]() Topics: [Eleventy](), [JavaScript](), [Caching](), [API](), [Google Cloud Platform (GCP)](), [Website]() Tags: [api](), [cache](), [eleventy](), [google-cloud](), [html](), [javascript](), [tutorial]() ### AI overview This tutorial explains how to retrieve YouTube video and playlist information through APIs, cache the data, and display it in an Eleventy static-generated website. ### Source excerpt So you want to add your YouTube videos to your static generated website, but you don't want to manually keep track of all your videos and playlists? I get it because I've been there! Take my website, ... The post Download and Cache YouTube Data in an Eleventy Website with Simple JavaScript appeared first on The Polyglot Developer.