streamlined install plus develop and build pages (#10060)

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
Co-authored-by: delucis <357379+delucis@users.noreply.github.com>

astro.sidebar.ts

@@ -18,7 +18,7 @@ export const sidebar = [
 				items: ['concepts/why-astro', 'concepts/islands', 'tutorial/0-introduction'],
 			}),
 			group('start.newProject', {
-				items: ['install-and-setup', 'basics/project-structure'],
+				items: ['install-and-setup', 'basics/project-structure', 'develop-and-build',],
 			}),
 			group('start.config', {
 				items: [

src/content/docs/en/develop-and-build.mdx

@@ -0,0 +1,146 @@
+---
+title: Develop and build
+description: 'How to start working on a new project.'
+i18nReady: true
+---
+import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
+import ReadMore from '~/components/ReadMore.astro';
+
+Once you have an Astro project, now you're ready to build with Astro! 🚀
+
+## Edit your project
+
+To make changes to your project, open your project folder in your code editor. Working in development mode with the dev server running allows you to see updates to your site as you edit the code.
+
+You can also [customize aspects of your development environment](#configure-your-dev-environment) such as configuring TypeScript or installing the official Astro editor extensions.
+
+### Start the Astro dev server
+
+Astro comes with a built-in development server that has everything you need for project development. The `astro dev` CLI command will start the local development server so that you can see your new website in action for the very first time.
+
+Every starter template comes with a pre-configured script that will run `astro dev` for you. After navigating into your project directory, use your favorite package manager to run this command and start the Astro development server.
+
+<Tabs>
+  <TabItem label="npm">
+  ```shell
+  npm run dev
+  ```
+  </TabItem>
+  <TabItem label="pnpm">
+  ```shell
+  pnpm run dev
+  ```
+  </TabItem>
+  <TabItem label="yarn">
+  ```shell
+  yarn run dev
+  ```
+  </TabItem>
+</Tabs>
+
+
+If all goes well, Astro will now be serving your project on [http://localhost:4321/](http://localhost:4321/). Visit that link in your browser and see your new site!
+
+### Work in development mode
+
+Astro will listen for live file changes in your `src/` directory and update your site preview as you build, so you will not need to restart the server as you make changes during development. You will always be able to see an up-to-date version of your site in your browser when the dev server is running.
+
+When viewing your site in the browser, you'll have access to the [Astro dev toolbar](/en/guides/dev-toolbar/). As you build, it will help you inspect your [islands](/en/concepts/islands/), spot accessibility issues, and more.
+
+If you aren't able to open your project in the browser after starting the dev server, go back to the terminal where you ran the `dev` command and check the message displayed. It should tell you if an error occurred, or if your project is being served at a different URL than [http://localhost:4321/](http://localhost:4321/).
+
+## Build and preview your site
+
+To check the version of your site that will be created at build time, quit the dev server (<kbd>Ctrl</kbd> + <kbd>C</kbd>) and run the appropriate build command for your package manager in your terminal:
+
+    <Tabs>
+      <TabItem label="npm">
+      ```shell
+      npm run build
+      ```
+      </TabItem>
+      <TabItem label="pnpm">
+      ```shell
+      pnpm build
+      ```
+      </TabItem>
+      <TabItem label="yarn">
+      ```shell
+      yarn run build
+      ```
+      </TabItem>
+    </Tabs>
+
+Astro will build a deploy-ready version of your site in a separate folder (`dist/` by default) and you can watch its progress in the terminal. This will alert you to any build errors in your project before you deploy to production. If TypeScript is configured to `strict` or `strictest`, the `build` script will also check your project for type errors.
+
+When the build is finished, run the appropriate `preview` command (e.g. `npm run preview`) in your terminal and you can view the built version of your site locally in the same browser preview window.
+
+Note that this previews your code as it existed when the build command was last run. This is meant to give you a preview of how your site will look when it is deployed to the web. Any later changes you make to your code after building will **not** be reflected while you preview your site until you run the build command again.
+
+Use (<kbd>Ctrl</kbd> + <kbd>C</kbd>) to quit the preview and run another terminal command, such as restarting the dev server to go back to [working in development mode](#work-in-development-mode) which does update as you edit to show a live preview of your code changes.
+
+<ReadMore>Read more about [the Astro CLI](/en/reference/cli-reference/) and the terminal commands you will use as you build with Astro.</ReadMore>
+
+:::tip 
+You may wish to [deploy your new site right away](/en/guides/deploy/), before you begin to add or change too much code. This is helpful to get a minimal, working version of your site published and can save you extra time and effort troubleshooting your deployment later.
+:::
+
+## Next Steps
+
+Success! You are now ready to start building with Astro! 🥳
+
+Here are a few things that we recommend exploring next. You can read them in any order. You can even leave our documentation for a bit and go play in your new Astro project codebase, coming back here whenever you run into trouble or have a question.
+
+### Configure your dev environment
+
+Explore the guides below to customize your development experience.
+
+<CardGrid>
+  <LinkCard
+    title="Editor Setup"
+    description="Customize your code editor to improve the Astro developer experience and unlock new features."
+    href="/en/editor-setup/"
+  />
+  <LinkCard
+    title="Dev Toolbar"
+    description="Explore the helpful features of the dev toolbar."
+    href="/en/guides/dev-toolbar/"
+  />
+  <LinkCard
+    title="TypeScript Configuration"
+    description="Configure options for type-checking, IntelliSense, and more."
+    href="/en/guides/dev-toolbar/"
+  />
+</CardGrid>
+
+### Explore Astro's Features
+
+<CardGrid>
+  <LinkCard
+    title="Understand your codebase"
+    description="Learn about Astro’s file structure in our Project Structure guide."
+    href="/en/basics/project-structure/"
+  />
+  <LinkCard
+    title="Create content collections"
+    description="Add content to your new site with frontmatter validation and automatic type-safety."
+    href="/en/guides/content-collections/"
+  />
+    <LinkCard
+    title="Add view transitions"
+    description="Create seamless page transitions and animations."
+    href="/en/guides/view-transitions/"
+  />
+  <LinkCard
+    title="Learn about Islands"
+    description="Read about Astro's islands architecture."
+    href="/en/concepts/islands/"
+  />
+</CardGrid>
+
+### Take the introductory tutorial
+
+Build a fully functional Astro blog starting from a single blank page in our [introductory tutorial](/en/tutorial/0-introduction/).
+
+This is a great way to see how Astro works and walks you through the basics of pages, layouts, components, routing, islands, and more. It also includes an optional, beginner-friendly unit for those newer to web development concepts in general, which will guide you through installing the necessary applications on your computer, creating a GitHub account, and deploying your site.
+

src/content/docs/en/guides/migrate-to-astro/from-docusaurus.mdx

@@ -46,7 +46,7 @@ When you rebuild your Docusaurus site in Astro, you will notice some important d
 
 To convert a Docusaurus documentation site to Astro, start with our official [Starlight docs theme starter template](https://starlight.astro.build), or explore more community docs themes in our [theme showcase](https://astro.build/themes?search=&categories%5B%5D=docs). 
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-eleventy.mdx

@@ -37,7 +37,7 @@ When you rebuild your Eleventy (11ty) site in Astro, you will notice some import
 
 To convert an Eleventy blog to Astro, start with our blog theme starter template, or explore more community blog themes in our [theme showcase](https://astro.build/themes/).
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx

@@ -45,7 +45,7 @@ Each project migration will look different, but there are some common actions yo
 ### Create a new Astro project
 Use the `create astro` command for your package manager to launch Astro's CLI wizard or choose a community theme from the [Astro Theme Showcase](https://astro.build/themes).
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters (e.g. `docs`, `blog`, `portfolio`). Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters (e.g. `docs`, `blog`, `portfolio`). Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-gitbook.mdx

@@ -37,7 +37,7 @@ When you migrate your GitBook docs to Astro, you will notice some important diff
 
 To convert a GitBook documentation site to Astro, start with our official [Starlight docs theme starter template](https://starlight.astro.build), or explore more community docs themes in our [theme showcase](https://astro.build/themes?search=&categories%5B%5D=docs).
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx

@@ -39,7 +39,7 @@ When you rebuild your Gridsome site in Astro, you will notice some important dif
 
 To convert a Gridsome blog to Astro, start with our blog theme starter template, or explore more community blog themes in our [theme showcase](https://astro.build/themes/).
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-hugo.mdx

@@ -39,7 +39,7 @@ When you rebuild your Hugo site in Astro, you will notice some important differe
 
 To convert a Hugo blog to Astro, start with our blog theme starter template, or explore more community blog themes in our [theme showcase](https://astro.build/themes/).
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx

@@ -37,7 +37,7 @@ When you rebuild your Jekyll site in Astro, you will notice some important diffe
 
 To convert a Jekyll blog to Astro, start with our blog theme starter template, or explore more community blog themes in our [theme showcase](https://astro.build/themes/).
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx

@@ -43,7 +43,7 @@ Each project migration will look different, but there are some common actions yo
 
 Use the `create astro` command for your package manager to launch Astro's CLI wizard or choose a community theme from the [Astro Theme Showcase](https://astro.build/themes).
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters (e.g. `docs`, `blog`, `portfolio`). Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters (e.g. `docs`, `blog`, `portfolio`). Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx

@@ -44,7 +44,7 @@ Each project migration will look different, but there are some common actions yo
 ### Create a new Astro project
 Use the `create astro` command for your package manager to launch Astro's CLI wizard or choose a community theme from the [Astro Theme Showcase](https://astro.build/themes).
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters (e.g. `docs`, `blog`, `portfolio`). Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters (e.g. `docs`, `blog`, `portfolio`). Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-pelican.mdx

@@ -35,7 +35,7 @@ When you rebuild your Pelican site in Astro, you will notice some important diff
 
 To convert a Pelican documentation site to Astro, start with our official [Starlight docs theme starter template](https://starlight.astro.build), or explore more community themes in our [theme showcase](https://astro.build/themes/). 
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-sveltekit.mdx

@@ -42,7 +42,7 @@ When you rebuild your SvelteKit site in Astro, you will notice some important di
 
 To convert a SvelteKit blog to Astro, start with our blog theme starter template, or explore more community blog themes in our [theme showcase](https://astro.build/themes/).
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-vuepress.mdx

@@ -37,7 +37,7 @@ When you rebuild your VuePress site in Astro, you will notice some important dif
 
 To convert a VuePress documentation site to Astro, start with our official [Starlight docs theme starter template](https://starlight.astro.build), or explore more community docs themes in our [theme showcase](https://astro.build/themes?search=&categories%5B%5D=docs). 
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">

src/content/docs/en/guides/migrate-to-astro/from-wordpress.mdx

@@ -39,7 +39,7 @@ When you rebuild your WordPress site in Astro, you will notice some important di
 
 To convert a WordPress blog to Astro, start with our blog theme starter template, or explore more community blog themes in our [theme showcase](https://astro.build/themes). 
 
-You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#use-a-theme-or-starter-template).
+You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard).
 
   <PackageManagerTabs>
     <Fragment slot="npm">