Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce. Astro is best-known for pioneering a new frontend architecture to reduce JavaScript overhead and complexity compared to other frameworks. If you need a website that loads fast and has great SEO, then Astro is for you.

Key Features of Astro:

Island Architecture:

Astro uses a unique “Island Architecture,” which allows you to ship HTML first websites with JavaScript loaded only where necessary.
Component Framework Agnostic:

Supports multiple frontend frameworks like React, Vue, Svelte, SolidJS, and more, allowing you to use tools you prefer.
Static Site Generation (SSG):

Out of the box support for static when needed, providing flexibility for dynamic content.
Server-side Rendering:

allow server rendered pages when needed, providing flexibility for dynamic content.
Zero JavaScript by Default:

Astro delivers pure HTML pages by default, with optional JavaScript hydration for interactive components.
Markdown and MDX Support:

Write content easily using Markdown or MDX (Markdown + JSX), integrating seamlessly with components.
Blazing Fast Performance:

Astro optimizes every aspect of the build and runtime experience for speed, ensuring faster websites with lower time-to-interactive (TTI).
SEO friendly:

The HTML-first approach makes Astro websites highly optimized for search engines, with clean and accessible markup.
Custom Integrations:

Built-in support for integrations like Tailwind CSS, TypeScript, image optimization, and more, ensuring a smooth developer experience.

Why Use Astro?

Perfect for Content-Driven Sites: Blogs, marketing sites, or documentation websites can be built quickly and load faster with minimal effort.
Developer Productivity: Its simplicity, flexibility, and support for multiple frameworks make it a joy to work with.
Cost-Effective Hosting: Static builds and minimal server-side resources result in lower hosting costs.
Future-Proof: Astro's hybrid approach to SSG and SSR ensures it adapts to any project's needs.

Installation Of Astro

Prerequisite:

HTML, CSS, JavaScript knowledge.
Node.js and npm
Any code Editor (VSCode)

The Installation of the Astro framework quite simple but, some of time you might face the problems like astro is not a command or a program kind of thing. It may be because of the first time but, there is no problem with that cause you can manually set up astro environment. You can choose any approach you want I would prefer Manual Set up cause, you might understand structure of the project folder better there.

It’s okay to choose command line method also, it’s easy to set up.

Installation Through Command line:

Open VS Code:

Open your VS code then open your project directory, no need to git initialization now because you can initialize the git in the set-up process. open the command line or terminal in VS code
Check Your version of node and npm

>>node -v
v20.17.0
>>npm -v
10.8.2

Make sure your node version is 18 or 20 or something between them. The Astro supports these versions of node.

Run the Command to Create Astro project

Run the Following command to create Astro project:

npm create astro@latest

After running the command, it asks the question that where to save the astro project like follows enter the directory name there:

 npx
> create-astro


 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./project_dir

Then it asks for what kind of project you want to create:

 tmpl   How would you like to start your new project?
         > A basic, minimal starter (recommended)
         — Use blog template 
         — Use docs (Starlight) template

I choose first option because I am totally a beginner.

Then it asks permission for dependency installation and Git initialization give Yes to that.


  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

      ▲  error Error: Timeout
      ▲  error Dependencies failed to install, please run npm install to install them manually after setup.
      ✔  Project initialized!
         ■ Template copied
         ■ Dependencies installed
         ■ Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./project_dir
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

There is a message that saying that there are some dependencies are not installed, so run “npm install” after changing directory to the project_dir

Install The missing dependencies:

first change directory to “project_dir”

cd project_dir

Install the missing dependencies

npm install

After Installation:

  ```text
  /
  ├── .vscode
  ├── node_modules
  ├── public/
  │   └── favicon.svg
  ├── src/
  │   ├── layouts/
  │   │   └── Layout.astro
  │   └── pages/
  │       └── index.astro
  ├── package.json
  ├── astro.config.mjs
  ├── package-lock.json
  ├── README.md
  └── tsconfig.json
  ```

The README.md has the external link which might help you in practicing the Astro framework

