Turn static HTML/CSS into a blog with CMS using the JAMStack

In this video, we're building out my solution to the Devmentor challenge that I created! We'll be taking a static HTML/CSS project that I created, hooking it up with Eleventy, and then using GitHub to get it up onto Netlify, and finally integrated Netlify CMS!

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:56 - DevProjects
03:01 - The starting files I'm using
06:22 - Initializing the project and installing 11ty
09:43 - 11ty config file
16:32 - Creating header and footer template files
29:37 - Generating content for the Blog page
40:05 - Fixing the date formatting
44:08 - Creating the template for individual articles
48:10 - Featured article section
54:45 - Getting the project online
59:50 - Adding the CMS
1:18:38 - Using the CMS

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[mofe]

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.

[feasiblecreative]

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. 🙂

[IainSimmons]

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!

[williambennion]

This tutorial was so mind 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 YouTube. Looking forward to more great tutorials such as this one!

[brechdt]

This is exactly what I needed. I've been searching for something like this for a few years now. Thank you x1000 !!

[gwalchmei]

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 :)

[danielaffinity]

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! ❤️

[gregoryam]

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.

[bigfoot]

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 🙏🏾🙏🏾

[connergoldberg]

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!

[patricknelson]

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.

[michaelteter]

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.

[katedames]

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!

[alibinnaseer]

It worked!!! Thank you soo much. The day I get my first job or my first client, I am gonna donate to you, teacher ❤️

[shifronim]

Awesome! I've done this tutorial ! Thank you Kevin for this nice starting point to use 11ty.

[clevermissfox]

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❤

[Sizganov]

Just today I was looking for a video on this topic and now you have made it! Thank you!

[codingwithkenny]

Wow this is amazing Kevin! Keep it up!

[Vippsi]

For anyone having issues with emmet not showing html suggestions, try this:

"files.associations": {
"*.njk": "html"
}

This fixed the issue for me!

[jamessullenriot]

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.