Okay, so I got this idea, wanted to build a small thing, just for myself, you know? Called it ‘astrois’ in my head. Heard about this framework, Astro, people saying it’s fast, simple for content sites. Thought I’d give it a shot.
Getting Started
First things first, had to get my environment ready. Already had * installed, thankfully. So, I just opened up my terminal. Typed in the command they mentioned, something like npm create astro@latest. It kicked off this little wizard thing.
It asked me a few questions. Like the project name, if I wanted TypeScript (said no, keeping it simple), and if I wanted to install dependencies right away. I just hit ‘yes’ to most things. It chugged along for a bit, downloading stuff. Pretty standard setup process, really. No big surprises there.
Building Stuff
Once that finished, I opened the project folder. Looked around. Saw folders like src/, pages/, public/. Seemed logical enough. I jumped into the pages/ directory. Made a new file, called it .
Now, these .astro files were new to me. Kinda looked like HTML, but with this code fence thing () at the top for JavaScript. Wrote some basic HTML inside. Saved it. Ran the dev server command, npm run dev. And boom, the ‘about’ page just worked. That felt pretty good, quick feedback.
Then I wanted a consistent header and footer. Didn’t want to copy-paste that everywhere. Found out about layouts and components. Made a file inside a new layouts/ folder. Put the basic HTML structure, header, footer in there. Used something called <slot /> where the page content should go. Then, in my and , I imported the layout and wrapped my page content with it. That was neat. Made things way cleaner.
Adding Content and Styling
For ‘astrois’, I wanted a couple of simple posts. Heard Astro was good with Markdown. So, I made a posts/ directory inside pages/. Dropped a couple of .md files in there. Just wrote some plain text, headings, lists.
Getting those posts to show up on the homepage took a little more effort. Had to use some Astro function, I think it was, inside that code fence at the top of my . It grabbed all the Markdown files. Then I looped through them to create a list of links. Took a bit of trial and error, looking at the docs, but got it working.
Styling was next. Didn’t want anything fancy. First, I just threw a <style> tag right inside an .astro component. That worked for quick tweaks. Felt a bit messy though. Later, I moved the styles to a separate CSS file and linked it in my main layout. Much better.
- Created basic pages.
- Set up a reusable layout.
- Added content using Markdown files.
- Figured out how to list the Markdown content dynamically.
- Applied some simple CSS.
Finishing Up
Once I had the basic pages, the layout, and the posts showing up, I felt like ‘astrois’ was mostly there. Ran the build command, npm run build. It created a dist/ folder full of static files. Just plain HTML, CSS, and minimal JavaScript. Exactly what I wanted.
Then I just uploaded the contents of that dist/ folder to a simple static hosting service I use sometimes. Checked it online, and yep, ‘astrois’ was live. Fast, simple.
Overall, working with Astro for this little ‘astrois’ project was pretty smooth. The setup was easy. Building pages felt natural once I got the hang of .astro files and layouts. Handling Markdown was nice. It felt fast, both the dev server and the final site. For building simple, content-focused websites like this? Yeah, I’d probably use it again. It did the job without too much fuss.