Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Steps component to vercel.mdx #8116

Merged
merged 1 commit into from
May 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions src/content/docs/en/guides/deploy/vercel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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
Expand All @@ -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
Expand All @@ -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

Expand Down
Loading