Getting Started with 11ty
Published: 2022-02-25 20:16:38

11ty is a static site generator that is extremely flexible and customizable. Multiple templates can be used, and it can be written in many different languages including JavaScript and Markdown. In this article we will walk through how to set up your first 11ty site from scratch and with templates, and compare the user experiences of both.

## Creating a Site ##
We will follow the guidelines [here](https://www.11ty.dev/docs/getting-started/) to create the first website, but first you need to have at least version 12 of [Node.js](https://nodejs.org/en/). Once you have Node 12 or higher installed, create a directory to put your site and run the command `npm init -y` to create a package.json file that is required for 11ty to run. Next, install and save 11ty to the package.json by running `npm install --save-dev @11ty/eleventy`. 11ty will need files to run, so create an `index.html` file in your directory, and add some content to it. You can run 11ty by typing the command `npx @11ty/eleventy` to compile any files you create, and then `npx @11ty/eleventy --serve` to run the site locally. Go to `http://localhost:8080/` to see your site in action!

## Using a Template ##
Using an 11ty template is just as simple. First, find a template like the one [here](https://github.com/11ty/eleventy-base-blog). Store this repository locally, and configure the template like you did above! Below I have linked three Git Repos and screenshots of the 11ty sites I generated with them for you to check out:

**11ty Blog from scratch [repository](https://github.com/erikgraybill/eleventy-sample)**
![Blog from scratch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf0dd9dk0iepeppnvo3g.png)

**11ty Base Blog Template [repository](https://github.com/erikgraybill/eleventy-template-blog)**
![Blog from Base Blog Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/poeqgmaqvrv4ji66sthn.png)

**11ty Captain's Log Template [repository](https://github.com/erikgraybill/eleventy-third)**
![Blog from Captain's Log Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxvpetjc537xxt9nyvnd.png)

## User Experience ##
Let's compare the experience with making an 11ty blog from scratch and with templates. Starting from scratch is a good option if you want complete control over what you want your blog to look like. You can edit templates, but starting from scratch allows you to control every little detail. One downside to starting from scratch is that everything must be built from the ground up, from styles to content.

Making a blog with a template makes development easier since there is preexisting structure and styling, so you don't need to worry as much about that and can work right away on the content. The one downside to using templates is that you need to understand that predetermined structure, and if they use any languages or tools you are unfamiliar with, you will need to learn them to be able to fully edit the template.

## Conclusion ##
Overall, 11ty is a powerful tool to create good-looking blogs. Whether you choose to build a blog from scratch or use a template, 11ty makes static site generation easier for all developers.