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
- Created a new directory for the project and initialized local Git repo
- Created new repository on Github and added remote origin to local Git repo
- Installed eleventy module via npm as development dependency
- Wrote some awesome code using axios to pull data from PokeAPI and styled it using Bootstrap
Part 2 - Publishing the site on Github Pages
- Configured my Github repository to publish using Github Pages
- Installed gh-pages module via npm
- Configured deploy script in the package.json
- Configured eleventy to use the repository name as path prefix
- npm run deploy - Voila - my site was online!
What did I learn?
- 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.
- Awesome 11ty tutorial on Youtube by the Creator - Zach Leatherman on Jason's channel
- Amazing documentation on https://www.11ty.dev/docs/ to understand pagination
- PokeAPI documentation - https://pokeapi.co/docs/v2
- Liquid documentation - https://shopify.github.io/liquid/
- It was little tricky figuring out how to publish to Github Pages until I came across this blog - https://donnacodes.com/publishing_eleventy_site_to_github_pages