Astro is a brand new and standard framework for constructing content-focused web sites like blogs, portfolios, or documentation websites.
It fills a distinct segment similiar to that of instruments like Hugo, Gatsby, or 11ty, however differentiates itself with some distinct options:
- Astro Islands: interactive UI elements in an in any other case static web page
- Alternative of frontend framework: Use React, Vue, Svelte, and others
Let’s set it up on Home windows utilizing WSL!
This tutorial assumes you’ve got
WSL,npm, andVSCodearrange.
Arrange
Enter your WSL setting and run this command to initialize your Astro undertaking’s listing:
npm create astro@newest
First, you should identify your undertaking’s listing. We’ll use the default for this tutorial.
Then select a template. We’ll go along with the beneficial selection: “Simply the fundamentals”.
When prompted to put in dependencies, press enter to decide on the default of sure.
After dependencies end putting in, press enter once more to make your undertaking a git repository.
Lastly, select easy methods to arrange TypeScript. Let’s select “Strict” because it’s beneficial.
Let’s run the event server to see check that the whole lot works as meant.
Change to you undertaking’s listing, then run this command:
npm run dev
Watch for the server to begin and open the native handle in your browser.
For those who see the dev server’s dwelling web page, Astro is totally arrange and practical. We’re now able to construct our personal website.
Constructing your website
To reveal the fundamentals behind modifying our website, let’s make some modifications to the house web page!
Navigate to the listing containing astro.index:
cd src/pages
Now open this file within the editor of your selection. Right here I am utilizing VSCode with its WSL assist.
There’s lots occurring on this file. Let’s change its contents with the naked minimal:
---
---
<html lang="en">
<head>
<title>My Homepage</title>
</head>
<physique>
<h1>Welcome to my web site!</h1>
</physique>
</html>
Navigate your browser to Astro’s native server to see the clean canvas of your new website.
From right here, the chances are countless, and with Astro as our information, let’s shoot for the moon!
