tubeshowcase●913,533 videos♡ My collection 0
← Learn to Code

Learn to Code24:29

Create template layouts for your HTML with Astro SSG

Kevin Powell ↗

From the creator

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/items?itemName=astro-build.astro-vscode ✅ Windows Power Toys: https://docs.microsoft.com/en-us/windows/powertoys/ ✅ Getting your site online with Netlify: https://youtu.be/i9qCmQ2EeUA ⌚ 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 💬 https://discord.gg/nTYCvrK 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! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-

Published 2021-12-14 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.

Keep exploring Learn to Code