What is 11ty?
11ty advertises itself as an easy static site generator. After getting used to the tool, I would have to say this is not a false advertisement. 11ty is an extremely powerful tool for creating static sites(anything from blogs to archives and full sites) in a very easy way.
Hello World by 11ty
The first site I made using 11ty was incredibly basic, simply saying Hello world, however, the process used to make this simple 11ty site from scratch proved vital to figuring out how to use templates for more advanced websites. I followed this incredibly helpful guide guide to get started.
The first step is to make a directory and install npm as usual. Next, 11ty needs a package.json file to install, so create one in your new directory using npm init -y
you will then install 11ty into the local directory using npm install --save-dev @11ty/eleventy then run 11ty by entering npx @11ty/eleventy in your terminal. After installing the template files you'll use, I did echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hello World</p></body></html>' > index.html and then echo '# Page header' > README.md After doing this run 11ty again.
Now you can go in and play with your blog and make it say whatever you want to. When you're done, npx @11ty/eleventy --serve will launch your static site on local host.
Using a template
For the second site I made using 11ty, I used this repo which is a more advanced 11ty template that can be customized. After following the instructions in the README.md file and edited all the markdown I came up with this:
HAX11ty
The incredible resource that is HAX also has an 11ty website template that can be used, this can be found here
This template is incredibly useful as it provides far more customization and deployment options then the previous template. The instructions provided in the template walk you through how to edit the files and was incredibly helpful. Especially when you're still getting used to using 11ty.
Github Repo
11ty vs HAX11ty
There is a noticable difference between these two templates. HAX11ty is far more advanced and gives you many more options. However, with complexity comes the potential for issues. I had a more difficult time getting my site to launch with HAX11ty as opposed to the 11ty template. This is not a reflection of the HAX11ty repo, rather the abundance of options and features made it easier for someone like me who was learning the tool to make a mistake more easily. Once the site launched however, I was far happier with the appearance and functionality of HAX11ty
Top comments (0)