DEV Community

Zach Johnson
Zach Johnson

Posted on

2 1

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!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay