Brand new framework: Astro

Welcome to my new blog about learning Astro! Here, I will share my learning journey as I build a new website.

What I’ve accomplished

Installing Astro: First, I created a new Astro project and set up my online accounts.
Making Pages: I then learned how to make pages by creating new .astro files and placing them in the src/pages/ folder.
Making Blog Posts: This is my first blog post! I now have Astro pages and Markdown posts!

Why Astro

Content-focused: Astro is great for building content-rich websites, such as marketing sites, publishing sites, documentation sites, blogs, and portfolios. Other modern web frameworks are better suited for building web applications, such as logged-in admin dashboards, social networks, and native-like applications. Astro’s unique focus on content allows it to make performance tradeoffs that wouldn’t make sense for more application-focused frameworks. If you wanna application-like experiences in the browser, astro recommend nextjs. lol
Server-first：Websites run faster when they render HTML on the server. Astro uses server-side rendering instead of client-side rendering whenever possible, similar to traditional server-side frameworks like PHP and Ruby on Rails. However, you don’t need to learn a new language to use it because everything is still HTML, CSS, and JavaScript (or TypeScript). This is different from other modern frameworks like Next.js and Nuxt, which mainly use client-side rendering and include server-side rendering for performance reasons. This approach is called the Single Page App (SPA) model, in contrast to Astro’s Multi Page App (MPA) approach. Although the SPA model has benefits, it comes with added complexity and performance tradeoffs that harm page performance, which is not ideal for content-focused websites that rely on fast load times.
Fast by default：It should be impossible to build a slow website in Astro. Good performance is critical for content-focused websites, as poor performance leads to decreased engagement, conversions, and revenue. In many web frameworks, it’s easy to build a visually appealing site during development but have it load slowly once deployed due to JavaScript. However, Astro combines a content focus with a server-first MPA architecture to deliver unmatched performance features. An Astro website can load 40% faster with 90% less JavaScript than a site built with the most popular React web framework. See how Ryan Carniato, creator of Solid.js and Marko, is left speechless by Astro’s performance.
Easy to use：You don’t need to be an expert to build something with Astro. Astro is designed to be accessible and easy to use for web developers of all skill levels. It supports several popular UI component languages, including React, Preact, Svelte, Vue, Solid, and Lit. Additionally, Astro has its own .astro UI language that combines HTML with features borrowed from other component languages, making it easy to use without any overhead.
Unlike other UI frameworks and languages, Astro is less complex because it is designed to render on the server rather than the browser. This eliminates the need for features like hooks, refs, and observables. Astro is designed to remove as much required complexity as possible from the developer experience, allowing you to incrementally reach for new features and APIs as you need them.
Fully-featured, but flexible：Over 100+ Astro integrations to choose from. If you need more control, Astro can be extended with 100+ integrations, including React, Svelte, Vue, Tailwind CSS, MDX, and image optimizations. You can connect your favorite CMS or deploy to your preferred host with just one command. Astro is UI-agnostic, supporting React, Preact, Solid, Svelte, Vue, and Lit. You can even use multiple frameworks on the same page to prevent project lock-in.

What’s next

I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.