Its been 5 months now since migrating from Jekyll to Eleventy, and it has been great. I'm using their own starter base blog (they got live demo deployed), which is super easy to get familiar with. But the more I tried to implement weird stuff like custom JS scripting, the more I found it problematic to deal with the pathing of my assets because of my structure (which, honestly, should’ve been the least problematic part).

There are tons of guide on how to structure Eleventy out there, so after researching a couple of them, I finally managed to fix mine.

Structure Before

|   
+---content
|   |   404.md
|   |   content.11tydata.js
|   |   index.njk
|   |   sitemap.xml.njk
|   |   tag-pages.njk
|   |   tags.njk
|   |   
|   +---about
|   +---blog
|   |   +---drone-training   
|   |   \---technical-excellence-2023
|   |           
|   \---bookshelf
|           
+---public
|   +---css     
|   +---doc     
|   +---fonts     
|   +---img       
|   +---js
|   +---sounds     
|   \---vid
|           
+---_config
|       filters.js
|       
+---_data
|       author.js
|       
+---_includes
|   |   postslist.njk
|   |   
|   \---layouts
|           base.njk
|           home.njk
|           post.njk
\---_site

Structure After

When I researched online, most of them suggested that the names of the input and output folders should be set to src and dist, respectively. I did this for the input folder and renamed other folders such as public to assets, and content to pages, and put them all inside the input folder. However, I kept the output folder as _site because I don’t find it helpful to change it (yet).

The only problem I had when restructuring my folders was that I forgot to rename content.11tydata.js to pages.11tydata.js. Other than that, only minor tweaking was needed in eleventy.config.js and the layouts’ CSS.

|               
+---src
|   +---assets
|   |   +---css     
|   |   +---doc     
|   |   +---fonts      
|   |   +---img         
|   |   +---js
|   |   +---sounds      
|   |   \---vid
|   | 
|   +---pages
|   |   |   404.md
|   |   |   index.njk
|   |   |   pages.11tydata.js
|   |   |   sitemap.xml.njk
|   |   |   tag-pages.njk
|   |   |   tags.njk
|   |   |   
|   |   +---about
|   |   +---blog
|   |   |   +---drone-training
|   |   |   \---technical-excellence-2023
|   |   |           
|   |   +---bookshelf
|   |           
|   +---_config
|   |       filters.js
|   |       
|   +---_data
|   |       author.js
|   |       
|   \---_includes
|       |   postslist.njk
|       |   
|       \---layouts
|               base.njk
|               home.njk
|               post.njk
|               
\---_site

Eleventy FTW

Using Eleventy is very simple for a newbie. I think the best way to understand it is by looking at eleventy.config.js. Based on that config, you’ll understand the plugins (e.g., filters, shortcodes, collections), which helps you understand how Eleventy processes and builds your site. During my time with Jekyll, half the time I didn’t understand what I was doing, or I just didn’t want to touch things because if something broke, I wouldn’t know how to fix it. I’ll probably stick with Eleventy for a long time. Now, back to JS scripts.