Intro to 11ty

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.
In my code editor, I changed the initial Page Header to Hello World, as seen in the images below.

Repo can be found here

Blog 1

Blogs can be created with 11ty! Thankfully, 11ty offers some blog templates for us to use. These can be found here.

The first template we will be using is called 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.

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.

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.

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.

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.

Repo found here

Blog 2

The second blog being used is called twelvety(source code). Follow the steps of the previous blog to get the blog up and running! Here is the output for the blog app!