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, andVSCodeset up.
Set up
Enter your WSL environment and run this command to initialize your Astro project's directory:
npm create astro@latest
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.
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.
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
Wait for the server to start and open the local address in your browser.
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
Now open this file in the editor of your choice. Here I'm using VSCode with its WSL support.
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>
Navigate your browser to Astro's local server to see the blank canvas of your new site.
From here, the possibilities are endless, and with Astro as our guide, let's shoot for the moon!
Top comments (0)