---
type: Article
title: Build your own 11ty starter
description: If you want to build a website quickly then 11ty is a great tool. Here is how I set up my starter pack to get me up and running in a few minutes.
resource: https://www.simoncox.com/post/2023-08-05-build-your-own-11ty-starter/
tags: [Post, Web]
timestamp: 2023-08-05
---

![Billboard with 11ty starter code on it.](/assets/img/content/2023-08-05-build-your-own-11ty-starter-01.jpg){loading="eager"}

Recently late one evening when I should have been going to sleep, I had an idea. I spent the next 30 minutes building and launching a website from scratch. OK, it's not a brilliant site but the fact I can spin a site up quickly got me thinking. Can I do this even quicker? And yes I can!

## The move to Eleventy

I have moved a lot of my projects over to eleventy (also know as 11ty), a static site generator. I wanted something simple that generated flat file html, the fastest type and original type of website. I'm not a fan of javascript but that's exactly what 11ty is behind the scenes - but the output has no javascript! Fantastic!

Eleventy does a lot - I mean a huge amount and you can use it in a huge number of ways. I'm not a React code bunny – would not know where to start –  but I know my html and css and that's all I really need to build a website.  If you know javascript then there is a lot more you can do with 11ty than I can.

I have learnt a huge amount building sites in 11ty in the last 18 months but the key moment that got me started was this video from [Kevin Powell.](https://youtu.be/4wD00RT6d-g). Well worth a watch if you are just starting with 11ty

I keep notes as I build so that I can repeat the steps I need to begin a site build. Now I have taken that a step further and built a starter pack for myself as a template in Github so I can spin up a new populated repository in a few moments.

## Build your own 11ty Starter Pack

Create a new repository for your starter pack on Github and assign that to a folder on your workspace.

Set up the folder structure you want to work with and include the files you need.

![Folder structure for 11ty starter pack.](/assets/img/content/2023-08-05-build-your-own-11ty-starter-02.png)

I have not included any content structures in my starter pack, such as blog posts, as each project is going to be different. This structure gives me a flying start.

I have included the following - you might want to consider some of these for yours:

* robots.txt 

* redirects (for [Netlify.](https://docs.netlify.com/routing/redirects/) or [Cloudflare.](https://developers.cloudflare.com/pages/platform/redirects/))

* a 404 page

* xml sitemap ([from Duncan McDougall's article.](https://www.belter.io/eleventy-sitemap/))

* Assets folder 

* 11ty includes for the html template and the css

* 11ty data (helpers and site meta config)

Add any extensions you commonly use in the .eleventy.js config file. In my case I like to use the 11ty clean-css plugin on most sites. I use (handwritten and minimal) included in the head of the page rather than as a seperate file for page load speed.

I also include all the Pass throughs I tend to use on a regular basis for the files I want 11ty to passthrough to the output directory.

## Github Template

When you are ready with everything change your Github repo to a template repo - in settings for the repo. 

This changes the repo's green button from Clone to Template and allows you to create a new repository based on the files structure.

Here is my [11ty starter pack.](https://github.com/simoncox/11ty-Simons-starter-pack) for you to have look at, or even use it for your own project. 

[Let me know how you get on.](https://seocommunity.social/@simoncox) or if this can be improved in any way.

*Hat tip to [Bob Monsour.](https://www.bobmonsour.com) for proof reading this one!*

[Read full article](https://www.simoncox.com/post/2023-08-05-build-your-own-11ty-starter/)