Build your own 11ty starter
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.. 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.
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. or Cloudflare.)
-
a 404 page
-
xml sitemap (from Duncan McDougall's article.)
-
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. for you to have look at, or even use it for your own project.
Let me know how you get on. or if this can be improved in any way.
Hat tip to Bob Monsour. for proof reading this one!
Next post: Do invisible characters in your code cause issues with search?
Previous post: How I set up lastmod date in my 11ty xml sitemap
