# Automating Advent Calendar with Github Actions and Eleventy

DevFeed: [Automating Advent Calendar with Github Actions and Eleventy](<https://devfeed.tech/articles/automating-advent-calendar-with-github-actions-and-eleventy-38455.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2023-01-14/automating-advent-calendar-with-github-actions-and-eleventy/>)

Author: Eevis Panula

Published: 2023-01-14T13:29:58.901000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Eleventy](<https://devfeed.tech/topics/eleventy.md>), [GitHub Actions](<https://devfeed.tech/topics/github-actions.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [CSS](<https://devfeed.tech/topics/css.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [css](<https://devfeed.tech/tags/css.md>), [eleventy](<https://devfeed.tech/tags/eleventy.md>), [github-actions](<https://devfeed.tech/tags/github-actions.md>)

## 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