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.
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.
a few best practices (recommended) because it has the common folder structure of
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
/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.
- Previous: ADR — Architecture Decision Record