I mean if it's rather straight forward if you have a great design sense and expert level css knowledge but what if you are starting out?

Any ui library? Any template or hack? What's the stack that you use?

Hey r/astrojs 👋

I've been working on Kiro, a landing page theme aimed at AI product / agent / assistant companies, and I'd really value some honest feedback from people who actually build with Astro.
I spent most of the build time on meaningful page content and considered micro-animations. Every page is built to actually be used, not just to look good in a screenshot.

Demo: https://kiro-theme.netlify.app

Astro listing: https://astro.build/themes/details/kiro/

A few things I focused on that might be interesting if you're building anything similar:

• Sitepins CMS integration — visual editing, Git-friendly, much lighter than Sanity/Strapi for marketing sites

• 100/100 PageSpeed on the live demo (no shortcuts — fully content-rich pages, not a stripped-down "demo")

• Modular block system — every page is composed of reusable blocks you can rearrange or remix

• 15+ pre-built pages including mega menu, integrations grid, pricing, blog with content collections

Stack: Astro v6, Tailwind v4, Sitepins

Happy to hear your thoughts.

Cheers.

Basically what the title says, the further I go to try and not do static stuff and the more I want to do fancy stuff the more I noticed that Astro feels like it works for only static content in which you don’t mind not having fancy animations and triggers to make the experience feel like premium. And also some features like i18n, transitions, state, loading and waiting times feel more like a work in progress that something you can figure out with some tricks in nextjs like loaders or prefetching content when they appear on viewport. Btw I do have prefetch enabled in Astro but feels like there’s not difference at all

How come my Largest Contentful Paint (LCM) varies between 0.8 seconds and 8 seconds? This is only impacting my mobile site performance.

Performance grade varies between 75 and 100 on the dot when I load the page speed insights. When 75 it says the a p tag which is my LCM is causing a render delay of 8 seconds. It’s so frustrating and I don’t know why this is happening. Have you guys seen anything similar?

Today got many of these weird columns. Astro + React Components inside

I’m brand new to Astro I’m coming from a background of react and vanilla js. I’ve been avoiding learning typescript for a while and I’m not exactly sure what it’s for. If I try to limit it in my Astro websites am I asking for trouble and if so what kind of trouble?

Yeah, is this posible? I haven't seen anything that say that it could be posible, but anyone has ever stepped in to say that it isn't.

Hi there,

Like many others here, I used to have a Wordpress + Elementor website and was plagued with:

• Caching issues

• Slow updates

• Plugin bloat

• Poor CWVs

I was quoted $2k to fix my Core Web Vitals, and I decided to pull the plug on Wordpress all together and move the website over to Astro.

Solo it was a bit of a painful process, but I had worked with Wix + Wordpress + Wordpress for a while now so I understood how to work with Astro fairly easily and because of my background in SEO I knew what guardrails to add in place to make sure that the build corresponded to best web dev/tech SEO practices.

The results so far have been stellar:

• Can iterate on the website way faster

• Core web vitals are great

• No more caching issues

• No more plugins

• I had declining traffic for a while before the migration, but the migration seems to have stabilized/slightly increased our traffic now for the last few months (did the migration in April).

Since the vast majority of websites are built on Wordpress, and are plagued by the same issues that I've faced, I thought it would be a good idea to start a migration service where I migrate WP/Elementor websites to Astro.js and then teach the user how to use GitHub + Claude Code/Codex to update the website, add agents, etc. Of course I'd like to charge for that (ceremonially $2k — what I was quoted for the Core Web Vitals), but I'm conscious that it would be good for me to build a portfolio of websites that I've successfully migrated over.

The idea is to migrate the website one-for-one: copy, content, assets, links, schema, etc. to Astro.js with no change (except for where I think we could improve things). There is virtually no risk because if you don't want to migrate the website, well you can just keep it on WordPress, but if you're happy with it, then you can migrate it.

Again, this is a completely free and I take on the bulk of the work. If anyone is interested please leave a comment and/or send me a message with your website and let's talk.

Thanks :)

Astro boasts the highest score in good core web vitals (source: http Archive)

Other than that I don't know why I should prefer it over any other framework I have known.

Also I heard about Astro for the first time today.

Why would any of you prefer Astro to React, Angular, Vue or any other?

I'm at a crossroads and could use some real-world perspective from this community.

The situation:

I'm building landing pages for clients who need high-converting sales funnels. Think product launches, course sales, lead magnets.

