DEV Community 👩‍💻👨‍💻

Cover image for How to build your website at super-sonic speed with Astro.
Ian Jennings for Replayable

Posted on

How to build your website at super-sonic speed with Astro.

Astro is a new and popular framework for building content-focused websites like blogs, portfolios, or documentation sites.

It fills a niche similiar to that of tools like Hugo, Gatsby, or 11ty, but differentiates itself with some distinct features:

  • Astro Islands: interactive UI components in an otherwise static page
  • Choice of frontend framework: Use React, Vue, Svelte, and others

Let's set it up on Windows using WSL!

This tutorial assumes you have WSL, npm, and VSCode set up.

Set up

Enter your WSL environment and run this command to initialize your Astro project's directory:

npm create astro@latest
Enter fullscreen mode Exit fullscreen mode

create astro

First, you must name your project's directory. We'll use the default for this tutorial.

Then choose a template. We'll go with the recommended choice: "Just the basics".

When prompted to install dependencies, press enter to choose the default of yes.

astro setup prompts

After dependencies finish installing, press enter again to make your project a git repository.

Finally, choose how to set up TypeScript. Let's choose "Strict" as it's recommended.

astro finish setup

Let's run the development server to see test that everything works as intended.

Change to you project's directory, then run this command:

npm run dev
Enter fullscreen mode Exit fullscreen mode

npm run dev

Wait for the server to start and open the local address in your browser.

welcome to astro

If you see the dev server's home page, Astro is fully set up and functional. We're now ready to build our own site.

Building your site

To demonstrate the basics behind editing our site, let's make some changes to the home page!

Navigate to the directory containing astro.index:

cd src/pages
Enter fullscreen mode Exit fullscreen mode

Now open this file in the editor of your choice. Here I'm using VSCode with its WSL support.

edit index.astro

There's a lot going on in this file. Let's replace its contents with the bare minimum:

---
---

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

Navigate your browser to Astro's local server to see the blank canvas of your new site.

open site

From here, the possibilities are endless, and with Astro as our guide, let's shoot for the moon!

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post