Astro
I’m re-writing my site in Astro. You can find my reasons for leaving 11ty here.
This page is notes on the ground-up rewrite of a blog in Astro, featuring heavily customized markdown, tag collections, a feed page, sitemap, and rss feeds.
This is not a tutorial. You won’t find elaborate step-by-step instructions, but high-level decisions and outcomes.
From starter or from scratch?
Astro provides several ways to start a blog:
When I say “in-depth” I mean, it really seems like they’re assuming you’ve never programmed before. Fortunately, you can skip to Unit 2 and bypass all the “This is a code editor” stuff that doesn’t belong in this type of tutorial.
Installation
npm create astro@latest
This starts a cli wizard. You’ll select a starting template and typescript preferences.
You can chose between three project types:
❯ a few best practices (recommended) a personal website starter kit an empty project
I tried all of them and they cleanly do what they say on the tin.
But for this particular project (a port from a previous site), I’m looking for as little existing opinion as is reasonable.
I chose a few best practices (recommended)
because it has the common folder structure of components
, layouts
, and pages
is seem “best practice” in Astro.
╭─────╮ Houston:│ ◠ ◡ ◠ Let's build something awesome!╰─────╯
astro v1.9.2 Launch sequence initiated.
✔ Where would you like to create your new project? … loose-light✔ How would you like to setup your new project? › a few best practices (recommended)✔ Template copied!✔ Would you like to install npm dependencies? (recommended) … yes✔ Packages installed!✔ Would you like to initialize a new git repository? (optional) … yes✔ Git repository created!✔ How would you like to setup TypeScript? › Strict✔ TypeScript settings applied!
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./loose-light Run npm run dev to start the dev server. CTRL+C to stop. Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
╭─────╮ Houston:│ ◠ ◡ ◠ Good luck out there, astronaut!╰─────╯
“Best practices”
An aside on “best practice.”
The idea of having dedicated, root-level /components
, /layouts
, and /pages
feels very next@old-and-busted
. SvelteKit is leading innovation in file-system based routing and I’d welcome it in Astro.
So, why not SvelteKit?
So, if I think SvelteKit is the most innovative framework, why not build my blog with SvelteKit?
That’s a good question.
- I like that Astro has few blog/content-forward conventions
- I like the “Islands” concept for content sites, like a blog
- I’m still most productive in React
- Astro would let me easily add demos to my site using any UI library
For those reasons, I’m willing to concede a less progressive and productive folder structure.