Introduction to Astro
Table of content
- Introduction
- Benefits of using Astro
- Create a simple Astro project
- Conclusion
Create a simple Astro project
To create a project with Astro, you need to have Node.js installed.
Then you can use npm or your preferred package manager to create a project (I personally prefer pnpm).
# create a new project with npm
npm create astro@latest
# create a new project with pnpm
pnpm create astro@latest
# create a new project with yarn
yarn create astro
After entering the command, the CLI helper "Houston" will help you create the project.
Enter the directory name for your new project
Select a template (I prefer Empty, but you can choose different ones to explore Astro)
Do you want to use TypeScript? I prefer to use TypeScript for more stable code
How strict should your TypeScript settings be?
Then you have the option to install the dependencies directly
Initialize git? If you don't know what it is, I highly recommend you learn it!
The Commands to Start
Now you have a project!
To start the project for development, simply use this command:
# Run astro in dev mode
npm run dev
Then you can visit your project using the browser of your choice at http://localhost:4321.
In case you want to deploy your project, you can build your project as static files using the following command:
# Build your project
npm run build
A directory dist will appear with your page as a static website. Deploy those files on a hosting service or edge network of your choice, and your website is online!
The framework of your choice
While the pages directory must contain Astro files, you're free to choose your preferred framework for components!
You just need to install the plugin, and then you can write files, e.g., like src/components/Button.tsx, and then you can even use them in Astro files.
Here are some documentation links for some popular frameworks:
The directory structure
In Astro, the directory structure plays a crucial role. Let me provide a quick overview of the key directories you'll be working with.
You have a public directory. This contains files that will be deployed as-is. In this directory, you can place items such as your favicon or robots.txt file.
In your src directory, the pages directory plays a big role. Here you can add Astro files, which then become pages on your website. The directory structure represents the routing of the page. So, e.g., the file src/pages/hello/world.astro becomes the response of the URL call /hello/world/. Read more about the pages and the routing in the documentation.
You can pack your reusable code, like buttons, cards, etc., into components and put them in the src/components directory to use them where you need them. On this page, you learn how to use components.
Another important directory to mention is src/content. Here, you can add files that contain your page's content in a specific format. These are called content collections and could include, for example, blog posts for your website. For each collection, you can define how it should be rendered. Read more about it here.