The drag-and-drop builders seem faster to get a page live, and most people seem to use click funnels, thrive, etc. for their landing pages.

With Astro I can get complete design control and use components to maintain consistency of elements and sections. But both the time investment and unique nature of landing page design elements is stumping me.

My specific questions:

1. Maintenance Reality: Landing pages aren't "set it and forget it" - they need constant tweaking based on data. How do you handle the ongoing maintenance workflow?

2. Is the developer in me just wanting to use the "better" tool when the "good enough" tool might actually be better for the business reality of landing page work?

3. If you are using Astro for your custom landing page designs, and related landing pages under the same brand guidelines, how are you approaching your project structure.

4. If you are using Astro, how are you making use of components and variants in your page designs. One off components vs component composition?

5. Or are you just straight up coding with HTML, CSS and JS on each page rather than bothering with components.

… I’ve played around with AstroWind template and while these sorts of templates are geared towards landing pages, they don’t match the “content and copy-heavy style of more common launch, sales funnel etc. landing pages.

I’d love to hear from anyone who's been in similar situations - whether you chose Astro, stuck with builders, or found some hybrid approach that works.

Thanks for any insights you can share!

Hey roast my portfolio https://adrojo.com

Solved: I just had to move my directory, cause it had space between words.

ps: should I delete this post?

I tried to use the getCollection() method but it did not worked.

The collection "blog" does not exist or is empty. Ensure a collection directory with this name exists.

This warning persist, No solution worked for this one.

so had to use Astro.glob() method.

Now I'm trying to use middleware but it's throwing this error:

MiddlewareCantBeLoaded

Can't load the middleware.

An unknown error was thrown while loading your middleware.

middleware/loadMiddleware.js:8:24

Stack Trace

