Add Steps component to aws.mdx (#8095)

Co-authored-by: Houston (Bot) <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: HiDeoo <[email protected]>
withastro · May 2, 2024 · 0905f0f · 0905f0f
1 parent 4772729
commit 0905f0f
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/content/docs/en/guides/deploy/aws.mdx b/src/content/docs/en/guides/deploy/aws.mdx
@@ -4,7 +4,8 @@ description: How to deploy your Astro site to the web using AWS.
 type: deploy
 i18nReady: true
 ---
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 [AWS](https://aws.amazon.com/) is a full-featured web app hosting platform that can be used to deploy an Astro site.
 
@@ -14,8 +15,11 @@ Deploying your project to AWS requires using the [AWS console](https://aws.amazo
 
 AWS Amplify is a set of purpose-built tools and features that lets frontend web and mobile developers quickly and easily build full-stack applications on AWS. 
 
+<Steps>
 1. Create a new Amplify Hosting project.
+
 2. Connect your repository to Amplify.
+
 3. Modify your build settings to match your project's build process.
 
     <PackageManagerTabs>
@@ -82,13 +86,15 @@ AWS Amplify is a set of purpose-built tools and features that lets frontend web
     ```
     </Fragment>
     </PackageManagerTabs>
+</Steps>
 
 Amplify will automatically deploy your website and update it when you push a commit to your repository.
 
 ## S3 static website hosting
 
 S3 is the starting point of any application. It is where your project files and other assets are stored. S3 charges for file storage and number of requests. You can find more information about S3 in the [AWS documentation](https://aws.amazon.com/s3/).
 
+<Steps>
 1. Create an S3 bucket with your project's name.
 
     :::tip
@@ -129,6 +135,7 @@ S3 is the starting point of any application. It is where your project files and
     :::note
     If you are deploying a single-page application (SPA), set your error document to `index.html`.
     :::
+</Steps>
 
 ## S3 with CloudFront
 
@@ -148,6 +155,7 @@ When connecting CloudFront to an S3 static website endpoint, you rely on S3 buck
 
 There are many ways to set up continuous deployment for AWS. One possibility for code hosted on GitHub is to use [GitHub Actions](https://github.com/features/actions) to deploy your website every time you push a commit.
 
+<Steps>
 1. Create a new policy in your AWS account using [IAM](https://aws.amazon.com/iam/) with the following permissions. This policy will allow you to upload built files to your S3 bucket and invalidate the CloudFront distribution files when you push a commit.
 
     ```json
@@ -214,6 +222,7 @@ There are many ways to set up continuous deployment for AWS. One possibility for
     :::note
     Your `BUCKET_ID` is the name of your S3 bucket. Your `DISTRIBUTION_ID` is your CloudFront distribution ID. You can find your CloudFront distribution  ID in **CloudFront > Distributions > ID**
     :::
+</Steps>
 
 ## Community Resources