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 to create the first website, but first you need to have at least version 12 of Node.js. 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. 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
11ty Base Blog Template repository
11ty Captain's Log Template repository
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.
Top comments (0)