DevLog 2-3

Outcomes

DevLog 2-3

Create an Astro blog site

Follow Astro’s Build a Blog tutorial to create a modular website using component-based design. Compare your finished blog site to the tutorial example as needed.

1. Create a new Astro site and publish it on Netlify¹. Write the formatted command npm create astro@latest.
2. Create pages (.astro files) and blog posts (.md files) using frontmatter and file-based routing².
3. Use Astro components (also .astro files!) to reuse common code across your website³.
4. Create reusable layout components using <slot /> and Astro.props to inject child content⁴.
5. Create layout components for markdown files. Share anything that was difficult so far. I thought it was pretty straightforward up to this point. I found that it is a little confusing when styling is put directly into a file rather than a styling sheet which is what I'm used to. It is especially confusing when a layout is used. I understand it, it will just take some getting used to.
6. Display a dynamically generated list of posts on your Blog page⁵.
7. Use Dynamic page routing with getStaticPaths() to specify and store static routes during build, and pass each page its own props.
8. Install Astro Preact integration. Use a client: directive for hydration on a UI framework component⁶. 🔥 Challenge: Already have experience with a UI library? Try to integrate that one instead! For example, I used Svelte. I just did Preact
9. Modify your site design and content as if you were transitioning to Astro.js from an existing Wordpress site/blog. Duplicate the design, content, structure from the other site (not entirely, mind you, since this is just a mockup). Publish your blog site and put the url Blog Site here.
10. Copy and paste these instructions into devlog-2-3.mdx in your own DevLog. Publish it. Then turn it in by posting a direct link to the page on Moodle.