Open in Stackblitz
Open with code sandbox
Open in Github

Run the Program:

npm run dev

Manual Set up:

Create your directory

Create an empty directory with the name of your project, and then navigate into it.

Terminal window
```
 mkdir my-astro-project
 cd my-astro-project
```
Once you are in your new directory, create your project package.json file. This is how you will manage your project dependencies, including Astro. If you aren’t familiar with this file format, run the following command to create one.
- npm
- pnpm
- Yarn

Terminal window

    npm init --yes

Install Astro

First, install the Astro project dependencies inside your project.

Important

Astro must be installed locally, not globally. Make sure you are not running npm install -g astro pnpm add -g astro or yarn add global astro.
- npm
- pnpm
- Yarn

Terminal window

    npm install astro

Then, replace any placeholder “scripts” section of your package.json with the following:

package.json

      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
    },

You’ll use these scripts later in the guide to start Astro and run its different commands.

Create your first page

In your text editor, create a new file in your directory at src/pages/index.astro. This will be your first Astro page in the project.

For this guide, copy and paste the following code snippet (including --- dashes) into your new file:

src/pages/index.astro

 ---
 // Welcome to Astro! Everything between these triple-dash code fences// is your "component frontmatter". It never runs in the browser.
 console.log('This runs in your terminal, not the browser!');
 ---
 <!-- Below is your "component template." It's just HTML, but with    some magic sprinkled in to help you build great templates. -->
 <html>
   <body>
     <h1>Hello, World!</h1>
   </body>
 </html>
 <style>
   h1 {    color: orange;  }
 </style>

Create your first static asset

You will also want to create a public/ directory to store your static assets. Astro will always include these assets in your final build, so you can safely reference them from inside your component templates.

In your text editor, create a new file in your directory at public/robots.txt. robots.txt is a simple file that most sites will include to tell search bots like Google how to treat your site.

For this guide, copy and paste the following code snippet into your new file:

public/robots.txt
```
 # Example: Allow all bots to scan and index your site.
 # Full syntax: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
 User-agent: *
 Allow: /
```
Create astro.config.mjs

Astro is configured using astro.config.mjs. This file is optional if you do not need to configure Astro, but you may wish to create it now.

Create astro.config.mjs at the root of your project, and copy the code below into it:

astro.config.mjs
```
 import { defineConfig } from 'astro/config';
 // https://astro.build/configexport default defineConfig({});
```
If you want to include UI framework components such as React, Svelte, etc. or use other tools such as Tailwind or Partytown in your project, here is where you will manually import and configure integrations.

Read Astro’s API configuration reference for more information.
Add TypeScript support

TypeScript is configured using tsconfig.json. Even if you don’t write TypeScript code, this file is important so that tools like Astro and VS Code know how to understand your project. Some features (like npm package imports) aren’t fully supported in the editor without a tsconfig.json file.

If you do intend to write TypeScript code, using Astro’s strict or strictest template is recommended. You can view and compare the three template configurations at astro/tsconfigs/.

Create tsconfig.json at the root of your project, and copy the code below into it. (You can use base, strict, or strictest for your TypeScript template):

tsconfig.json
```
 {  "extends": "astro/tsconfigs/base"}
```
Read Astro’s TypeScript setup guide for more information.
Next Steps

If you have followed the steps above, your project directory should now look like this:
- Directorynode_modules/
- Directorypublic/
  - robots.txt

Directorysrc/
- Directorypages/
  - index.astro

astro.config.mjs
package-lock.jsonor yarn.lock, pnpm-lock.yaml, etc.
package.json
tsconfig.json

Reference

Astro official Documentation

Thank you for reading this article.

Astro Framework

Key Features of Astro:

Why Use Astro?

Installation Of Astro

Prerequisite:

Installation Through Command line:

Open VS Code:

Check Your version of node and npm

Run the Command to Create Astro project

Install The missing dependencies:

After Installation:

Run the Program:

Manual Set up:

Subscribe to my newsletter

Prasanna Achar

Prasanna Achar