Create template layouts for your HTML with Astro SSG
Kevin Powell
0:00 / 0:00
Create template layouts for your HTML with Astro SSG
87 598 просмотров · 4 года назад
Kevin Powell
1 млн подписчиков
87 598 просмотров · 4 года назад
Writing HTML is all fine and dandy, but most of the time there is a lot that repeats from one page to the next, and updating one page then means we have to update all the pages.
With a static site generator, we get to create page templates so take out that pain point, and Astro might be the easiest one to get started with!
🔗 Links
✅ Astro: https://astro.build
✅ NodeJS: https://nodejs.org/
✅ Astro extension for VS Code: https://marketplace.visualstudio.com/...
✅ Windows Power Toys: https://docs.microsoft.com/en-us/wind...
✅ Getting your site online with Netlify: • Host your site for free, with version cont...
⌚ Timestamps
00:00 - Introduction
02:07 - Why Astro?
02:46 - Installing Astro
08:17 - Exploring the file structure
10:01 - Cleaning up index.astro
11:50 - Adding the HTML from old project
12:38 - Setting up the main template file
16:51 - Slotting in content to the template (using the template)
19:31 - Fixing the navigation links
20:33 - Setting titles with template layouts
22:24 - Building the static site for production
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - https://code.visualstudio.com/
---
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.
Twitter: / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!