Although Astro just recently got its first stable release, there has been a lot of talk about it in the last year. It has gone from an empty repo to over 18,000 Github stars and 30,000 early users in the last 16 months, it has been deployed by companies like Google, Trivago, The Guardian and IKEA.

Obviously there is something good, if not great about Astro, so let’s check it out and see what all the fuss is about.

### What is Astro?

Astro is an all-in-one web framework for building fast, content-focused websites. 

This does not tells us much,  so we will heave to dig deeper.

On the first glance Astro looks like a static site generator. And it technically is that, but it also has some features that makes it more than just a static site generator.

So let’s talk a bit about Astros key features to get a better understanding of what Astro does thats gotten it so much attention in the last few months.

### Astro Islands Architecture

Key feature of Astro is that it uses Islands Architecture aka Component Islands. 

Astro ships with ZERO JavaScript by default, making sites created in Astro super fast, because it means that it serves only static pages to the user, without any JS, which is well… the fastest way possible to serve a web page. 

Now, this is great if you are building fully static site… but chances are you are not. And your site is going to need some of that JavaScript goodness for user interactions.

That is where Islands architecture comes in, with Astro you can easily create Islands of interactivity inside of your mainly static web page. And Astro is going to ship just those small parts of JavaScript to the client, either on page load, or if it’s further down the page, you can set it to load that JavaScript when the interactive island or component is visible.

### Multiple frameworks

Another feature of Astro is that you can use pretty much any UI framework or library you like with it, for creating your components. 

You can even mix and match web frameworks if you are some kind of monster and have no regards for consistency… but you know, if that is your thing you can do it.

Astro officially supports React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit but you also have third party integrations for custom elements, Angular and even PHP.

### Multi-Page Application

Astro is a multipage application framework, which means that is similar to something like Ruby on Rails, Laravel or WordPress in the way it serves pages to the user. Those pages are usually rendered on the server. 

However, traditional MPA frameworks would have you write a different language on the server (Ruby, PHP, etc.) and JavaScript on the browser. In Astro, you’re always just writing JavaScript, HTML and CSS. That way, you can render your UI components (like React and Svelte) on both the server and the client.

The result is a developer experience that feels a lot like Next.js and other modern web frameworks, but with performance characteristics of a more traditional MPA site architecture.

You need to keep this in mind when choosing Astro as your framework of choice. 

Because if you are building something like an application dashboard with a lot of shared state between pages and user interactions and don’t care about the SEO then Astro will not be a good fit for this use case.

But it’s a great solution for traditional websites, that are content focused and depend on speed and great SEO, with some user interactions sprinkled in.

### SSR

Since Astro can communicate with the server, that means that you don’t have to just deploy static sites but you can use Astro as a server side rendering framework. You can do this using adapters, Astro supports Cloudflare, Deno, Netlify, Node.js and Vercel at the time of making this video, with more adapters to come later.

### Community and integrations

And let’s not forget that even though Astro is a relatively new project it already has a great community with over 5000 developers and over a one hundred integrations.

Ok, so now that we have a general idea of what Astro is, let’s install it and try to build something with it.

### Editors

To work with Astro it is best to use VS Code, by using official VS Code extension. But you also have community support for Nova Editor, Vim and Neovim.

Unfortunately at the time of making this video there is no real plugin for JetBrains IDEs like WebStorm or PHPStorm, which I’m using. However there is a workaround, that will at least give you code highlighting in JetBrains IDEs.

You can follow the instructions in this comment on JetBrains Issues page, the link will be in the description below.

