Install Astro manually
Ready to install Astro? Follow our automatic or manual set-up guide to get started.
Prerequisites
Section titled Prerequisites- Node.js -
14.18.0
,v16.12.0
, or higher. - Text editor - We recommend VS Code with our Official Astro extension.
- Terminal - Astro is accessed through its command-line interface (CLI).
Installation
Section titled InstallationIf you prefer not to use our automatic create-astro
CLI tool, you can set up your project yourself by following the guide below.
1. Create your directory
Section titled 1. Create your directoryCreate an empty directory with the name of your project, and then navigate into it.
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.
2. Install Astro
Section titled 2. Install AstroFirst, install the Astro project dependencies inside your project.
Then, replace any placeholder “scripts” section of your package.json
with the following:
You’ll use these scripts later in the guide to start Astro and run its different commands.
3. Create your first page
Section titled 3. Create your first pageIn 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:
4. Create your first static asset
Section titled 4. Create your first static assetYou 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:
5. Create astro.config.mjs
Section titled 5. Create astro.config.mjsAstro 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:
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.
6. Add TypeScript support
Section titled 6. Add TypeScript supportTypeScript 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):
Finally, create src/env.d.ts
to let TypeScript know about ambient types available in an Astro project:
📚 Read Astro’s TypeScript setup guide for more information.
7. Next Steps
Section titled 7. Next StepsIf you have followed the steps above, your project directory should now look like this:
Congratulations, you’re now set up to use Astro!
If you followed this guide completely, you can jump directly to Step 2: Start Astro to continue and learn how to run Astro for the first time.