diff options
Diffstat (limited to 'docs/src/pages/installation.md')
-rw-r--r-- | docs/src/pages/installation.md | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/docs/src/pages/installation.md b/docs/src/pages/installation.md new file mode 100644 index 000000000..ae7e5bcea --- /dev/null +++ b/docs/src/pages/installation.md @@ -0,0 +1,92 @@ +--- +layout: ~/layouts/Main.astro +title: Installation +--- + +There are a few different ways to install + +## Prerequisites + +- **Node.js** - `v12.20.0`, `v14.13.1`, `v16.0.0`, or higher. +- **A text editor** - We recommend [VS Code](https://code.visualstudio.com/) with the [Astro extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). +- **A terminal** - Astro is mainly accessed by terminal command-line. + +## Recommended Install + +`npm init astro` is the easiest way to install Astro in a new project. Run this command in your terminal to start our `create-astro` install wizard to walk you through setting up a new project. + +```bash +mkdir <project-name> +cd <project-name> +npm init astro +``` + +Follow the CLI instructions to install Astro with one of our official project starter templates. + +Once completed, jump over to our [Quickstart Guide](/quick-start#start-your-project) for a 30-second walkthrough on how to start & build your new Astro project! + +## Manual Install + +### Set up your project + +Create an empty directory with the name of your project, and then navigate into it: + +```bash +mkdir <project-name> +cd <project-name> +# Note: Replace <project-name> with the name of your project. +``` + +Create a new `package.json` file for your project. Astro is designed to work with the npm ecosystem of packages, which is managed in a `package.json` project manifest. If you don't know what the `package.json` file is, we highly recommend you to have a quick read on [the npm documentation](https://docs.npmjs.com/creating-a-package-json-file). + +```bash +# This command will create a basic package.json for you +npm init --yes +``` + +### Install Astro + +If you've followed the instructions above, you should have a directory with a single `package.json` file inside of it. You can now install Astro in your project. + +We'll use `npm` in the examples below, but you could also use `yarn` or `pnpm` if you prefer an npm alternative. If you aren't familiar with `yarn` or `pnpm`, then we strongly recommend sticking with `npm`. + +```bash +npm install astro +``` + +You can now replace the placeholder "scripts" section of your `package.json` file that `npm init` created for you with the following: + +```diff + "scripts": { +- "test": "echo \"Error: no test specified\" && exit 1" ++ "start": "astro dev", ++ "build": "astro build", + }, +} +``` + +### Create your first page + +Open up your favorite text editor, and create a new file in your project: + +```astro +--- +// 1. Create a new file at <project-directory>/src/pages/index.astro +// 2. Copy-and-paste this entire file (including `-` dashes) into it. +--- +<html> + <body> + <h1>Hello, World!</h1> + </body> +</html> +``` + +You can create more pages in the `src/pages` directory, and Astro will use the filename to create new pages on your site. For example, you can create a new file at `src/pages/about.astro` (reusing the previous snippet) and Astro will generate a new page at the `/about` URL. + +### Next Steps + +Success! You're now ready to start developing! Jump over to our [Quickstart Guide](/quick-start#start-your-project) for a 30-second walkthrough on how to start & build your new Astro project! + +📚 Learn more about Astro's project structure in our [Project Structure guide](/core-concepts/project-structure). +📚 Learn more about Astro's component syntax in our [Astro Components guide](/core-concepts/astro-components). +📚 Learn more about Astro's file-based routing in our [Routing guide](core-concepts/astro-pages). |