DevLog 2-3

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 ✏️ here using npm create astro@latest so you remember it.
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 had difficulty understanding the /../../folder/file layout sometimes and it caused me a lot of headache. Also, the tutorial often had too many or two few /.. when I copied the code into my code which crashed the site.

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.
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 ✏️ 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.