Add a Comments Section to an Eleventy Website with MongoDB and Netlify

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 built with either Hugo or Eleventy. In addition to being static generated, all three are hosted on Netlify.

I didn’t start with a static generator though. I started on WordPress, so when I made the switch to static HTML, I got a lot of benefits, but I ended up with one big loss. The comments of my site, which were once stored in a database and loaded on-demand, didn’t have a home.

Fast forward to now, we have options!

In this tutorial, we’re going to look at maintaining a static generated website on Netlify with Eleventy, but the big thing here is that we’re going to see how to have comments for each of our blog pages.

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.

Implement Full-Text Search over a GraphQL API in MongoDB Atlas

GraphQL can be an extremely powerful and efficient way to create APIs and MongoDB Realm makes it easy by allowing you to connect your collections to GraphQL schemas without writing a single line of code. I wrote about some of the basics behind configuring MongoDB and Realm for GraphQL in an announcement tutorial a while back.

As you find yourself needing to do more advanced things with GraphQL, you’re going to need to familiarize yourself with custom resolvers. If you can’t map collection fields to a schema from within Realm and you need to write custom logic using a serverless function instead, this is where the custom resolvers come into play. Take the example of needing to use an aggregation pipeline within MongoDB. The complex logic that you add to your aggregation pipeline isn’t something you can map. The good news is that you don’t need to abandon MongoDB Realm for these scenarios, but you can leverage Realm’s custom resolvers instead.

In this tutorial we’re going to see how to create a custom resolver that implements Atlas Search for our GraphQL API using Realm Functions, enabling you to add fast, relevant full-text search to your applications.

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.

Get Hyped: Synonyms in MongoDB Atlas Search

Sometimes, the word you’re looking for is on the tip of your tongue, but you can’t quite grasp it. For example, when you’re trying to find a really funny tweet you saw last night to show your friends. If you’re sitting there reading this and thinking, “Wow, Anaiya and Nic, you’re so right. I wish there was a fix for this,” strap on in! We have just the solution for those days when your precise linguistic abilities fail you, but you have an idea of what you’re looking for: Synonyms in Atlas Search.

In this tutorial, we are going to be showing you how to index a MongoDB collection to capture searches for words that mean similar things. For the specifics, we’re going to search through content written with Generation Z (Gen-Z) slang. The slang will be mapped to common words with synonyms and as a result, you’ll get a quick Gen-Z lesson without having to ever open TikTok.

If you’re in the mood to learn a few new words, alongside how effortlessly synonym mappings can be integrated into Atlas Search, this is the tutorial for you.

Influence Search Result Ranking with Function Scores in Atlas Search

When it comes to natural language searching, it’s useful to know how the order of the results for a query were determined. Exact matches might be obvious, but what about situations where not all the results were exact matches due to a fuzzy parameter, the $near operator, or something else?

This is where the document score becomes relevant.

Every document returned by a $search query in MongoDB Atlas Search is assigned a score based on relevance, and the documents included in a result set are returned in order from highest score to lowest.

You can choose to rely on the scoring that Atlas Search determines based on the query operators, or you can customize its behavior using function scoring and optimize it towards your needs. In this tutorial, we’re going to see how the function option in Atlas Search can be used to rank results in an example.