Creating a Blog with 11ty
Tags: 11ty
Published: 2022-02-28 03:45:52

## What is 11ty?

[11ty](https://www.11ty.dev/) is a static site generator that you can use with a variety of different templates to easily build and deploy your own website.

## How to use a blog template

To begin to use 11ty by creating a simple blog, we'll first want to head over to 11ty's page with different starter projects.

You can go to that page [here.](https://www.11ty.dev/docs/starter/) You'll then come to a page that looks like this:

![11ty Start Projects Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxn4ugvstonpbag7ga0f.PNG)

If you click on the source code button under the template you want, it'll then take you to that template's GitHub page.

In this post I'll click on the first template titled, "eleventy-base-blog."

From here you're going to want to press the "Use this template" button.

![GitHub repository page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9kbm6yjaqom4eiebw2d.PNG)

_[eleventy-base-blog repository](https://github.com/11ty/eleventy-base-blog)_

Once you click the button, you'll be able to create a new repository for your account and then clone that to your local system.

Once cloned, run "npm install" in the directory. Then "npx eleventy --serve" to build the website locally and run be able to access it through localhost. When you go to localhost, the base website will look like this:

![Base Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owko9xm8ecnhzb6u4yzt.PNG)

Now you can follow the instructions in the GitHub repository to edit the website to add your own information. Congrats, you just were able to create a new blog website based on a template from 11ty!

## 1st Blog Site

My first blog was created with [the eleventy-base-blog template.](https://github.com/11ty/eleventy-base-blog)

It contains a total of 4 blog posts, which are all identical to the posts on this dev.to account.

Here is a picture of what the website looks like:

![1st Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qox73jsq5wynaz8fxyk9.png)

As well as a link to site's GitHub repository.

[Blog 1 GitHub](https://github.com/aaronlienhard/11ty-Lab-Website-1)

## 2nd Blog Site

My second blog was created with [the 11ty-starter template.](https://github.com/moody-person/11ty-starter)

It contains a total of 4 blog posts, which are all identical to the posts on this dev.to account. Just like the first blog website.

This site is more stylized than the original site having different colored text for the post titles, a footer, and some other changes. However, the content is all the exact same.

Here is a picture of what the website looks like (example, for some reason mine wouldn't build correctly even locally):

![2nd website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgbxgm4u1dghlsy2y17l.PNG)

As well as a link to site's GitHub repository.

[Blog 2 GitHub](https://github.com/aaronlienhard/11ty-Lab-Website-2)

## 3rd Blog Site

My third blog was created with [the supermaya template.](https://github.com/madebymike/supermaya)

It contains a total of 4 blog posts, which are all identical to the posts on this dev.to account. Just like the first and second blog website. 

This site has more links on the header, a footer that explains what the Supermaya kit is, as well as box at the top that explains what the blog is. However, the content is all the exact same as the first two websites.

Here is a picture of what the website looks like (example, for some reason mine wouldn't build correctly even locally):

![3rd website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxi1gpmdgf5r7dmwvva5.PNG)

As well as a link to site's GitHub repository.

[Blog 3 GitHub](https://github.com/aaronlienhard/11ty-Lab-Website-3)