Getting Started with 11ty
Published: 2022-02-27 20:44:11

#### What is 11ty?

11ty is a static site generator that can generate content pages written in multiple languages, including markdown. It basically tries to render html from other file types in your directory. In this post, we will be creating 11ty blogs using 3 different methods!

## Hello World style 11ty Blog

In the first method, we will be using straight syntax from the 11ty website to create a baseline hello world style blog post. Firstly to install, this code can be run in terminal:
`npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev`

Once 11ty is installed, I created a new folder on my laptop to host our files for the blog. After navigating to the folder from terminal, we can run up the 11ty pages.
`echo '# Page header' > README.md
npx @11ty/eleventy`

If run correctly, you should see a message like this:
`Writing _site/README/index.html from ./README.md (liquid)
Wrote 1 file in 0.03 seconds (v1.0.0)`


Once our files have been set up, we can run it by coding
`npx @11ty/eleventy --serve`
This message will pop up:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4zofc46nwhbdttokbil.png)
From here, you can copy the local host url with the addition of /README/ at the end of the file path. Pasted into a browser, it should look like this!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9uba4u3hx5fs5udr3q5.png)

Once you have your baseline file, you can insert your content and create your page! I opened the folder I made in VSCode and chose to insert one of my other blog posts about JavaScript. Below is how it turned out!

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

## Using Templates for a Blog
One way that you can create your own 11ty blog site is from using a template! There are plenty of public Github repositories available for your use, I chose to use this one https://github.com/11ty/eleventy-base-blog

In Github, I selected to use that template and created a new repository to host this new blog site. This template has markdown pages in "posts" folder titled firstpost.md, secondpost.md, etc. These are the files that I edited as my blog posts!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdek8itgwjjdcx2rf8ie.png)
In this image from my VSCode, you can see that I am in my firstpost file, with my JavaScript blog content in it. Once your posts are edited, you can run `npm run start` in terminal.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7g7krzj5in84uktbeuy5.png)

Similar to the first method, you will need to copy the local host url and paste it into your web browser. Mine looked like this!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40d7753wbo35b8xwbejz.png)
 
 
## HAX 11ty Blog
For our third and last method that we will be demonstrating, we will be using another template but it simplifies how we can deploy in a static form. To start, you will need yarn installed on your machine. You can use the template and create your own repository. [https://github.com/elmsln/hax11ty]

In this template, you can add your own blog files into the directory, or edit the current ones to your liking. I chose to edit the current files to add in my blog posts. To run, you can use `yarn install` then `yarn start` to load your site. Mine looked like this!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsz3ouruuh7631z6lsoq.png)
 

#### Hello World References:
https://www.11ty.dev/
https://www.11ty.dev/docs/plugins/syntaxhighlight/