Build a Simple Static Website with Eleventy and Tailwind CSS and Deploy to Netlify - Part 1
HTML-код
- Опубликовано: 26 июн 2024
- Tailwind CSS makes it very quick to style web pages. However, the most common complaints devs have with Tailwind CSS is that:
1. It’s hard to look at the huge list of class names in the markup. Especially for simple websites, if we don’t use any frameworks, there’s no way to create components. So, all the markup ends up in a single file and this definitely looks messy!
2. Without using components, code is repeated - which means - repeating all the utility classes making it less maintainable.Now these are the two problems that can be solved using the static site generator - Eleventy along with a templating engine called Nunjucks.
0:00 Introduction
2:52 Install Eleventy
3:45 Hello World in Eleventy
6:27 Styling in Eleventy using regular CSS
7:38 Eleventy Configuration File
9:24 Install Tailwind CSS in Eleventy
10:58 Tailwind CSS Config for Eleventy
12:21 Build Tailwind CSS in Eleventy
14:46 Start Project - Two-page Static Website
15:18 Create layouts in Eleventy
18:52 Create and reuse partials like header and footer
19:42 Include files in Eleventy
27:28 Include sections from different files
33:20 Macros in Eleventy for components
40:11 Adding another page in Eleventy
41:42 Highlighting current page menu item using if statements
45:04 Quick summary
Part 2 - Deploy to Netlify
• Deploy Eleventy site u...
Github Repository: github.com/ThirusOfficial/ele...
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibalasa.com
#tailwind #tailwindcss #eleventy 
Наука
Awesome tutorial, love the pace and how easy it is to understand
Yay! Thanks Lucian :)
Love your tutorials Shruti, it's too easy to understand
Thank you Gulam :)
Wonderful tutorial, went through the entire video 4 times now. Able to get a grasp of `what, why, how` about Eleventy. Thank you thalaivi 😊
Happy to know :)
Brilliant tutorial. I appreciate how you explain the reasons why as well as the how.
Thank you ☺️ I strongly believe it’s important to understand “why” before “how”
@@Thirus I've been able to use this tutorial to build out all the pages for my site using TailwindCSS. Do you have a tutorial that would help me understand how to enable JS on some of the components? Such as navigation dropdowns.
I usually use Alpine JS for simple things like this. Check out this link for dropdown component - alpinejs.dev/component/dropdown
Awesome tutorial Shruti
Thank you Joseph!
Amazing explanation, thank you
You’re welcome!
FInally...new video ..yay
Yes! Yaay :D
best tuto
I am at work at the moment so I cant go through this now. But I cant wait to get stuck into this.
Awesome 😊
Hi! Thank you so much for this tutorial!
It's working fine but I have a small issue though, it seems that I have to manually refresh the page or sometimes even restart the watch process to be able to see the modifications (not always, which is weird). It's like if 11ty was rendering the page (and triggering browsersync I guess) before tailwind was able to finish to compile the css. Have you been experiencing this too ?
You're amazing Dear Thankyou
You’re welcome :)
A very easy way to add contact forms to a static website is to use fabform
Awesome
I really like tailwind css
Me too!
I couldn't get the passthrough file copy to actually copy my files; yet it was still working. From the documentation, starting in version 2.0.0-canary.12 passthrough file copy is emulated if you're using the --serve option. Hence it's not actually going to copy anything into the output folder while using the dev server. I hope this helps someone else out if they're getting stuck like I was for a bit
Thank you for sharing this.
hi shruti what cms would you recommend other than wordpress, what would be a good cms to use
Sorry, not the right person to answer this.
Hey shruti.. which is the mic 🎙 yu are using ? Could send me the link for the same ?
Hi Bushan. I’m using Earthworks USB mic. It was sent to me by LinkedIn Learning for recording a course for them.
Great tutorial, thank you. Do you have an ETA for part 2?
Yes, end of May.
Very nice thanks! where is the second part? :D Is it ok to just name all files .njk instead of switching between .HTML and .njk?
Yes, you can name all the the files .njk
I didn’t do it because then the Tailwind intellisense plugin doesn’t auto suggest classes.
Second part will be released in two weeks :)
Can you still use custom styles with this method? Do you just use 'styles.css' and link it how you normally would? Thank you.
You should add your custom styles in the input stylesheet of Tailwind. Do check out my more recent crash course on Tailwind - ruclips.net/video/ei20HfTloFE/видео.htmlsi=HbEPIIjC4QiISvu3
Dear Mam,
At first I congratulate you for making such educative content. Though I did understand very little from subject video, but I commented here for some questions.
So what is exactly purpose of SSG. Does it really make our work simple. For example as I am seeing you , in this much time if we use some no code drag and drop builder , I think we would have finished also the site.
Also what I m thinking is if we get the source code of any website, can not we clone it and edit to make some new out of it. Do SSGs do the same technically. I hope your advices in this regard as I am very new to such things.
Rgrds
Could you have made the hero section into a partial? Also what is the difference between the html.index file in _site and index.njk?
1. I feel partials can be reused. But sections are just for convenience - to keep them in separate files. Nothing wrong in making hero section a partial too.
2. I didn’t understand the second question. Feel free to DM @shrutibalasa on Twitter
Hi, I'm new to programming .learning HTML CSS and i have heard of next and react.js .I don"t know what's eleventy , nunjks .Are they similar to react and next ?
No, they all are different. Watch some crash courses, you’ll get an idea
Thankyou ..for static websites we use eleventy to solve these problems in tailwind.. but what do we use for dynamic websites??
For static websites we use eleventy to solve these problems in tailwind.. but what do we use for dynamic websites??
For dynamic websites, we usually use frameworks like Vue, React, Laravel, Django. All those frameworks have a way to create components. So the problem is solved
Thanks mam
You’re welcome
when will be the part 2 releases?
By the end of May. Thanks for your interest :)
first one here!
I'm Second One Akka