Create template layouts for your HTML with Astro SSG

[@spacecat4474]

Astro is so intuitive and beginner friendly. Seems like a perfect middle step after learning basic HTML to SPA framework.

[@JohnnyNilsson83]

Wonderful! Just the perfect in between step of static files and a SPA framework.

[@DaPaBe1999]

Oh my god, ASTRO is so beginner friendly, love to see more about this!

[@monkyout]

You are like the good teacher we all had that we always liked to learn from.

[@JavArButt]

I have to say, the calm way how you explain things relaxes. Also, the explanations are very clear and precise. Thank you for this very nice introduction.

[@tymiller2596]

WOOOWWWW!!!... I've been watching this channel for almost two years. And that's how long I've been waiting and praying for this video. Definitely my best Christmas gift. Thanks Kevin

[@JamesPero]

Thanks for covering this topic Kevin! Back in the early days we would use Server Side Includes (SSI) via shtml files and apache web server. Then PHP came along and made SSI obsolete. Now we have too many ways to do it, which may or may not be a good thing.

[@KevinPowell]

Yeah, at one point too many options can lead to some level of paralysis as well. I'm really enjoying Astro though, really nice dev experience!

[@eddyerkelens]

Still, php rules in this as it is invicible in the html. Make it easy, split te pages in segments and autoinclude this with de htaccess.

[@njwebwiz]

Yup. I use php includes for things like header, nav, footer, and anything else that appears on more than one page.

[@1zanshin]

Just astro-ed an existing static site, works like a charm up till now. I am loving it! Thx Kevin!

[@deborahvandervlist4856]

Amazing, thank you for this video (and the tip, I had been building websites on Jekyll and Astro seems so much more flexible!) Also wanted to thank you for all the other great videos, I have learned CSS watching your channel and am now working as a Web Dev thanks to them!!

[@KevinPowell]

I'm really digging Astro, but you might also really like Eleventy. It has a lot of similarities to Jekyll, so it's an easy transition, and it's much more mature than Astro at this stage, which has some benefits.

[@deborahvandervlist4856]

@@KevinPowell Thank you, I did have a look at it a while ago, but I wasn't sold the way I am with Astro (maybe because there was no KP video on it :D). I have actually used quite a bit of React too so the transition is actually super easy! Looking forward to seeing how it grows!

[@MirceaAgrigoroaie]

JS community... Guys look we are able to convert html to templates.. we are f..AWESOME.. this is mindblowing.. Meantime... PHP since the 90's

[@KevinPowell]

Oh, totally. The last 5+ years of JS frameworks have just been trying to reinvent PHP 😂. It is nice in this case when it spits out static files though

[@jasperwieringa6038]

This really shows the power of web-components. Interesting to see that Astro is using that under the hood. I have been working with web-components for well over a year now and I was surprised to see that there is so little to find (documentation wise) as it is allows for such a powerful way of creating framework-agnostic components. I have not used Astro myself yet, but I am pretty sure you can use named slots to create even smaller components i.e. navbar, sidebar, footer etc and slot them to your MainLayout component. Great stuff Kevin!

[@nivoset]

I think web components are going to be less used for people and more by frameworks.

[@dangnguyen.92]

simple solution for simple purpose. clean, straightfoward, understandable. thank Kevin.

[@OleksandrBorysenko333]

Great! Thanks for the simple explanations. Probably in the next few weeks, I'll try to refactor my portfolio using Astro.

[@Brunoenribeiro]

Great content as always, Kevin! I'm glad to see more JS around here. Just a tip to fellow engineers who want to dive into more JS-heavy professional projects: please use a Node Version Manager to install Node on your machine, instead of downloading and installing it directly. It's pretty common for different projects to use different Node versions. Corey Butler's NVM for Windows makes it very easy to handle that. And Linux/Mac friends can use the original NVM, it's pure magic.

[@digwillhachi]

I love your precise but simple explanations.

[@aymanehrouch]

Great video Kevin, can you do more about Astro please? I like the way you break things down.

[@Allformyequine]

This is great! MORE on Astro please ;-) !!

[@vietvohoang459]

This is exactly what I need, thank you Kevin!

[@uneamiedev]

I was on the hunt for something like this. Thank you so much 🙏🏾

[@GH-pu3xc]

Fantastic stuff KP! This video really helped me understand static site generators. I'll definitely be giving it a go!

[@carlosl-f2433]

Looking forward to more Astro breakdowns after this. Thanx

[@orincywhytedesigns]

This was so interesting, I’m not here yet but still cool to watch where my journey is going to take me.

[@chrisparker8539]

This is funny because at around 0:50 you said "wouldn't it be nice if we could have templates". Welcome to 30 years ago and . I sure miss the old days... With that said, this was an informative video and I will be giving Astro a try.

