Monday, September 26, 2022
HomeWordPress DevelopmentMethods to construct your web site at super-sonic pace with Astro.

Methods to construct your web site at super-sonic pace with Astro.


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, and VSCode arrange.



Arrange

Enter your WSL setting and run this command to initialize your Astro undertaking’s listing:

npm create astro@newest
Enter fullscreen mode

Exit fullscreen mode

create astro

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.

astro setup prompts

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.

astro finish setup

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
Enter fullscreen mode

Exit fullscreen mode

npm run dev

Watch for the server to begin and open the native handle in your browser.

welcome to astro

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
Enter fullscreen mode

Exit fullscreen mode

Now open this file within the editor of your selection. Right here I am utilizing VSCode with its WSL assist.

edit index.astro

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>
Enter fullscreen mode

Exit fullscreen mode

Navigate your browser to Astro’s native server to see the clean canvas of your new website.

open site

From right here, the chances are countless, and with Astro as our information, let’s shoot for the moon!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments