Перейти к содержимому

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!