a couple @eleven_ty tips for what may be a sticking point for beginners

assume you have
- installed eleventy
- created a page
- set up a template
(basically where this getting started guide gets you: https://www.11ty.dev/docs/getting-started/)

this thread is about adding CSS at this point

1/7

two essential pieces of info

1. you need a config file. Many starters come with an empty one for you to stumble onto, but eleventy’s basic one doesn’t, so just go ahead and create a new file named `.eleventy.js` in the root directory of the project

2/7

2. When eleventy puts everything together, it looks at each project file to see if they’re one of the filetypes that templates can use (html, liquid, markdown, pug, etc). If so, the file gets turned into a page. If not, the file is ignored.

Enter “passthrough files”

3/7

A passthrough file is exactly what it sounds like:

you can add a non-templating filetype to the list of template types that eleventy looks for, and when that type of file doesn’t process as a template, eleventy will know to just copy it straight into the output

4/7

ie, when eleventy sees your CSS file and goes, “huh, that’s not html or markdown” instead of ignoring it, it’ll copy it into the output and your project will have CSS

5/7

here’s the page in the eleventy documentation showing exactly what you need to add to that config file you created (. eleventy.js) to add CSS (and images, to boot).

there’s more to it than I’ve described, but this should be a good start :)

https://www.11ty.dev/docs/copy/ 

6/7

additionally, if you’re wanting some beginner-friendly tutorials showing how to get set up with eleventy, @TatianaTMac is in the process of writing a super solid series about it, here’s the first post in the series -->
https://tatianamac.com/posts/beginner-eleventy-tutorial-parti/

7/7