Using 11ty to create blogs
Published: 2022-02-28 00:58:56

## What is 11ty?
11ty is a static site generator that was created as a JavaScript Alternative to Jekkyl. It works with several different languages such as markdown, html, javascript, and nunjucks. Furthermore, it uses independent template engines so it can easily be coupled or uncoupled from your project without any hassle. 

## Hello World Blog
The First method that used is provided directly from the [11ty.dev](url) website, first, start by running the following line, 

```
echo '# Page header' > README.md
npx @11ty/eleventy
```
Follow this by running, 

```
npx @11ty/eleventy --serve
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b11t1thjvufcqfkyws60.png)
A prompt will pop up providing you with a local host link. Copy this link then add **/README** to the end of it and you will be brought to a blank website with only a header. From here you can go into VS code and either edit the **README ** file or add a new file to link to when you run the program again. Add your blogposts from DEV into the file and they should pop up when you use `npx @11ty/eleventy --serve`

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

## Using an 11ty Template to host blogs
we can also utilize 11ty through existing templates. In this scenario, I will be using the one provided to us for the lab at [](https://github.com/11ty/eleventy-base-blog). To use this, simply clone the repository, install npm, and open up the code with `code .` From here you can go into the posts tab and add your own blogposts "In markdown format" to the template.

![Code in the editor, after adding in blogposts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6b44eddz6xvfledw2kn.png)

Follow this by running `npm run start`

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

Copy and paste the local host into your URL on your web browser and you will be presented with the page giving you the option to click on the blogs you've added.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62x94xr7v6yby40rv68l.png)
Click on either of the blogs and it will bring you to them.

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

## HAX11ty
The final method used is through a combination of 11ty and out Edtechjoker's very own HAXcms. Like the previous example, clone the provided repo and open it up through the terminal. 

NOTE - This needs `yarn` so if you don't have it figure it out and get it installed.

Add a `Markdown` file and title it something, add your blogpost into said `Markdown` file.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w231m978pqh5lu8k2u5y.png)
Apply all the changes and use `yarn install` before `yarn run` to boot up the website. you will now be able to see any of the pages you have added or edited.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r430oicx28cgwfx7cury.png)

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

## Final Thoughts
Clearly, using a template is much easier than trying to build an 11ty website from scratch. building on this, the implementation of HAXcms works to increase overall accessibility of the website and provide it with some much needed formatting. Provided in the links below will be my repos, and other resources needed to complete this lab.

https://github.com/kfo5087/11ty-hello 
https://github.com/kfo5087/11ty-template
https://github.com/kfo5087/haxerman11ty
https://www.11ty.dev/docs/plugins/syntaxhighlight/