Working with 11ty/eleventy to make Blogs
Published: 2022-04-27 23:13:27

11ty is a static site generator that can build sites using HTML and CSS. 11ty takes complex markdown files and JSON files and condenses them resulting in an API for us to leverage content and build templates with.

[Learn 11ty from Scratch Article](https://learneleventyfromscratch.com/#about-your-instructor)

**Starting with 11ty**
1. First ensure you have the latest versions of NPM and NODE installed on your PC. Simply type npm -v or node -v in your terminal to see the version of npm and node you currently have.

2. Create a folder, preferably named 11ty, and open it using the Visual Studio code editor. While in Visual Studio code editor under the 11ty folder, create a .gitignore file. What this does is ignores any file that ends with the extension after the asterisk (*)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p49a920nr027imuywwal.JPG)

3. Add a .eleventy.js file under the 11ty folder you created. This file will empower your 11ty site to produce the final output.

4. Add dependencies to your 11ty site. Now we will install a package.json file. This allows npm to handle the project's dependencies properly. In your 11ty folder run 'npm init -y' in your terminal. This will allow npm to generate the package.json file for you. 

5. With all of those steps complete, now it's time to install eleventy. Run the command 'npm install @11ty/eleventy' in your terminal. 

6. Create a folder and label it 'src'.  Under this folder create a file named index.md. For this blog post, I will simply be typing Hello World! in the index.md file. Save all your scripts in VS code editor and type 'npx eleventy --serve' in your terminal and click on the Local URL. You should see a page that looks like this: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zf0i8ctja0kdcp8lsb6i.JPG)

**Pre-established Eleventy Blog Template**
Go to [eleventy base blog](https://github.com/11ty/eleventy-base-blog) to clone the repository to your local file/folder. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t18jl1vvghqrbi2awmit.JPG)

The cool thing about leveraging this repo is that it comes pre-built with links, tags, and posts. All that is required of you is to edit the information in the files. Here is an example of how I edited the firstpost.md file:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yx06b9qzksncis8wx9a5.JPG)

Pretty awesome? Yes, very.

Now to take a look at how everything came out, in your terminal execute the npm install command. After all dependencies are loaded in, type npx eleventy --serve in your terminal. This is how my blog post webpage turned out:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mwy63r5rrzlpm3dk8ew.JPG)

**11ty Blog Post Part 3**
For this eleventy site, we will be following the steps provided in the first section, getting started with 11ty, however we will be adding a little more to it. The work is credited to [Learn Eleventy From Scratch Article](https://learneleventyfromscratch.com/).  To run the site easier, change the scripts section of the package.json from "test": "echo \"Error: no test specified\" && exit 1" to "start": "npx eleventy --serve". What this does is allows you to type npm start to serve the site. Follow the steps in the article to complete building your sample eleventy site.

**First User Experience**
From here, we have a thorough understanding of the concept behind 11ty/eleventy. The Part 3, with leveraging a sample of someone else's eleventy site was the most time consuming but in depth learning experience from all three static sites created. The easiest and most fundamental was the actual blog post 11ty site. This includes a great template to organize things and get started with eleventy. 

**Links and Repositories**
[eleventy sample repo](https://github.com/maw6a0/eleventy)
[Site 2](https://github.com/maw6a0/Lab_6_Blog_2)
[Hello World Beginners Setup](https://github.com/maw6a0/Lab_6_Hello_World_Style_Blog)