Get Started Astro Tutorial — 4. Creating the Astro project

00:00 / 00:00

4. Creating the Astro project

To create the project with Astro, we'll start from scratch.

First, we use Astro's CLI to scaffold the project structure:

npm create astro@latest

We'll name the project "myblog".

Choose the option "A basic, minimal starter".

For "Install Dependencies", select Yes.

For "Initialize Git Repository", it's up to you—in this case, select Yes.

Now enter the project folder (ideally, open the new folder in VSCode).

Start the project to check that everything works:

npm run dev

Open the browser and go to "localhost:4321", and you should see the default Astro welcome page.

To make development more comfortable, open the project in VSCode from the newly created folder. To help with formatting, let's install Prettier and the Astro extension:

npm install --save-dev prettier

npm install --save-dev prettier-plugin-astro

And add the following Prettier configuration to your .prettierrc file:

{
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

Cleaning Up

While we're at it, let's delete the files we don't need:

./src/assets/astro.svg
./src/assets/background.svg`
./components/Welcome.astro

Then, in ./src/routes/index.astro, update the file:

---
- import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';

// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
---

<Layout>
-	<Welcome />
+ <h1>Hello Blog!</h1>
</Layout>

Now we're ready to start building our blog!