What is 11ty?
11ty 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. You'll then come to a page that looks like this:
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.
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:
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.
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:
As well as a link to site's GitHub repository.
2nd Blog Site
My second blog was created with the 11ty-starter template.
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):
As well as a link to site's GitHub repository.
3rd Blog Site
My third blog was created with the supermaya template.
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):
As well as a link to site's GitHub repository.
Top comments (0)