Add Steps component to cloudfare.mdx (#8092)

Co-authored-by: Houston (Bot) <[email protected]> Co-authored-by: Sergio A. Arevalo Soria <[email protected]> Co-authored-by: HiDeoo <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>
withastro · May 2, 2024 · e80119d · e80119d
1 parent afd05ac
commit e80119d
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/src/content/docs/en/guides/deploy/cloudflare.mdx b/src/content/docs/en/guides/deploy/cloudflare.mdx
@@ -4,7 +4,8 @@ description: How to deploy your Astro site to the web using Cloudflare Pages.
 type: deploy
 i18nReady: true
 ---
-import ReadMore from '~/components/ReadMore.astro'
+import ReadMore from '~/components/ReadMore.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 You can deploy your Astro project on [Cloudflare Pages](https://pages.cloudflare.com/), a platform for frontend developers to collaborate and deploy static (JAMstack) and SSR websites.
 
@@ -23,25 +24,37 @@ To get started, you will need:
 
 ## How to deploy a site with Git
 
+<Steps>
 1. Set up a new project on Cloudflare Pages.
+
 2. Push your code to your git repository (GitHub, GitLab).
+
 3. Log in to the Cloudflare dashboard and select your account in **Account Home** > **Pages**.
+
 4. Select **Create a new Project** and the **Connect Git** option.
+
 5. Select the git project you want to deploy and click **Begin setup**
+
 6. Use the following build settings:
 
     - **Framework preset**: `Astro`
     - **Build command:** `npm run build`
     - **Build output directory:** `dist`
 
 7. Click the **Save and Deploy** button.
+</Steps>
 
 ## How to deploy a site using Wrangler
 
+<Steps>
 1. Install [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/).
+
 2. Authenticate Wrangler with your Cloudflare account using `wrangler login`.
+
 3. Run your build command.
+
 4. Deploy using `npx wrangler pages deploy dist`.
+</Steps>
 
 ```bash
 # Install Wrangler CLI
@@ -66,7 +79,6 @@ pnpm add wrangler --save-dev
 
 It's then possible to update the preview script to run `wrangler` instead of Astro’s built-in preview command:
 
-
 ```json title="package.json"
 "preview": "wrangler pages dev ./dist"
 ```
@@ -89,6 +101,7 @@ npx astro add cloudflare
 
 If you prefer to install the adapter manually instead, complete the following two steps:
 
+<Steps>
 1. Add the `@astrojs/cloudflare` adapter 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
@@ -106,6 +119,7 @@ If you prefer to install the adapter manually instead, complete the following tw
       adapter: cloudflare()
     });
     ```
+</Steps>
 
 <ReadMore>Read more about [SSR in Astro](/en/guides/server-side-rendering/).</ReadMore>