[https://youtrack.jetbrains.com/issue/WEB-52015/Astro-Language-Support#focus=Comments-27-5745973.0-0](https://youtrack.jetbrains.com/issue/WEB-52015/Astro-Language-Support#focus=Comments-27-5745973.0-0)

### Project structure

Astros project structure is pretty basic, and if you used React, Vue, Next.js etc. this will all look very familiar to you.

There is a `public` folder for your images and other assets. `src` with `components` `layouts` and `pages`. These are all pretty self explanatory, especially if you used Next.js since Astro also has file based routing just like Next. So all of your routes are defined as files inside `pages` folder.

### Components

Main building blocks of Astro app are Astro components. And I don’t just mean components in the `components` folder, but every file that has an `.astro` extension is an Astro component. 

Component structure is a mix of JSX, HTML, Vue components, Markdown files with frontmatter, but it also somehow manages to be its own thing.

There is a lot of things that you need to be aware about these components. And it would take a whole video just to cover all the ins and outs of Astro components, because they seem really powerful.

I will cover only the basics here, and you can learn the rest from the docs, which shouldn’t be a problem since Astro docs are one of the best that I’ve seen in a while, and you really should read them if you plan to use this framework.

**Astro component is composed of three main parts:**

**JavaScript** part where you write your JS code, here you can import other components, components written in other frameworks, helper functions, you can write your own logic, define local variables, define props for your component and so on. So all your JavaScript goes here. This code is written inside code fences --- similar to frontmatter in Markdown files.

You need to keep in mind that Astro components render to HTML during build. Even if you run JavaScript code inside of your components, it will all run ahead of time, stripped from the final page that you send to your users. 

There are ways to run code AS IS, if you need it, but you can read abut that in the docs. 

**Component template** comes below the script part of component, you can write plain old HTML here. However Astro’s component template syntax also supports JavaScript expressions, imported components and special Astro directives.

You can use JSX like expressions here, like mapping over an array and displaying its values just like in React,  but you need to keep in mind that although you can include dynamic values that are calculated in the script block, once included these values are not reactive and are not going to change. 

And finally you have <style> block in which you can write your styles. These styles are scoped to the component by default. However, keep in mind that the styles are going to apply only to the content of the components template, children and any imported components will not be styled by default.  
  
### Conclusion

Astro seems very interesting, but at least for now I would just use it for mostly static sites that need some interactivity. I would need to try Server Side Rendering, and see how that works in Astro to make a final conclusion. 

I also know that some people think that it’s problematic that Astro will fully load new pages when the links are clicked, like a traditional website, and it’s hard to share state between those full reloads. To me this is not a problem, because Astro is a content focused framework and it is not intended to be used like a Single Page Application. There are other tools for that if you need that sort of functionality. Although I’m sure that somebody will try to “fix” that problem sooner or later. 

Of course there are many more Astro concepts that I could cover, if you are interested in that let me know down in the comments.

In this video we are going to checkout Astro - all-in-one web framework for building fast, content-focused websites.

Let's Checkout... Astro

In the [last episode](https://watch-learn.com/static-sites-nuxt/data-wordpress) we created a blog section on oour site using WordPress and Nuxt of course. We didn't connect our posts to anything right then and there, because as you will see in this episode that is not super obvious how to do, especially if you are building completely statically generated site.

Also in this episode we are going to learn about special `asyncData` method.

In this episode I'm going to show you how to link to every specific post coming from WordPress to our Nuxt application.

Data From WordPress #2

Now I'm going to show you how to create a blog on your static site using WordPress. So we are going to get our data from locally installed WordPress installation, and then use Nuxt to display those posts, and then of course statically generate them, so that they are ready for a full static deploy to any server you want.

In this episode we are going to start creating blog section for our Nuxt static site, and what better tool to use for that than WordPress.

Data From WordPress

First I'm going to show you how to enable Sass in your Nuxt static site, after that we are going to learn how to create a global CSS file for all your global stylings. 

I'm also going to show you how to make your mixins, variables and functions available throughout your site and all of your components, and lastly we are going to learn how to extract all that CSS into CSS files instead of having all our CSS inlined at the head of our pages.

In this episode we are going to learn how to handle CSS and SCSS in Nuxt.

Handling CSS

Now I'm going to show you how you can create custom layouts for your Nuxt static website, we are usually going to need that when one or more of our pages needs a different type of look then the rest of our pages. 

Also you will learn how to make custom error pages, and at the end I'm going to talk a bit about SEO and how to add custom meta tags to the head of your pages, and also how to add Open Graph tags so that users can safely share your site on Facebook.

In this episode we are going to go in depth with Nuxt views and also talk a bit about SEO and meta tags.

Views And SEO

Routing in Nuxt is a bit different than something you would get with Vue CLI, because in Nuxt you don't actually define the routes, but the routes are generated for you automatically based on your pages folder structure, and that is what we are going to be doing in this episode.

Also we are going to start building our Vue and Nuxt site by creating a header which is going to be available through out of our site using the layout files.

In this episode we are going to start building our Nuxt site, and also take a look at the basic Nuxt routing.

Basic Routing

Nuxt is THE framework for Vue.js. It can be used for a lot of things, from creating desktop and mobile apps to universal and single page applications to progressive web apps. And we might see more of Nuxt on this channel doing one of those things. But the feature of Nuxt that is often forgotten is that it can be a great tool for creating static web sites. And this exactly what we are going to be taking a look at in this series. All of this is of course made possible through the power of Vue.

In this first episode of new mini series, we are going to take a look at what Nuxt.js is and how it can help us in creating statically generated websites.

Overview and Install

Now we are going to be displaying our images on our post list page and also on single post. You are also going to learn how to use gatsby-image component and how to use regular img tags with your images on Gatsby.js and Wordpress site.

Of course we are going to be creating GraphQL query so that the React.js would get the correct data.

In this episode you are going to learn how to display images on your Gastby.js and WordPress site.

Displaying images

I say that I'm going to try to create a website using these technologies because I'm not familiar with any of them except for WordPress. Gatsby.js uses React and GraphQL as main driving engines behind it. Needless to say that I'm not familiar with either of these technologies, but this will be a great opportunity to learn with you guys.

In this particular episode we are going to setup our development environment and get posts and pages using Gatsby.js and WordPress REST API.

In this mini-series I'm going to try and create website using Gatsby.js and WordPress.

Tutorials tagged with: static site generator

Get in touch