[@bobbyb6412]

I just got into Astro, are you planing some more videos exploring components? It seems like such a good way to start without having to larn React, Svelte or any of the other frameworks.

[@TheMeltzz]

Thank you for making it so easy to listen and follow.

[@shahrearferdousfagon9441]

this was just awesome. we want sass with astro

[@cabanford]

Is supported

[@gulraizgull8044]

thank you so much mate for providing up to date helpful and problem solving content.

[@lucienchu9649]

Barely see Kevin introduces external lib, but each time he brings a good one.

[@cgarafulic]

Great video Kevin. I heard about Astro before but this is the first tutorial about how to get started with it, and it's really simple. Of course can grow in complexity adding more components from different frameworks, but the way it can be incorporated by people with different levels of components based frameworks knowledge with Astro is step by step. And this is the first step to get started. Thank you for recording this video, explaining it with your admirable way to teach others. You are a great teacher. I love you started with this new series of component bases frameworks. Soon you will gain another public recognition title not only as the King of CSS 🙂

[@michaelgrunewalder7893]

Great Tutorial - Can't wait to see more about Astro.

[@kandiekane0602]

Just what I was looking for. I ran into this issue just yesterday

[@matthewbeardsley7004]

seems like a good alternative to react etc. for just a simple 1 pager

[@pexeixv]

Kevin introduced me to 11ty a while ago and I've been using it alot. But I gotta admit it's a little janky at times. Astro looks smooth. Will try!

[@brechdt]

Can you tell me the conclusion? :)

[@pexeixv]

@@brechdt Definately Astro > 11ty!

[@nielslytzdk]

I get a code 1 and many more errors when doing the npm install so I'm kinda stuck. It looks very interesting though, I'm all for simplicity! Always a pleasure to watch your video :D

[@KevinPowell]

that's odd... it is in beta and I did have to put off creating the video for a few days, as they had a breaking change the day I was going to record, lol. Maybe try again tomorrow and see what happens?

[@MidwestGomez]

Same errors here too.

[@wesleysandifer6157]

This works a little bit like django. I love using django. I'll need to try this

[@SamirPatnaik]

super helpful as always, Kevin.

[@gexgex941]

Great stuff! Looking forward to new videos about Astro!

[@e11world]

Awesome video Kevin! I use a similar thing but with Gulp and gulp-file-include which makes things very handy but this is also very promising. I'd like to see more on this and maybe a comparison between this and other SSG or even why you'd use this over next.js

[@KevinPowell]

I like that this is tech agnostic, unlike next.js and most other similar ones today. But it could be fun to compare.

[@ashbjorn]

Perhaps I missed something, but before I could follow your tutorial fully, I first had to run: npm install -g astro After that this command was OK: npm init astro

[@mustaphaELHOURA]

Thank you very much sir ... With which software, you record your videos.

[@BehruzbekOtayev]

Django template engine rocks this

[@strange_man]

Are you olanning to do more detailed tutorial on Astro? Would be great to see

[@MeepChangeling]

I solved this by making a js file that injects the HTML for my header and navbar into each page on load. That way I only have one file to edit to update my navbar. Okay, well, I have two. Since my site is split in two halves, one for world lore and one for the RPG rules for that world. But like, it works. Why should I do this instead of that?

[@frugodwill]

Bad for see though, web crawlers won’t pick

[@mirjalolochilov8428]

All your videos are coming out great

[@KevinPowell]

Thanks a lot :D

[@JimKernix]

Are you still planning on doing another astro video? I hope so

[@alwayssomewhere716]

great tutorial - subscribed

[@Viralplace]

Do you prefer Astro or Eleventy?

[@michaelturvey8658]

Be aware: Astro is new, and it has some serious bugs and flaws. I trust the developers are working these out, but you should know going in that many seemingly obvious functionalities will break or just not work at all. For example, currently you can't make a "more articles" style sidebar if your site uses markdown files for blog posts, because the way Astro handles markdown files creates an endless loop.

[@Lilliebeth001]

Thank you so much, great ... I just learned this with php

[@DanteMishima]

Astro is way cool!

[@31redorange08]

18:20 These are hyphen-minuses, not backticks. 🤔

[@outsider863]

Very interesting, I use mustache for my stuff, so that I can basically build "generic blocks" for everyday use.. I will have a look into this though thanks for the content

[@azamatkozuaidarov5183]

Kevin in the whole world i do like it how you explain an everything

[@cu3e]

on mac You can type cmd + k to clear terminal

[@farhanawan9956]

Thank you so much! But can you make a video on the components

[@CaliburPANDAs]

