Add Steps component to vercel.mdx (#8116)

Co-authored-by: Houston (Bot) <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: Sergio A. Arevalo Soria <[email protected]> Co-authored-by: Reuben Tier <[email protected]>
withastro · May 2, 2024 · fba6ebf · fba6ebf
1 parent 2c5821e
commit fba6ebf
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/src/content/docs/en/guides/deploy/vercel.mdx b/src/content/docs/en/guides/deploy/vercel.mdx
@@ -4,7 +4,8 @@ description: How to deploy your Astro site to the web on Vercel.
 type: deploy
 i18nReady: true
 ---
-import ReadMore from '~/components/ReadMore.astro'
+import ReadMore from '~/components/ReadMore.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 You can use [Vercel](http://vercel.com/) to deploy an Astro site to their global edge network with zero configuration.
 
@@ -30,6 +31,7 @@ npx astro add vercel
 
 If you prefer to install the adapter manually instead, complete the following two steps:
 
+<Steps>
 1. Install [the `@astrojs/vercel` adapter](/en/guides/integrations-guide/vercel/) to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
 
     ```bash
@@ -47,25 +49,31 @@ If you prefer to install the adapter manually instead, complete the following tw
       adapter: vercel(),
     });
     ```
+</Steps>
 
 ## How to deploy
 
 You can deploy to Vercel through the website UI or using Vercel’s CLI (command line interface). The process is the same for both static and SSR Astro sites.
 
 ### Website UI Deployment
 
+<Steps>
 1. Push your code to your online Git repository (GitHub, GitLab, BitBucket).
+
 2. [Import your project](https://vercel.com/new) into Vercel.
+
 3. Vercel will automatically detect Astro and configure the right settings.
+
 4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/))
+</Steps>
 
 After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments), and all changes made to the Production Branch (commonly “main”) will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).
 
 <ReadMore>Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git).</ReadMore>
 
-
 ### CLI Deployment
 
+<Steps>
 1. Install the [Vercel CLI](https://vercel.com/cli) and run `vercel` to deploy.
 
     ```bash
@@ -74,9 +82,11 @@ After your project has been imported and deployed, all subsequent pushes to bran
     ```
 
 2. Vercel will automatically detect Astro and configure the right settings.
+
 3. When asked `Want to override the settings? [y/N]`, choose `N`.
-4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/))
 
+4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/))
+</Steps>
 
 ### Project config with vercel.json