Intro to 11ty
Published: 2022-02-28 04:36:48

# What is 11ty?
11ty is a simpler static site generator! 11ty compiles files it finds in one's working directory into static HTML files. As a result, 11ty can be used with a slew of different files and templates to construct static sites. Let's explore some ways to generate sites!

#Hello World
To create a Hello World file using 11ty, we must first install 11ty! In your terminal, navigate to a folder of your choice. I will be using a folder named 11tyLab. Once here, use the command `npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev`. This should add relevant packages that enable highlighting of code. Next, utilize the command `echo '# Page header' > README.md`, as this should add a header to the READ.md file. Next, utilize the command `npx @11ty/eleventy `, which should finish setting up your local project's version of eleventy. Utilizing the command `npx @11ty/eleventy --serve`, you should now be able to access your Readme file through a browser with the local host link provided! An image is included below of what the link should look like, as it appears in purple. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u7uyew5uig6hkuwenyj.png)In my code editor, I changed the initial Page Header to Hello World, as seen in the images below.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v616as3qj1jc247qoudp.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev0jn5tjutp9kswln7he.png)
 
Repo can be found [here](https://github.com/RyanArmani/11tyLab2)

## Blog 1

Blogs can be created with 11ty! Thankfully, 11ty offers some blog templates for us to use. These can be found [here](https://www.11ty.dev/docs/starter/). 

The first template we will be using is called [eleventy-base-blog](https://github.com/11ty/eleventy-base-blog). To utilize this blog, head on over to the github page for this template. Click the "Use this template" button highlighted in green at the top right of the page. This will enable you to create your own repo of this template. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jsh5nlu8f1g6qx8zizb.png)
Once created, secure the https link from your own repo page by clicking the green "Code" button in at the same part of the page.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdhr7nogbhh771pgdclx.png)
Once this link is copied, you are ready to clone the repo! I created a new folder to store this template. In your terminal, cd to the folder you would like to store this repo to locally. Once there, use the command `git clone <copied-https-link>`. You can now see the files stored in this folder! 

In your code editor of choice, open up the folder where your repo is cloned locally, and you will notice code in a file called `firstpost.md`. This file stores the first blog post seen on the template. I copied my code of a previous article for lab 7 of class, and simply pasted it into this file. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe8hk3p8mz3uvqeghywo.png)

To get this template to show up on your local machine, you should first edit and save changes in the `firstpost.md` file. Then, since I created a new folder, I needed to run the command `npm install` in the terminal while cd'd in my local folder, followed by `npm run start`. Like previously, a url should be provided to access this page in a browser highlighted next to local host.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wvgd1ka7swix7zmr3cv.png)
Copying and pasting this url into a browser (or clicking on it in the terminal) shows you the result of this page! Images below are included of what mine looks like. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4hg5r7h7tlq575rsb57.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nbkz3lvhwignow5oj2c.png)

Repo found [here](https://github.com/RyanArmani/11tyBlogTemp1)

## Blog 2

The second blog being used is called [twelvety](https://airleventy.netlify.app/)([source code](https://github.com/geotrev/airleventy)). Follow the steps of the previous blog to get the blog up and running! Here is the output for the blog app!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wakyookh2tuyraqmym6.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btdb9dos40yp7ei1haj0.png)



Repo for this blog [here](https://github.com/RyanArmani/11tylabblogattemp.git)!