Add Pagination to Your Eleventy Static Generated Website in Minutes

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 demonstrated how I was automatically gathering YouTube videos from a playlist on my Poké Trainer Nic channel and publishing them to my Eleventy website.

At the time, this was the best thing since sliced bread for that particular website. Fast forward to now and we’ve got a problem with too many videos loading all at once with a ten hour scroll to reach the bottom. The scroll time is an over exaggeration, but you get the idea that too much content on a single page can become a problem.

This lead me to pagination and showing only a small subset of videos per page.

We’re going to see how to very quickly add pagination to an Eleventy website, something that can be accomplished with a few lines of HTML and a few minutes of your time.

Create a Custom Stream Elements Overlay for YouTube Subscribers

I recently got into streaming video games on a consistent basis and needed a better call to action (CTA) to encourage subscribers. In an attempt to encourage more subscriptions, I thought it’d be beneficial to show to my viewers how many current subscriptions I had and have them watch the number increase if they choose to subscribe.

While I could just show static plain text of this, I thought it’d be more professional to have it nicely formatted and updating live. For this I stumbled upon Stream Elements.

With Stream Elements I could create web overlays to show on my stream. However, I was responsible with the design of these overlays.

In this tutorial, I’m going to share how I created a custom widget for showing total YouTube subscribers on my stream.

Download and Cache YouTube Data in an Eleventy Website with Simple JavaScript

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, Poké Trainer Nic, for example. It’s a Pokémon website built with Eleventy that shows a list of my YouTube videos among other things. The videos on the website refresh daily, but it’s not something I do manually.

So how do I do this?

In this tutorial you’ll see how to get information about your YouTube videos and playlists using APIs for displaying within an Eleventy website. To make things better, we’re going to see how to cache this data to prevent making too many requests to an API that has a finite allocation.

Generate Images from HTML with Gulp and Puppeteer

Have you ever needed to generate an image from your HTML? Whether it be for design purposes or for marketing purposes with social media, knowing how to get a screenshot of your HTML design without manually taking the screenshot can be a great thing.

A use-case I was interested in was around feature graphics for each of my blog posts. Sure I could open a graphic design tool like Affinity Photo, or use the same feature graphic for every tutorial, but what if I wanted to automatically generate them based on certain criteria?

In this tutorial we’re going to see how to use Puppeteer to take screenshots of our HTML through a headless Gulp task.