So this only benefits multi-page sites right? What about SPAs?

[@badcatdesign]

Love Astro! For perhaps an even easier (and less dependency oriented) templating workflow, there are two other interesting apps. Kit55 is one and the other is a bit more polished (and native mac) CodeKit

[@azamatkozuaidarov5183]

keep it up Kevin

[@Stoney_Eagle]

We're all doing something similar to this with every framework, why is there still no "vanilla" way of doing this with normal html5.... I don't think it should be that hard for browser vendors to do. Get a tag declaring an import and specify a file and wrap it around, that sorta works like an with or without Javascript execution so it becomes part of the first dom level. This will also work great for svg and makes them stylable. And if security is a risk, ristrict it to same origin. Call them wrap and include 😊

[@KevinPowell]

There was talk of something like includes being added to HTML, but if I'm not mistaken, it was actually Mozilla that shot it down. I don't know much about the history of that though

[@Stoney_Eagle]

@@KevinPowell It would save soo many resources and compile time if here is just a native way of including stuff in the dom. Makes no sense to not do it in my opinion.

[@bobshoaunng2038]

Web components lets you do the same in vanilla html5

[@talkdatrue]

@@bobshoaunng2038 is this approach SEO friendly?

[@bobshoaunng2038]

@@talkdatrue since its vanilla html, i would believe so

[@AnDi-tx2xh]

Hello Kevin, It seems a bit silly to me that you and others mention this idea of having to copy html from one page to another. Sure Astro is great and I have started using it myself but lets be honest here, any developer of your experience would know that its not doom and gloom if you choose not to use Astro. You do not have to repeat your HTML. There's so many ways around that in javascript alone. Create a function which returns a template literal of your menu and then call that function in every page. Add a new menu item to your function and it will work for every page in which that function is called. This is just what came off the top of my head. I don't think astro's ultimate purpose is to prevent you from repeating your html. Its much greather than that.

[@Danachew]

Until the person viewing your site has javascript turned off. It's a rare case but it does happen. You know what though, it would be interesting to test your JS idea vs php vs astro and compare load times. I'd just be worried the more I'm serving things up with JS the more the site might get bogged down.

[@DerLustigeAstronaut]

I absolutely love your desktop background. Can you provide a link where I can download it?

[@durppp]

I tried to post a link but it didn’t go. Just google image search ‘get cape wear cape fly background’

[@blackrobot138]

Hi Kevin , How can I attach SEO specific to pages. I dont want one SEO for entire website. I want the about us, contact and blog to have their own SEOs.

[@welling1]

I remember the days of using Dreamweavers' .DWT files to save me from many update nightmares.

[@RichardWeitzmann-z2e]

THANK YOU!

[@MidwestGomez]

Well, I followed along exactly, got to "npm install," and was greeted with a text wall of user-unfriendly errors. I hate the command line.

[@MidwestGomez]

The fix: npm init astro@latest

[@andycetnarskyj2848]

Astro's great but one annoying thing is that it doesn't like global styles. I tried to use it with your sass tutorials as a design system doc but hit a big issue on getting the dev server to watch for a single global style. Have you managed to get it to work?

[@KevinPowell]

I didn't have any issues, though I haven't played with it in a bit now. I'll have to take a look again, but it uses Vite in the background. It could be you need to point the href to the .scss file, so Vite sees it and compiles that

[@andycetnarskyj2848]

@@KevinPowell cool I tried a few proposed solutions from the discord. One mentioned using a snowpack plugin. Thanks for the reply

[@andycetnarskyj2848]

I got it working after some help on the discord. You now just have to import the .scss file into your base layout and install sass and it compiles... win.

[@frankiejrey]

I use the Pug templating system. I'm curious how Astro compares to Pug. Thank you for sharing, this is the first I've heard of Astro, and I'm now I'm curious.

[@KevinPowell]

Pug is cool too!

[@oliverp8006]

You can use 'normal' more simple templating languages (Liquid, Nunjucks, Pug, EJS or Handlebars incl Markdown) with 11ty or the dynamic, more complex js ones with Astro

[@frankiejrey]

@@KevinPowell Actual Pugs are even better!

[@parthkumarchaudhary]

Awesome 👍😎

[@fullpreteristnow]

Terminal is also in the top menu. Isn't it the same thing? Not sure, but it seems to yield the same result.

[@philip9677]

Kev what about Eleventy should we use Astro or Eleventy as a SSG

[@josvelema2362]

first! was waiting for this! :)) sometimes our minds are in sync :D

[@dazraf]

This is what webcomponents made for.

[@alwayssomewhere716]

Hi great video. Do you have a Github Link for your project

[@mirjalolochilov8428]

Very good luck to you Kevin

