Exploring 11ty with Pokemon API

I created a static website using 11ty that displays information about Pokemons using PokeAPI.
TECH ·

Static Site Generators have been very popular recently for generating (you guessed it) static sites. This story starts with me coming across a new one called Eleventy. The name piqued my interest and I started reading about it. So, I started out on this small project called pokemon_11ty.

My goal was to:

  • build a static website with multiple pages
  • use an API to consume data for creating these pages
  • style the web pages using Bootstrap
  • host the generated site on Github Pages

You can take a look at the end result by visiting : https://mayurshingare.github.io/pokemons_11ty/

If you are interested to learn more, you can take a look at my Github repo.

I write this blog to summarize the steps I took for accomplishing this:

Part 1 - Setting up the site locally

  1. Created a new directory for the project and initialized local Git repo
  2. Created new repository on Github and added remote origin to local Git repo
  3. Installed eleventy module via npm as development dependency
  4. Wrote some awesome code using axios to pull data from PokeAPI and styled it using Bootstrap

Part 2 - Publishing the site on Github Pages

  1. Configured my Github repository to publish using Github Pages
  2. Installed gh-pages module via npm
  3. Configured deploy script in the package.json
  4. Configured eleventy to use the repository name as path prefix
  5. npm run deploy - Voila - my site was online!

What did I learn?

  • Eleventy is very flexible and extremely customizable. You want to consume data using front matter - you can do it. You want to use JSON data files - you can do it too. Are you thinking of getting data dynamically using javascript - they have thought about that too.
  • In my project, I am creating pages by consuming data from the PokeAPI, and then using the pagination feature.
  • Eleventy also allows you to use a variety of different templating languages. You name it, and they have it - Markdown, Nunjucks, Liquid, Handlebars, Moustache and more.
  • This project allowed me to learn about the Liquid language. Once you start working on it, the syntax feels very natural.

References