---
title: Deploy AiPMChat with Netlify - Step-by-Step Guide
description: >-
  Learn how to deploy AiPMChat on Netlify with detailed instructions on forking
  the repository, preparing your OpenAI API Key, importing to Netlify workspace,
  configuring site name and environment variables, and monitoring deployment
  progress.
tags:
  - Deploy AiPMChat
  - Netlify Deployment
  - OpenAI API Key
  - Environment Variables
  - Custom Domain Setup
---

# Deploy AiPMChat with Netlify

If you want to deploy AiPMChat on Netlify, you can follow these steps:

## Deploy AiPMChat with Netlify

<Steps>
  ### Fork the AiPMChat Repository

Click the Fork button to fork the AiPMChat repository to your GitHub account.

### Prepare your OpenAI API Key

Go to [OpenAI API Key](https://platform.openai.com/account/api-keys) to obtain your OpenAI API Key.

### Import to Netlify Workspace

<Callout>
  After testing, it is currently not supported to have a one-click deployment button similar to
  Vercel/Zeabur. The reason is unknown. Therefore, manual import is required.
</Callout>

Click "Import from git"

<Image
  alt={'Click "Import from git" in the Netlify workspace'}
  height={362}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/31b999e5-2a74-45fc-935b-f036e72a684d'}
/>

Then click "Deploy with Github" and authorize Netlify to access your GitHub account.

<Image
  alt={'Authorize Netlify to access your GitHub account'}
  height={273}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/c9c58141-5ec6-43f1-8d97-0a84a04dcdba'}
/>

Next, select the AiPMChat project:

<Image
  alt={'Select the AiPMChat github project'}
  height={228}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/6c3968a8-fbbb-4268-a587-edaced2d96af'}
/>

### Configure Site Name and Environment Variables

In this step, you need to configure your site, including the site name, build command, and publish directory. Fill in your site name in the "Site Name" field. If there are no special requirements, you do not need to modify the remaining configurations as we have already set the default configurations.

<Image
  alt={'Configure AiPMChat site name'}
  height={712}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/f3885537-6d43-422f-b1b8-e70732401025'}
/>

Click the "Add environment variables" button to add site environment variables:

<Image
  alt={'Add AiPMChat site environment variables'}
  height={537}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/3b607482-4d99-455a-bc10-3090dd4fe3c5'}
/>

Taking OpenAI as an example, the environment variables you need to add are as follows:

| Environment Variable | Type | Description | Example |
| --- | --- | --- | --- |
| `OPENAI_API_KEY` | Required | This is the API key you applied for on the OpenAI account page | `sk-xxxxxx...xxxxxx` |
| `ACCESS_CODE` | Required | Add a password to access this service. You can set a long password to prevent brute force attacks. When this value is separated by commas, it becomes an array of passwords | `awCT74` or `e3@09!` or `code1,code2,code3` |
| `OPENAI_PROXY_URL` | Optional | If you manually configure the OpenAI interface proxy, you can use this configuration to override the default OpenAI API request base URL | `https://aihubmix.com/v1`, default value: `https://api.openai.com/v1` |

<Callout type={'tip'}>
  For a complete list of environment variables supported by AiPMChat, please refer to the [📘
  Environment Variables](/docs/self-hosting/environment-variables)
</Callout>

Afteradding the variables, finally click "Deploy lobe-chat" to enter the deployment phase

<Image
  alt={'Environment variables added'}
  height={600}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/c9f74ec4-ce63-4ce9-b9e2-34bda6fda10b'}
/>

### Wait for Deployment to Complete

After clicking deploy, you will enter the site details page, where you can click the "Deploying your site" in blue or the "Building" in yellow to view the deployment progress.

<Image
  alt={'Netlify site details page'}
  height={396}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/a7fd85d5-fd32-4756-814e-ff7ab7567fe1'}
/>

Upon entering the deployment details, you will see the following interface, indicating that your AiPMChat is currently being deployed. Simply wait for the deployment to complete.

<Image
  alt={'AiPMChat deployment in progress'}
  height={325}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/1ed8b13d-046e-47c8-bd61-116ffdf5d01b'}
/>

During the deployment and build process:

<Image
  alt={'Deployment in progress'}
  height={558}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/1c82d707-cb6f-4924-b246-a5235a919864'}
/>

### Deployment Successful, Start Using

If your Deploy Log in the interface looks like the following, it means your AiPMChat has been successfully deployed.

<Image
  alt={'Deployment Successful'}
  height={558}
  inStep
  src={'https://github.com/aipmhub/aipm-chat/assets/28616219/c1f945d1-f3e2-4100-b6bb-24d4cb13c438'}
/>

At this point, you can click on "Open production deploy" to access your AiPMChat site.

  <Image alt={'Access Your AiPMChat Site'} height={527} inStep src={'https://github.com/aipmhub/aipm-chat/assets/28616219/b04723eb-64ad-4028-a901-dc4e4ee2d0c1'} />
</Steps>

## Set up Custom Domain (Optional)

You can use the subdomain provided by Netlify, or choose to bind a custom domain. Currently, the domain provided by Netlify has not been contaminated, and can be accessed directly in most regions.