Eleventy Crash Course #1 - Setting up a new 11ty project, creating Layouts, using Nunjucks templates

[@relentlessslog]

{% block %} {% endblock %} has greatly improved the overall quality of my life.

[@copaceticobserver]

You know... the potential is pretty crazy

[@bavariantrawler]

Straight to the point! Love it! This is the exact use case beginner guide I've been looking for.

[@QualityScrub]

This is exactly what I was looking for to get started. Thank you so much for putting this together!

[@jaydanurwin]

Glad to hear you found it helpful! 😄

[@ivanho9245]

Hey! Just discovered that serie! Thanks a lot for that. It's way more enjoyable learning a new tech by watching videos like these than by reading the official documentation haha 🤓 Keep up the good work 💪

[@jaydanurwin]

That's great to hear! I'm the same way. I'd much rather watch a video or pick apart existing code than read through docs. 😅

[@GiovanniToso26]

Fantastic. Grazie mille. I was looking for a video with the basics and this one is perfect. Thank you

[@dmitriyzyuzin7260]

Thank you! Decided to create a blog and your tutorials are extremely helpful!

[@arpitcodes]

Great video! Looking forward to more videos on 11ty.

[@jaydanurwin]

Thanks! I'm not sure how many total parts I'll be doing quite yet but by the end I want to show someone how to have a fully fleshed out setup (styles, JS bundling, web components support, maybe even Typescript support, a blog with tags, etc)

[@rtc-zaha]

@@jaydanurwin Awesome, looking forward to these videos. Just started rebuilding my website from ~2000 with 11ty two weeks ago (also considering Astro, as I learned about it only recently). One question: Do you know how to setup VS Code so you can have both, IntelliSense for HTML and Nunjucks with a Exension? Despite anything I tried it was only one or the other so far.

[@jaydanurwin]

Sorry for the delayed response Zaha. As you'll see in the video I configure my 11ty setup to use Nunjucks templates inside of .html files which means I get all of the advantages of using html files in VS code (intellisense, emmet, etc.) then I just this Nunjucks Snippets extension to get some help here and there for Nunjucks templates. (marketplace.visualstudio.com/items?itemName=luwenjiechn.nunjucks-vscode-snippets&ssr=false#overview)

[@brunosastre1948]

Great tutorial! Thanks so much for sharing.

[@KoarisDesign]

Dude your mic is insane, makes the video really enjoyable with headphones. You could just talk shit and I would listen..

[@katadermaro]

Hi Jaydan, thank you for doing this. Please answer this. I only know HTML and CSS pretty well and basics of JS like functions, arrays, objects and basic stuff really. I've not gone anywhere near APIs before this. Should I follow this playlist or focus on JS more before starting with 11ty?

[@jaydanurwin]

Hey Akash, of course I'm glad to hear it's helping you out! You can actually get really far, create an entire website even on 11ty without a single line of JavaScript. So I would say to jump right in and avoid the JS if it's too confusing at first. Sure, this course is more focused on helping devs see the framework use case of 11ty but I hope I'm conveying that the JS templates are a feature and not a requirement.

[@katadermaro]

@@jaydanurwin thank you so much. 🤗

[@eraybesirli8778]

Thank you so much, very nice lecture

[@ar_xiv]

It’s funny to me how we’re wrapping all the way around to something like php templating from 20+ years ago and honestly I’m totally fine with that

[@danielmarkoff2476]

Thank you! :) We are looking forward to the next video! Subcribe!

[@jaydanurwin]

Thanks for the kind words Daniel! I'm going to try my best to get part 2 recorded this weekend 🙌🏼

[@20handsup]

Your '.eleventy.js' file... the contents are ignored. If I leave all that out, it works fine.

[@oliverp8006]

If you want to use the 'older' templating languages it's eleventy, if you want to work with the new kids on the block js type React/Vue/Svelte it's Astro

[@jaydanurwin]

I mostly agree, the only point I would argue is you *can* use modern JavaScript syntax for templating in 11ty. So not all of the options are older. I really enjoy both though!

[@20handsup]

I can't get your code to work.

[@DanteMishima]

Thank you so much

[@jaydanurwin]

Of course! I'm glad to hear it's helping you out!

[@kimbapslayer1995]

So 11ty is basically a site generator for developers? Good for documentation, portfolios? Definitely not something to build for a client I'm assuming

[@jaydanurwin]

Great question and I'm sorry I didn't address it better in the series. 11ty can definitely be used for client sites and it's actually used to build some really high traffic sites. (web.dev and netlify.app to think of a couple) You'll most commonly see it used by developers because developers like to show off the tools they're using for their own site haha

[@kimbapslayer1995]

@@jaydanurwin ahh okay. Is there a way to hook this up to a CMS? Everything looked really easy, but I think it would be tough for non tech people to edit MD files in a code editor

[@psilocybin-]

look up decap CMS(formerly netlify cms) that's exactly for the use case you thinking of@@kimbapslayer1995

[@Kanexxable]

I don't know anything about blogs at all I want to make one and get an audience. any articles or advice.

[@jaydanurwin]

I am not personally a blogger myself but the best piece of advice I've heard on content creation in general is to be consistent and always aim for each post to be at least 1% better than the last.

[@therealzaybee]

You are awesome... !! but only thing that is annoying about you is that you have your explorer section of your vs code on the right side.

[@jaydanurwin]

Haha give it a try for a few days and let me know what you think! So far I've converted 2 devs to the dark side 😉

[@oussamaghrib4558]

If Post Malone was not a singer 😅.