Explore the New Era of Static Sites Generation: Astro

Explore the New Era of Static Sites Generation: Astro

Play this article

Do you know what is the hottest stuff going on in the Web Dev Community, it's JAM Stack, Static Sites, and stuff like that. People are more into creating their portfolios, blogs, podcasts, etc. where you don't need a lot of business-level technologies like Angular, .NET, and MySQL. This is where most people use more content-driven technologies like a Static Site Generator, a Content Management System, and more...

What is Astro in general?

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

Key Features

  • Component Islands: A new web architecture for building faster websites.

  • Server-first API design: Move expensive hydration off of your users’ devices.

  • Zero JS, by default: No JavaScript runtime overhead to slow you down.

  • Edge-ready: Deploy anywhere, even a global edge runtime like Deno or Cloudflare.

  • Customizable: Tailwind, MDX, and 100+ other integrations to choose from.

  • UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more.

In general, It supports many UI JavaScript Frameworks altogether, like one of your components can be React and another can be Vue and the other one can be Svelte. This makes Astro very useful because of this feature. Another extremely powerful feature of Astro is that it ships no Javascript on the page load.

Get started with Astro

To create a new Astro project you need to run this npm command:

# create a new project with npm
npm create astro@latest

You can run create-astro anywhere on your machine, so there’s no need to create a new empty directory for your project before you begin. If you don’t have an empty directory yet for your new project, the wizard will help create one for you automatically.

If all goes well, you should see a “Ready for liftoff!” message followed by some recommended “Next steps”. cd into your new project directory to begin using Astro.

If you skipped the npm install step during the create-astro wizard, then be sure to install your dependencies before continuing.

Add your first page to your site

Pages

Pages are files that live in the src/pages/ subdirectory of your Astro project. They are responsible for handling routing, data loading, and overall page layout for every page in your website.

Supported page files

Astro supports the following file types in the src/pages/ directory:

To create a new page you have to create a new file in the src/pages/ directory:

<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

To avoid repeating the same HTML elements on every page, you can move common <head> and <body> elements into your layout components. You can use as many or as few layout components as you’d like.

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>

You can also use markdown for your pages like this:

---
layout: '../layouts/MySiteLayout.astro'
title: 'My Markdown page'
---
# Title

This is my page, written in **Markdown.**

Congratulations! You have created your first Astro website. If you want to learn more about let me know that in the comments. If you like this article be considerate about sponsoring me, it really gives motivations. You can also reach me on Twitter (@programmingfire)

Did you find this article valuable?

Support Nouman Rahman by becoming a sponsor. Any amount is appreciated!