Getting started with 11ty

What is Eleventy

Eleventy is a program that creates a simplified static site generator for web development. It works with many languages but on this post we are going to be using Markdown (.md).

My Experience with Eleventy

I have just recently started working with 11ty for the past few weeks and Let me just say, after overcoming the fear of not knowing what I am doing, I can confidently say it is an amazing tool that helps to simplify web development.

How to get started

Here are some links that you should look at to help you start the tutorials needed to learn how to use 11ty.

Making a Hello-World style Template (Easy)

This is how this template will look like:

Tips for Hello-World style template

When I first started to edit the documents in Visual Studio Code, I had no idea what I was doing. In order to learn how to edit the webpage you are creating, just start to type sentences into the "readme.md" File that this tutorial will show you how to create. After that wait for the local host to reload and you should see your changes on the local host page that you will open in your browser!

If you want to see my repository for this 11ty template looks like, visit my GitHub repository here:My Git repository for Hello-World style template

Eleventy Base Blog

This is my example of the base blog template that I Configured:

Home Page

Archive Page

About Page

This template was my favorite one to do because I really helped me to understand how 11ty works. If you simply just edit on of the Post.md files, it reconfigures the index.html file and changes the website for you. This is a really great template for learning how to reverse engineer the the file to create your own webpage.

My GitHub repository: Eleventy Base Blog

For my third 11ty template, I was going to use HAX11ty but i could not get yarn installed so I had just found another template on google called "Eleventy Netlify Boilerplate"in order to familiarize my self a little more with another template. Here is what it looked like after I had added my Blog posts to it:

Ill include a link to my repository for this project in case you wanted to see what I had changed compared to the original template. My changed Netlify Boilerplate

Summary

The project was a-lot of fun. You are more than welcome to clone the repositories of mine or even the base repositories to mess around with. Here i will post some of my working websites that I was able to upload using git hub pages:
My hello world website