Watched this video twice today. After watching it the first time I picked up a plain html and css landing page I'd done and decided to create a blog, following you along the second time. It worked 😭🎉 Thank you so much 🙌 This is so much progress in one day for me.
Kevin Powell is an amazing instructor. Truly passionate about his craft, and clearly a master. Thank you, Kevin for the hours of time you've spent recording videos to help myself and countless others. 🙂
Even though this video is a year old. I am now determined to create a blog. Thank you, Kevin! I've saved many of your tutorials and videos as they're really informative and very helpful.
I've watched quite a few of these intro Eleventy tutorials, many with a very similar premise of setting up a blog with markdown files and using Netlify CMS, but yours is by far the best, most detailed and easiest to follow. I'll soon be starting a site with this setup, maybe with some RSS feeds coming in, etc. This will be an invaluable resource in my Eleventy journey! Thanks!
This tutorial was so mind blowing!!!!!!!!! I'm taking up coding after 4 years and I really had a lot of fun following and coding along. You've taught me so much and have inspired me to pursue my dream project. What seemed like a far off fantasy now seems like a reality waiting to happen. Truly one of the BEST coding channels on RUclips. Looking forward to more great tutorials such as this one!
This is an immensely valuable tutorial. Thank you so much for taking the time to share your knowledge on this involved process. NOTE: at 1:16:22 the "Identity" menu item is not there anymore. It is now hidden under Integrations -> Identity.
This was a *really awesome* introduction, thank you. As a long time full stack dev myself, it blew my mind to find a [mostly] JS-based client-side CMS that used GitHub as a back-end to store user-driven content (amazing, and it’s versioned too of course). Since the depth of my expertise is more on the back-end side of things, I was way over-complicating it. For example, my mind shifted from having a VM instance, maybe Cloud Run, even rolling a cheap k8s cluster (e.g. GKE Autopilot), etc. It’s super awesome to see how far things have come over the years and Netlify (especially at this price point) is really killing it with this approach! Vercel, too.
Thanks Kevin, I've been trying to understand 11ty a while ago and got confused with their docs, your tutorial is the first one that worked for me, now I'm up and running! ❤️
Wow. Thank you for holding out hands and walking us thru this whole tutorial. Its impressive you have your personal site in netlify. This is so cool. Thank you for taking the time❤
Great video, thank you so much. I'm a bit in love with Kevin after this, I wish I'd found his channel earlier. In 2023 this all still works, I had a little bit of a struggle finding the place to invite a blog user, as it's moved - it's now in Integrations - Identity
Whoa. That was a fantastic tutorial! I'm new to this and have been watching your videos for a while now, and as for "long" - it was easy to understand and presented well. Thanks very much :)
Thanks Kevin! I was looking for a way to start blogging and also build my portfolio on the same site due to SEO. But could'nt find a way to do it in cheap and fully customizable (cus I'm not in the position to afford it). This tutorial is gold for me, thanks for sharing your knowledge and explain it in such a clear way.
This is great, I was always wondering how I could take a light weight site and deliver content in this way without using a web platform or hosting my own back end. So glad you made this video Kevin. Thanks a bunch!
Kevin, this is an awesome video, I spent a few days following your instructions and I got a lovely site up and running the CMS working first time - your videos are great, I have learnt a lot from them - Thanks very much
Am blown away kevin this is what I dearly needed and by the views am not the only one. I've tried Strappy, Sanity, Hugo etc was even venturing to webflow but this just saved me a tone of time and the simplicity of it is crazy!! the netlify CMS integration 🤯. pls don't stop there with this hope there's more to come like a simple e-commerce. for the 11ty and netlify creators 🙏🏾🙏🏾
I just found your channel and its great! CSS was always like putting to me (golf) .... I would always put it off until the end thinking its not that bad, its just css. Then like a golfer all into how far they can drive the ball, but then spends an hour on the green ..... that was my css life 🤣 I could build a lot of complicated stuff but then I would just spend so much time tinkering with nonsense because I "knew" css but didn't really "know" it.
Thank you, Kevin! I couldn't get nunjucks to run until I reset VSCode to default settings and then modified my return statement in .eleventy.js to return { dir: { input: "src", includes: "_includes", output: "_site", }, templateFormats: ['md', 'njk', 'html'], markdownTemplateEngines: 'njk', htmlTemplateEngines: 'njk', dataTemplateEngines: 'njk' }; That's all I did and not it works fine and I can now follow along with the rest of the tutorial.
There are much easier ways and CMS you can do that. CMS you just you have to integrate some very easy template tags into your s and thats it. Try Coast CMS (its free and tiny) no need to do so many steps to generate blog posts wirh a admin panel. It even comes with full frontend editing.
You are so good at explaining all of this! Thanks for an excellent tutorial. I’ve used Jekyll SSG for a few years and just started a site using Hugo. The Netlfiy CMS part of this video was particularly useful! I’m excited to add that functionality to my Hugo site :)
Hi Kevin! Do you have installed any extensions of .njk ? After editing settings according to your tutorial, Emmet still don't works inside .njk by default. Found the reason - we should turn on from "plain text" to "html" in the bottom panel of VScode when file .njk opens!
I was following along with this video a while back, and I remembered tweaking my settings file until I got it to work by default. This is what I have in it: "emmet.includeLanguages": { "javascript": "javascriptreact", "nunjucks": "html", "njk": "html" }, "files.associations": { "*.njk": "html" } That way you don't have to set it from plain text to html each time.
I faced a similar problem. Just setting language mode to HTML will not recognize nunjucks template formatting. So my solution was to install the Nunjucks extension, which then automatically recognises .njk as nunjucks. Then in Settings/Emmet:include path I included "nunjucks" to "HTML".
Hi Kevin, due to family (new baby) and work unfortunately I'm not doing Web design in about 3/4 years so haven't seen your videos for a long time. Just wanted to pop by and say wow, how you're videos have improved!!! Great stuff glad you're doing well
This was the funnest tutorial I've followed in a long time! Thank you! I love learning the different tools and technologies and how to use them in a practical project!
I wanted to learn how to create a lightweight wesbite that I could upload to IPFS and link to my ENS domain name, and this put my on really great footing
Hello Kevin. Oh, this is really so amazing. I really loved it. Thank you so much. You know, I think in the near future I will get back to you much more often. 🙏
I really enjoyed this video. Nice work! My personal website is currently built using vue/nuxt and netlify cms. I'm going to switch it over to 11ty. I like how it doesn't add too much complexity and it's as close to static html website as you can get.
Kevin, this course is a success, I thank you very much. I would also like users to be able to comment on each post, and to be able to register through Facebook or Google.
I loved the whole video. Even with frozen camera you make it rock & roll, Kev. By the way, I found it easier to use Django. Cause it makes the same thing, but it is really powerful thou.
I almost always have a need to put a page up somewhere for something or to mock out some ideas quickly. I've started using eleventy a few months ago with a build pack that includes Tailwind and PurgeCSS, that, for a single page, spits the CSS straight out into the header. I have a home page for my local network to navigate to my Rails servers, Plex server, NAS access, and more, all built on eleventy. And I'm working on making a link generator for a personal music project so I don't have to pay some dumb company $9 a month for the most basic of HTML. It's been super great. But the CMS thing is excellent, especially with Netlify, and I will absolutely take advantage of that!
Hi, I'm very new to 11ty and Node. But this video is super easy and helpful. I made my static site into dynamic blog site. Thank you. And I'm curious to get to know how to customize the preview pane of Netlify CMS, same like the blog page
Great work Kevin! This worked very well. A good pace to your instructions too. I still get plain formatting in the .njk files, except for base.njk (any way to force that?), but otherwise everything worked (deployed) successfully. Thanks!
Thank you for making a very easy to follow video tutorial! But I also want to add comment system to this static blog without backend and I still haven't found a way. My idea is use the netlify function to collect data from a comment form, write a md file and use 11ty to deploy again but it seem dificult with a newbie like me. Can u make a new tutorial video to slove this problem?
What VSCode extension do you use for highlighting njk and front matter syntax? I tried using Nunjucks Template but the formatting is broken, and the others don't highlight front matter syntax.
Great tutorial, very clear explanation. At 8.30 you show us package-lock.json with different dependencies which are current at the time we created the configuration. So how will we/netlify continue to keep these versions up-to-date/current? What happens when one of the dependencies becomes outdated or no longer used (and we need to find replacements in a hurry). This happen to me and I could not resolve it.
everytime i am stuck, kevin uploads a video and i have almost the entire answer in one of your videos ! i really enjoyed your content on scrimba, really gave me several motivation boosts.. thanks for making this awesome content for us !
Ok… now I love you! This is my prefer stack! Netlify cms + eleventy! But what do you think to use this stack with vue.js to build an e-commerce? Do you preferred netlify Cms or other solution like sanity, Contentful ecc?
For something more robust, Sanity looks awesome, though I dont' have much experience with it. Astro just launched as well which looks really interesting (a new SSG)
@kevin Powell What do you think to use css-modules vs styled components for a react component lib or app. Maybe also a idea for a video ? Thank you great videos!
can you please do an update with the new version - decap cms? as it seems like netlify cms is disappearing (and maybe a how-to-update if someone wants to move from netlify cms to decap cms)
Watched this video twice today.
After watching it the first time I picked up a plain html and css landing page I'd done and decided to create a blog, following you along the second time.
It worked 😭🎉
Thank you so much 🙌
This is so much progress in one day for me.
Tried this in Nov 2024 and this tutorial still works straightforwardly. Thanks a lot for the detailed video.
Kevin Powell is an amazing instructor. Truly passionate about his craft, and clearly a master. Thank you, Kevin for the hours of time you've spent recording videos to help myself and countless others. 🙂
hey help me with the CSS I don't get any errors in the terminal but my blog page is not taking any css from the style.css sheet any answers?
@@rahulborhade7214 did you add your css as passthrough in config?
@@rahulborhade7214 also make sure you add
the href should include "/" as path as / will enable it to look at root folder because blog is a subfolder
Even though this video is a year old. I am now determined to create a blog.
Thank you, Kevin! I've saved many of your tutorials and videos as they're really informative and very helpful.
I've watched quite a few of these intro Eleventy tutorials, many with a very similar premise of setting up a blog with markdown files and using Netlify CMS, but yours is by far the best, most detailed and easiest to follow.
I'll soon be starting a site with this setup, maybe with some RSS feeds coming in, etc. This will be an invaluable resource in my Eleventy journey!
Thanks!
This tutorial was so mind blowing!!!!!!!!! I'm taking up coding after 4 years and I really had a lot of fun following and coding along. You've taught me so much and have inspired me to pursue my dream project. What seemed like a far off fantasy now seems like a reality waiting to happen. Truly one of the BEST coding channels on RUclips. Looking forward to more great tutorials such as this one!
This is an immensely valuable tutorial. Thank you so much for taking the time to share your knowledge on this involved process. NOTE: at 1:16:22 the "Identity" menu item is not there anymore. It is now hidden under Integrations -> Identity.
saved my life
This was a *really awesome* introduction, thank you. As a long time full stack dev myself, it blew my mind to find a [mostly] JS-based client-side CMS that used GitHub as a back-end to store user-driven content (amazing, and it’s versioned too of course). Since the depth of my expertise is more on the back-end side of things, I was way over-complicating it. For example, my mind shifted from having a VM instance, maybe Cloud Run, even rolling a cheap k8s cluster (e.g. GKE Autopilot), etc.
It’s super awesome to see how far things have come over the years and Netlify (especially at this price point) is really killing it with this approach! Vercel, too.
Thanks Kevin, I've been trying to understand 11ty a while ago and got confused with their docs, your tutorial is the first one that worked for me, now I'm up and running! ❤️
It worked!!! Thank you soo much. The day I get my first job or my first client, I am gonna donate to you, teacher ❤️
Kevin, its 2024 and I'm ecstatic about learning this from your video. Thanks much for the tutorial, really awesome.
This is exactly what I needed. I've been searching for something like this for a few years now. Thank you x1000 !!
This is incredible. How or why netlify provides this for free is beyond me. Awesome video, thanks!
Wow. Thank you for holding out hands and walking us thru this whole tutorial. Its impressive you have your personal site in netlify. This is so cool. Thank you for taking the time❤
Great video, thank you so much. I'm a bit in love with Kevin after this, I wish I'd found his channel earlier. In 2023 this all still works, I had a little bit of a struggle finding the place to invite a blog user, as it's moved - it's now in Integrations - Identity
Whoa. That was a fantastic tutorial! I'm new to this and have been watching your videos for a while now, and as for "long" - it was easy to understand and presented well. Thanks very much :)
This feels like the web community is finally moving to the right direction again
Totally brilliant. Waiting more JAMStack stuff
Same here!!! MORE!
Thanks Kevin! I was looking for a way to start blogging and also build my portfolio on the same site due to SEO. But could'nt find a way to do it in cheap and fully customizable (cus I'm not in the position to afford it). This tutorial is gold for me, thanks for sharing your knowledge and explain it in such a clear way.
This is great, I was always wondering how I could take a light weight site and deliver content in this way without using a web platform or hosting my own back end. So glad you made this video Kevin. Thanks a bunch!
Kevin, this is an awesome video, I spent a few days following your instructions and I got a lovely site up and running the CMS working first time - your videos are great, I have learnt a lot from them - Thanks very much
Am blown away kevin this is what I dearly needed and by the views am not the only one. I've tried Strappy, Sanity, Hugo etc was even venturing to webflow but this just saved me a tone of time and the simplicity of it is crazy!! the netlify CMS integration 🤯. pls don't stop there with this hope there's more to come like a simple e-commerce. for the 11ty and netlify creators 🙏🏾🙏🏾
Damn Kevin how did you know exactly what I needed??
I just found your channel and its great! CSS was always like putting to me (golf) .... I would always put it off until the end thinking its not that bad, its just css. Then like a golfer all into how far they can drive the ball, but then spends an hour on the green ..... that was my css life 🤣 I could build a lot of complicated stuff but then I would just spend so much time tinkering with nonsense because I "knew" css but didn't really "know" it.
We love seeing this video Kevin!! Thanks again for working with us and creating such a cool project!
It was a blast to create!
Thank you, Kevin!
I couldn't get nunjucks to run until I reset VSCode to default settings and then modified my return statement in .eleventy.js to
return {
dir: {
input: "src",
includes: "_includes",
output: "_site",
},
templateFormats: ['md', 'njk', 'html'],
markdownTemplateEngines: 'njk',
htmlTemplateEngines: 'njk',
dataTemplateEngines: 'njk'
};
That's all I did and not it works fine and I can now follow along with the rest of the tutorial.
thank u
This is amazing. Instead of typing clear to clear the terminal, you can use the keyboard shortcut "Ctrl + l"
Oh, thanks for that!
There are much easier ways and CMS you can do that. CMS you just you have to integrate some very easy template tags into your s and thats it. Try Coast CMS (its free and tiny) no need to do so many steps to generate blog posts wirh a admin panel. It even comes with full frontend editing.
You are so good at explaining all of this! Thanks for an excellent tutorial. I’ve used Jekyll SSG for a few years and just started a site using Hugo. The Netlfiy CMS part of this video was particularly useful! I’m excited to add that functionality to my Hugo site :)
This is what I was waiting for a CMS.
Hi Kevin! Do you have installed any extensions of .njk ? After editing settings according to your tutorial, Emmet still don't works inside .njk by default. Found the reason - we should turn on from "plain text" to "html" in the bottom panel of VScode when file .njk opens!
I was following along with this video a while back, and I remembered tweaking my settings file until I got it to work by default.
This is what I have in it:
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"nunjucks": "html",
"njk": "html"
},
"files.associations": {
"*.njk": "html"
}
That way you don't have to set it from plain text to html each time.
I love you
I faced a similar problem. Just setting language mode to HTML will not recognize nunjucks template formatting.
So my solution was to install the Nunjucks extension, which then automatically recognises .njk as nunjucks. Then in Settings/Emmet:include path I included "nunjucks" to "HTML".
Thank you for this comment! It helped solve my issue :)
Thank you for updating with your solution, you are the best!
Hi Kevin, due to family (new baby) and work unfortunately I'm not doing Web design in about 3/4 years so haven't seen your videos for a long time.
Just wanted to pop by and say wow, how you're videos have improved!!! Great stuff glad you're doing well
This was the funnest tutorial I've followed in a long time! Thank you! I love learning the different tools and technologies and how to use them in a practical project!
I loved the way you explained everything! I think I'm going to use your process to convert my Blogger blog to 11ty.
OMG Thank you for this! I’ve been contemplating moving away from WebFlow and WordPress and I think this may just be what I’ve been looking for.
Awesome! I've done this tutorial ! Thank you Kevin for this nice starting point to use 11ty.
For anyone having issues with emmet not showing html suggestions, try this:
"files.associations": {
"*.njk": "html"
}
This fixed the issue for me!
To clarify, add this rule to your settings.json file
I found that setting "files.associations" to include "nunjucks": "html" did the same thing.
Awesome, thank you :-) Would love to see you do another vid but non blog style. Maybe portfolio?
After watching I feel like I finally get SSG+CMS combo. Thanks
I wanted to learn how to create a lightweight wesbite that I could upload to IPFS and link to my ENS domain name, and this put my on really great footing
Hello Kevin. Oh, this is really so amazing. I really loved it. Thank you so much. You know, I think in the near future I will get back to you much more often. 🙏
Hey you made a vid about my question! really appreciate it, Thank you so much!
I really enjoyed this video. Nice work! My personal website is currently built using vue/nuxt and netlify cms. I'm going to switch it over to 11ty. I like how it doesn't add too much complexity and it's as close to static html website as you can get.
Hi Kevin! Check it out pnpm and reduce npm installation time and save some disk at the same time. You going to love it ;)
Kevin, this course is a success, I thank you very much. I would also like users to be able to comment on each post, and to be able to register through Facebook or Google.
Thank you for this! Been struggling for a few days with trying to find a way to use a cms without using a template system
Just today I was looking for a video on this topic and now you have made it! Thank you!
I was searching for it all over youtube previous month. Its finally here 😊
Been looking for a video just like this, thanks so much! I don't often comment on YT, so just want to say thanks for all your content!
Fantastic! You basically used Django without using Django!
This is incredible... Thank you for all of the things you've shared🥹
I loved the whole video.
Even with frozen camera you make it rock & roll, Kev.
By the way, I found it easier to use Django. Cause it makes the same thing, but it is really powerful thou.
But you would need a server to implement django, this is all static. Or I am missing something here?
Glorious! I‘m still pretty new to the cascade and stuff and been using hugo with netlify lately. But this was so interesting! Thank you!
Maybe hugo is worth a look as well? Why are you using eleventy specifically?
Thans for the project repo... Great starting template. Used it to create my GitHub pages
Wow this is amazing Kevin! Keep it up!
THANK YOU!!!! I'm a designer and I learned a lot from you!!!!
Great tutorial and i'm loving watching your sessions on here and Twitch
I use eleventy for a while and it's amazing.
I almost always have a need to put a page up somewhere for something or to mock out some ideas quickly. I've started using eleventy a few months ago with a build pack that includes Tailwind and PurgeCSS, that, for a single page, spits the CSS straight out into the header. I have a home page for my local network to navigate to my Rails servers, Plex server, NAS access, and more, all built on eleventy. And I'm working on making a link generator for a personal music project so I don't have to pay some dumb company $9 a month for the most basic of HTML. It's been super great. But the CMS thing is excellent, especially with Netlify, and I will absolutely take advantage of that!
Nice fiddle leaf fig! 👍
Hi,
I'm very new to 11ty and Node. But this video is super easy and helpful. I made my static site into dynamic blog site. Thank you.
And I'm curious to get to know how to customize the preview pane of Netlify CMS, same like the blog page
I'd use contember for that. They have a headless CMS template, but you can edit it much more easily, and also make your own from scratch.
28:05 Regarding copyright...copyright identifies the year the intellectual property was created, not the current year. The first one to publish an original concept owns the intellectual property. So changing it to the current year is like stepping away from the front of the line and going to the back of the line.
If you are adding original content to one publication, such as a website, over several years then put a range of years from the first year of creation to the last year of creation, e.g., © 2020-2023.
Great work Kevin! This worked very well. A good pace to your instructions too. I still get plain formatting in the .njk files, except for base.njk (any way to force that?), but otherwise everything worked (deployed) successfully. Thanks!
Thank you so much. It worked. I am really happy about. Hope to see more:)))
Was waiting for this one for so long.
Kevin, you are a rock star!😊
Thank you for making a very easy to follow video tutorial! But I also want to add comment system to this static blog without backend and I still haven't found a way. My idea is use the netlify function to collect data from a comment form, write a md file and use 11ty to deploy again but it seem dificult with a newbie like me. Can u make a new tutorial video to slove this problem?
I love you Kevin, thank you for being a real G.
easy to follow, great content as usual!
Thankl you so much. I finally have my CMS working perfectly.
Nice. Great video, i love jamstack 🙃
Most honest advice ever: "there's a node_modules folder. It's full of stuff. You don't want to go in there. Just ignore it."
😆
Really helpful, watched a few times to get it right.
This is like django. It's awesome!
This was amazing to watch and learn. Thank you so much.
This is such an incredibly well put together tutorial. Liked and Sub'd.
What VSCode extension do you use for highlighting njk and front matter syntax? I tried using Nunjucks Template but the formatting is broken, and the others don't highlight front matter syntax.
Great tutorial, very clear explanation.
At 8.30 you show us package-lock.json with different dependencies which are current at the time we created the configuration.
So how will we/netlify continue to keep these versions up-to-date/current?
What happens when one of the dependencies becomes outdated or no longer used (and we need to find replacements in a hurry). This happen to me and I could not resolve it.
Really nice guide. I got it working just fine.
Thank you kevin, that was awesome!
Thanks a lot, Kevin! It was absolutely amazing.
everytime i am stuck, kevin uploads a video and i have almost the entire answer in one of your videos ! i really enjoyed your content on scrimba, really gave me several motivation boosts.. thanks for making this awesome content for us !
FIRST!!!
I got your notification and this video's notification at the same time
fav css masters you guys made me as a frontend developer love you guys
@@xClown55 same here, thus being early! 😂
So I think I can officially say that Gary Simon is my official superfan #1 now, right? 😅
@@DesignCourse kevin is my go-to html/css guru and you're my go-to design guru, i'll watch your vid afte this one :D
Hello sir, I followed your code step by step
Ok… now I love you!
This is my prefer stack! Netlify cms + eleventy!
But what do you think to use this stack with vue.js to build an e-commerce?
Do you preferred netlify Cms or other solution like sanity, Contentful ecc?
For something more robust, Sanity looks awesome, though I dont' have much experience with it. Astro just launched as well which looks really interesting (a new SSG)
This was AMAZING, thank you so much!
I just love it powell!
sir this is what i was actually looking for ❤️❤️❤️ thank you so much
@kevin Powell What do you think to use css-modules vs styled components for a react component lib or app. Maybe also a idea for a video ? Thank you great videos!
You are high king of css😍
I'm a PHP/Laravel developer and this video made me think why bother setting up a complete laravel project for a lot of use cases :))
Sooo great explanation! Thank you with my likes and subscribe!
great tutorial would love to see how you set up sass on this project for reference
I loved it, and I would like to use it, but I don't know if those generate pages will generate traffic or help with the SEO.
This is just FANTASTIC!! Thank you!! More like this lol ;-)
Wow men its great.. It very very very big help for me.. Thanks for this video. 😊
Amazing Video, Very Helpful. Thanks.
can you please do an update with the new version - decap cms? as it seems like netlify cms is disappearing (and maybe a how-to-update if someone wants to move from netlify cms to decap cms)
Excellent! Keep up the good work 💪