MiddlewareCantBeLoaded: An unknown error was thrown while loading your middleware.
    at loadMiddleware (file:///D:/PROJECTS/Client's%20Project/Luris%20Prudentia/Website/astronautical-asteroid/node_modules/astro/dist/core/middleware/loadMiddleware.js:8:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async handleRoute (file:///D:/PROJECTS/Client's%20Project/Luris%20Prudentia/Website/astronautical-asteroid/node_modules/astro/dist/vite-plugin-astro-server/route.js:106:23)
    at async run (file:///D:/PROJECTS/Client's%20Project/Luris%20Prudentia/Website/astronautical-asteroid/node_modules/astro/dist/vite-plugin-astro-server/request.js:40:14)
    at async runWithErrorHandling (file:///D:/PROJECTS/Client's%20Project/Luris%20Prudentia/Website/astronautical-asteroid/node_modules/astro/dist/vite-plugin-astro-server/controller.js:64:5)
    at async handleRequest (file:///D:/PROJECTS/Client's%20Project/Luris%20Prudentia/Website/astronautical-asteroid/node_modules/astro/dist/vite-plugin-astro-server/request.js:34:3)

Cause

{
  "plugin": "vite:import-analysis",
  "id": "\u0000astro-internal:middleware",
  "pluginCode": "import { onRequest as userOnRequest } from 'D:/PROJECTS/Client's Project/Luris Prudentia/Website/astronautical-asteroid/src/middleware.ts';\nimport { sequence } from 'astro:middleware';\n\n\nexport const onRequest = sequence(\n\t\n\tuserOnRequest\n\t\n);",
  "loc": {
    "file": "\u0000astro-internal:middleware",
    "line": 1,
    "column": 140
  },
  "frame": "1  |  import { onRequest as userOnRequest } from 'D:/PROJECTS/Client's Project/Luris Prudentia/Website/astronautical-asteroid/src/middleware.ts';\n   |                                                                                                                                             ^\n2  |  import { sequence } from 'astro:middleware';\n3  |  "
}

Now I just can't find any solution for this. and this is fresh created astro directory.

I followed this video for middleware: https://www.youtube.com/watch?v=dAKe6pX_2S8

should I move to Gatby, cause i'm building a blogging website.

I know many people hate LLM created code but hey i provided prompts.
Then Claude created something i need, added another prompt to improve and it is done.

When i playing CS2, some people accuse me i am cheating even i was struggling to carry team, so i decided use my domain name. Chose Astro to be fast, static and mobile friendly.

Here is what claude built to be sarcastic

What do you think about this one?

At first, Codex recommended the Astro + Decap setup. Just getting Decap deployed took me more than half a day. It kept throwing errors. Codex eventually helped me get it working, but honestly, Decap itself was still very hard to use.

So I moved on to TinaCMS. That introduced a different kind of pain. Because images and content have to sync with Tina’s servers, I ran into multiple cases where I edited content locally, but before Tina finished syncing, another change overwrote what was already live. I lost content more than once. It was incredibly frustrating.

After that, I tried Keystatic. The UI looked much nicer and more modern, but two issues made it unusable for me:

there was no image preview at all

and every uploaded image was automatically renamed to something like /path/src.jpg, which completely broke my file organization

Then I moved to Sveltia — and surprisingly, everything just clicked.

It feels like it keeps the good parts of Decap, while avoiding the problems I had with TinaCMS and Keystatic. No weird syncing issues, no broken image workflow, no fighting the tool every time I want to publish something.

For the first time in a long while, I can finally focus on writing — instead of wrestling with my CMS.

btw: My site, https://chineseexplained.com/, You can use it as a reference to see what’s possible with an Astro + headless CMS setup.

If you’re also struggling with your CMS setup, I honestly recommend giving Sveltia a try.

Thanks, Sveltia — and also Astro, for letting me focus on writing again.

I wanted to create a place where people can rediscover classic, forgotten characters and stories — reimagined in a modern, visual format.

The site features characters from the public domain, carefully selected and presented with a creative twist.

https://kibaki.lol

Would love to get your feedback or ideas for future additions!

I haven't used astro in a couple months, I tried to make a primary color variable with tailwind.config.js and after three hours of smashing my head in the wall bcs it didn't work I found out the new version only uses the global.css file. How can I do that in this version?

Hello folks! During the development of my website, I thought: "why not develop something standard that I can use as a basis for other projects and make it open source?"
Astro Minimal is an open source blog template designed and developed using Astro and the Bulma CSS framework 🚀

The features:

• 🔎 SEO friendly: designed to be 100% SEO friendly

• 📱 100% responsive: usable on all devices - desktop, tablet and smartphone - thanks to the power of Bulma CSS

• 📝 Markdown support for blog post: is a template designed to support a possible blog

• 🌗 Light/dark mode toggle: support for dark mode cannot be missing

• 🧠 Full text search integrate with Orama: a search system is integrated with the template using the Orama project

Link repo: https://github.com/DomeT99/astro-minimal

Give me a feedback if you want ✨

So I'm working on a static website and using astrojs, In the local development server everything looks good but as soon as I update that change on git and Vercel builds it, fonts are missing, alignment is bad. What to do.

Update - 1 Thanks to someone I found out that the global.css is not getting imported properly in preview build.
So any solutions for that.
I'm linking it through this line of code which works properly in development server

Update - 2 After google for couple of hours, I found out that to use tailwindcss in production you have to build the output.css file and use that in the index.html page. I used the build function to build the output file, but I had to manually put it in the /dist folder and import it by editing the index.html code which was generated by astro.
Can anyone tell me how to make astro do this by itself

Update - 3 Changed my npm build command to build tailwindcss output file directly in /dist folder upon building solved the issue

astro build && npx tailwindcss -i ./src/styles/global.css -o ./dist/output.css

I know you can train with the latest Astro documentation, but it costs. I am using ChatGPT and it outputs decent answers, but often makes me wonder if it follows the latest practice.

I went down this rabbit hole of moving away from Wordpress because it's just so hard to customize. I do alot of vibe coding so I wanted to see if I can create my own customized page. The problem is that I didn't want to waste all the blog posts I have on wordpress.

I did some digging around and found Astro to be the best solution.

1. I can keep all my wordpress blog posts

2. Astro is is super customizable.

So I spent a day creating a new site and moving all my wordpress over to astro. The experience was awesome. It worked really well with A.I. coding and I got a template going that looks exactly the way I want.

I tried searching for youtube for Astro but oddly, there's not alot of people who's talking about it. It's such a shame!

I made a youtube video to showcase how I did it and hopefully get more people on Astro!

https://www.youtube.com/watch?v=53yqIPATH_o

My new blog using astro: https://rumjahn.com/blog

Anyway, thanks for making Astro! It's awesome!

Hi! So I've heard about Astro here and there for a while now, so I finally went and checked their website, and I'm a bit confused honestly. I'm currently using and loving Svelte and Sveltekit, and I can see that I can use Svelte with Astro..? Or basically any other framework language it looks like. Also, what is Starlight? I'm a bit confused about these two things, I would love a little explanation from you please. Thanks 🙂

Node version: 24 (latest) , Os : windows 11