Astro

Astro is a static site builder that delivers lightning-fast performance by minimizing the JavaScript code that’s being shipped to your browser. While doing that, you are still allowed to use and even combine multiple of the most popular frameworks, like React and Vue.

Installation / Create project

To create a project, simply run the following:

This component was made by Stratis Dermanoutsos. The code can be found here.

Then, simply add the steps that appear in your console.

No need to pre-create a folder, Astro will do it for you.

After the project is initialized, run the project:

This component was made by Stratis Dermanoutsos. The code can be found here.

Basic structure of a component

This component was made by Stratis Dermanoutsos. The code can be found here.

To use the component, import it in another component or a page:

This component was made by Stratis Dermanoutsos. The code can be found here.

For the sake of this example, the component we created above is written in the file src/components/test.astro.

To pass props, use TypeScript types in the component:

This component was made by Stratis Dermanoutsos. The code can be found here.

Then, you can call it as follows:

This component was made by Stratis Dermanoutsos. The code can be found here.

Pages and routing

Astro uses both static and dynamic routing.

Static routing

All Astro (*.astro) and Markdown (*.md) files in the src/pages directory automatically become pages on your website.

For example,

# Example: Static routes

src/pages/index.astro        -> mysite.com/

src/pages/about.astro        -> mysite.com/about
src/pages/about/index.astro  -> mysite.com/about

src/pages/about/me.astro     -> mysite.com/about/me

src/pages/posts/1.md         -> mysite.com/posts/1

Markdown pages

Astro treats .md files as pages, as long as they’re located inside the src/pages/ directory.

For example,

This component was made by Stratis Dermanoutsos. The code can be found here.

will be automatically translated to HTML.

Layouts

Layouts are basically components with a more specific usage. They exist to re-use basic page styling for your page.

For example, create a TestLayout.astro file with the following content:

This component was made by Stratis Dermanoutsos. The code can be found here.

Notice the <slot /> component. This is used to specify where the children of the layout will go.

Now, to use the layout, pretend it’s just a component.

For example, in index.astro, we’ll write the following:

This component was made by Stratis Dermanoutsos. The code can be found here.

What this does is it uses all the code of the layout we created earlier and replaces the <slot /> component with all the new code that exists between the <TestLayout>...</TestLayout> tags.

Styling

To style any component, simply use the <style></style> tag as you would in any HTML file.

However, it is IMPORTANT to notice that Astro uses styled components, and as such, the styling for each component needs to be declared in the same file.

This component was made by Stratis Dermanoutsos. The code can be found here.

Global styles

To add global styles to HTML elements/classes etc, use the is:global selector

This component was made by Stratis Dermanoutsos. The code can be found here.

Choose CSS preprocessor

Simply, set the lang attribute for the <style></style> tag.

Eg.

This component was made by Stratis Dermanoutsos. The code can be found here.

Add a framework to your page

There are 2 ways to add a UI Framework (Eg. React) to your Astro project:

  • Manually

    To do this manually, there are 2 steps to follow.

    1. Install the framework’s dependencies:

      This component was made by Stratis Dermanoutsos. The code can be found here.

    2. Add the framework to the astro.config.mjs file, as shown:

      This component was made by Stratis Dermanoutsos. The code can be found here.

  • Using the automated tool

    This component was made by Stratis Dermanoutsos. The code can be found here.

Hydration

A framework component can be made interactive (hydrated) using one of the client:* directives.

  • This component’s JS will begin importing when the page loads.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • This component’s JS will be imported once the page is done with its initial load.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • This component’s JS will not be imported until the user scrolls down enough for component to be visible on the page.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • The component’s JavaScript will be hydrated once a certain CSS media query is met.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • This skips HTML server-rendering, and renders only on the client. It hydrates the component immediately on page load.

    This component was made by Stratis Dermanoutsos. The code can be found here.

    You must pass the component’s correct framework as a value!

Resources