How to build your website at super-sonic speed with Astro.
Tags: beginners, javascript, webdev, tutorial
Published: 2022-09-26 17:46:40


[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][hugo], [Gatsby][gatsby], or [11ty][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][wsl]!

[astro]: https://astro.build/
[hugo]: https://gohugo.io/
[gatsby]: https://www.gatsbyjs.com/
[11ty]: https://www.11ty.dev/
[wsl]: https://docs.microsoft.com/en-us/windows/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:
```sh
npm create astro@latest
```

[![create astro](https://replayable-api-production.herokuapp.com/replay/632dfdd6aec4dd0063452d19/screenshot?shareKey=ttykEfbkPwOBhxCuV7bg)](https://replayable.io/replay/632dfdd6aec4dd0063452d19/?share=ttykEfbkPwOBhxCuV7bg)

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](https://replayable-api-production.herokuapp.com/replay/632dfe39aec4dd0063452d1a/screenshot?shareKey=ZPt5rMFSZenUglaepmpkw)](https://replayable.io/replay/632dfe39aec4dd0063452d1a/?share=ZPt5rMFSZenUglaepmpkw)

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](https://replayable-api-production.herokuapp.com/replay/632dff3a9c55c0006521da13/screenshot?shareKey=1fVfXcoPOgZ5DpjCl3lsyQ)](https://replayable.io/replay/632dff3a9c55c0006521da13/?share=1fVfXcoPOgZ5DpjCl3lsyQ)

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

Change to you project's directory, then run this command:
```sh
npm run dev
```

[![npm run dev](https://replayable-api-production.herokuapp.com/replay/632e0568aec4dd0063452d1c/screenshot?shareKey=EZM4x4LWsLnNjEu1Sg8qdQ)](https://replayable.io/replay/632e0568aec4dd0063452d1c/?share=EZM4x4LWsLnNjEu1Sg8qdQ)

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

[![welcome to astro](https://replayable-api-production.herokuapp.com/replay/632e04e29c55c0006521da16/screenshot?shareKey=dTn92dLq4X2CeLUUMIvJw)](https://replayable.io/replay/632e04e29c55c0006521da16/?share=dTn92dLq4X2CeLUUMIvJw)

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`:
```sh
cd src/pages
```

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

[vscode]: https://code.visualstudio.com/
[remote]: https://code.visualstudio.com/docs/remote/wsl

[![edit index.astro](https://replayable-api-production.herokuapp.com/replay/632e0d30aec4dd0063452d1e/screenshot?shareKey=QRPDbWUBAbPx7rSGLARaA)](https://replayable.io/replay/632e0d30aec4dd0063452d1e/?share=QRPDbWUBAbPx7rSGLARaA)

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

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

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

[![open site](https://replayable-api-production.herokuapp.com/replay/632e0ebfaec4dd0063452d20/screenshot?shareKey=z7HtnNQo6rfXzJJs2NdQ)](https://replayable.io/replay/632e0ebfaec4dd0063452d20/?share=z7HtnNQo6rfXzJJs2NdQ)

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