How I create a winning blog in Astro.js

Some Prerequisite!

Computer
CDM knowledge
Github online version controller
IDE code editor with java
Hosting platform

Step 1

Create the project npm create astro@latest.

astro-
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ └── Card.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
├── tsconfig.json
├── .gitignore
├── package.json
└── astro.config.mjs

or

Create a new project directory then name it astro-blog and cd into it. Then initialize it before installing astro like below.

mkdir astro-blog
cd astro-blog
npm init -y
npm i -D astro

1. Create a new directory for your project

mkdir astro-blog
cd astro-blog

2. Initialize a new npm project

npm init -y

3. Install Astro

npm install astro

4. Initialize Astro with the minimal template.

npx astro add

5. Create the blog post directory

mkdir src/pages/posts

5. Create the compoents directory

mkdir src/pages/posts

5. Create the layouts directory

mkdir src/pages/posts

7. Create the frist blog post

mkdir post1.md

5. Create the pages directory

mkdir src/pages/posts

6. Create the secound blog post

mkdir post2.md

astro-blog/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ └── Card.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
│ │ ├── post1.md
│ │ └── post2.md
├── tsconfig.json
├── .gitignore
├── package.json
└── astro.config.mjs

7. Start the development server

npm run dev

Now you have all the elements needed for blog. Add more posts or components to enhance the UI interface.