DEV Community

Zach Johnson
Zach Johnson

Posted on

Using 11ty to build base websites

This post is regarding getting started with 11ty and being able to use it in a very basic setting to using it with a fully developed template.

Making a Hello World 11ty Page

The first step is learning 11ty and its capabilities is making a very basic webpage with their beginners tutorial. After going through this tutorial, you can get a good idea of how to use 11ty and mess around with its basic website. I was able to add some functionality and blog posts to my Hello World site. The github repo to that site is here and the working site is here.

Using a Basic 11ty Template

After making that hello world page, I moved on to using a basic template of a 11ty site and adding functionality there. The basic template I used can be found here that you can use too. I added my blog posts to that site as well, the github repo is here and the working site is here. Building and Deploying this site was tricky and took some effort, so don't shy away if it takes a few tries to get it working.

Hax11ty template

The final 11ty site I made was using hax's hax11ty template, which is already a very functional and complicated 11ty site. The template can be found here. I added my blog posts to this as well and they can be seen in the left hand column of the site. The github repo is here and the working site is here.

If you were able to follow along and make your own versions of these templates, then congratulations! There are many other templates out there for you to explore and try on your own as well. Happy hacking!

Top comments (0)