[@ck0024]

*Astro looks cool to learn before learning React. But I would prefer PHP.*

[@KevinPowell]

Any reason why? Nice to have just some static files at the end of the day!

[@djalexxxgr]

Slot element looks like a web component implemetation behind it. right?

[@DanielRios549]

I like that it accept different libraries, different from Next, Nuxt, or SvelteKit, but I thought without them would be plain HTML, not .astro files, I feel strange to put the Javascript directlly in the file without a script tag like in Vue, Svelte or plain HTML, this is strange just like put the HTML in a return. But anyway, it seems to be simple just like Svelte is, and we have the option to use all of them, this is the best part.

[@samuelosoba]

Thanks for video Kelvin, however, you did not explain the part of the slot tag. How exactly did you figure out that you need to add a slot tag to the MainLayout template such that the framework recognizes subsequent tags for insertion into the mainLayout template.? Is this from the documentation ? or how.?

[@SarahRainsberger]

I'm not Kevin, but hope you don't mind my answering: Yes, it's in the documentation! Slots are like "children" in React. You specify wherever you want any child data inserted. The documentation is here: docs.astro.build/core-concepts/astro-components/index.html#slots Hope that helps a bit!

[@sergejstojanovic2518]

What do you think about tailwind, Bootstrap etc...

[@jeremiahthompson82]

You can use JavaScript components. That's what i do

[@XandarLake1]

Magic ! :)

[@tofuman9526]

Would you consider using astro to build a starter-template for freelance work and serve as a CMS of some sort for clients' with minimal addition/editing requirements? Thoughts?

[@KevinPowell]

100% yes, though I'd integrate it with a CMS. I haven't tried with Netlify CMS, it's a little bare boned but really easy to set up (though I haven't used it with Astro)... so for something simple it might work. I'd probably be more inclined to set things up with Sanity or another CMS instead though, if it was for a client. Once you've done it once, it should be pretty simple for future projects and provides a really nice CMS.

[@tummalasudhir7918]

Is it a template engine like EJS, PUG, HANDLE BARS, Jinja ( for python) ?

[@justinoneill2837]

how would this be better then 11ty?

[@badmax7319]

I want to recreate my old blog with Astro, but I want the files to end with .html. Is that possible? I've already tried with blog-post.html.mdx and [...slug].html.astro, but it just doesn't work.

[@flaviomauri]

The architecture of the page, engineered with slots, reminds me a lot of the Shopify architecture. Call me old school (or ignorant) but I don't like much that this system creates all those subfolders just to store single pages. Wouldn't "pretty links" be achievable with htaccess configuration? ~ Any idea if there are even more lightweight systems to achieve modularity and templating in static sites? For as simple this is, the folder structure and base files seem just too many 😅

[@veja-e-aprenda]

Hi Kevin. Is there any way to build the "dist" with each html file without folder? All I wanna do is to organize html files after building.

[@briankgarland]

How does Astro compare with Hugo? Hugo is great.

[@kohelet910]

So cool thank you

[@harri00413]

What's your opinion on Hugo

[@marcrasmussen474]

Where did you get that wallpaper?

[@WishMasterCoder]

I tried for 2 days to get Astro to work ... instead will go back to not using a framework and adding scss the normal way ... and building webpages using npm ... thanks for the vid though

[@azamatkozuaidarov5183]

One of your friends recomended to me of you

[@jakubfrei3757]

Wait. But as far as i know, todays web pages have one index html with header and footer and the other one are just some html elements which we add to index page with javascript and nodejs, right ? So why do we need to copy ?

[@KevinPowell]

Depends on your tech stack, but this was intended mostly for beginners who aren't doing that... but also, there are performance gains for serving up static sites, rather than relying on client-side rendering. That said, it really depends on the project, but a personal portfolio, or a blog, or other things that are using something like React often don't really need to be more than a simple static site, or maybe potentially something with server-side rendering.

[@bramvanoverveld6982]

Hi Kevin nice video! Have you heard about the framework Laravel? I really like it. Its a little complex but if you dive into it and starting to understand it, it is really helpfull!

[@simpingsyndrome]

15:31 wasn't that self closing tag?, i think that's kinda similar component like NextJS or ReactJS

[@chandragie]

Hey, I see that every time you switch pages the whole page re-rendered (the reload button rotated). Does this mean Astro app is not a SPA app?

[@crooker2]

Have you tried Statamic CMS? Such an amazing laravel-based flat file content management system (no database, very powerful and easy to build sites with) (this is not a commercial, there is a very robust free version)

[@lankymoose1831]

i love their website

[@sergejstojanovic2518]

Will you ever make videos on React? Do you even like it :(

[@letscoding3421]

Is that same with blade?