# Netlify

[Netlify](https://www.netlify.com/), a popular choice for deploying modern websites and apps, offers features like continuous deployment from Git across a global application delivery network, serverless form handling, and more. It provides an ideal environment for deploying your Webstudio Projects.

**Netlify supports deploying both dynamic apps and static sites.**

{% hint style="info" %}
See [export types](/university/self-hosting.md#export-types) for more information about JavaScript applications vs. static sites.
{% endhint %}

## JavaScript application

Learn how to deploy your dynamic JavaScript application to Netlify.

{% embed url="<https://www.youtube.com/watch?v=Gr1jPtsg6_Q>" %}

### Prerequisites

* Install the [Webstudio CLI](/university/self-hosting/cli.md)

Use the [Netlify CLI](https://docs.netlify.com/cli/get-started/) to deploy your app directly to [Netlify](https://netlify.com/):

```bash
netlify deploy
```

You can configure the project to support Netlify serverless/edge-functions respectively, as deployment target at the time of initially setting up your project. Please check the [initiating-a-webstudio-project](https://github.com/webstudio-is/webstudio/tree/main/packages/cli#initiating-a-webstudio-project) section.

You can manually change it using the `build` command. For serverless functions:

```bash
webstudio build --template netlify
```

### Complete CLI Workflow

Here's the full step-by-step process for deploying to Netlify:

```bash
# 1. Create a Webstudio project folder
npx webstudio

# Follow prompts: enter folder name, paste your Share Link

# 2. Navigate to your project
cd your-project-folder

# 3. Install dependencies
npm install

# 4. Login to Netlify
npx netlify-cli login

# 5. Create a new Netlify site
npx netlify-cli sites:create

# 6. Build your project
npm run build

# 7. Deploy to preview URL (for testing)
npx netlify-cli deploy

# 8. Deploy to production (when ready)
npx netlify-cli deploy --prod
```

### Redeploying Changes

When you make changes in Webstudio:

1. Publish changes in Webstudio
2. In your project folder, run:

   ```bash
   npx webstudio sync
   npm run build
   npx netlify-cli deploy --prod
   ```

## Static site

Learn how to upload your static site to Netlify.

<figure><img src="/files/rB0E9dNVxANZx5vNnGCF" alt="netlify new site dashboard"><figcaption></figcaption></figure>

### Prerequisites

* Export your project using one of the [export methods](/university/self-hosting.md#exporting).

**How to upload your project to Netlify:**

* Go to Sites
* Add a new site

  * **Manually** – upload the export zip from Webstudio

  ![Drag and drop upload static site to netlify](/files/whfz4A5FLoVywkbxcePP)

  * **Git** – Unzip the export and add it to a repository such as GitHub
* Click “Open production deploy”

## Related

* [CLI](/university/self-hosting/cli.md) – Export and build your project using the command line
* [Vercel](/university/self-hosting/vercel.md) – Another popular platform for deploying JavaScript apps
* [Cloudflare Pages](/university/self-hosting/cloudflare-pages.md) – Deploy static sites to Cloudflare's network
* [Publishing and custom domains](/university/foundations/publishing-and-custom-domains.md) – Set up custom domains for your site


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/university/self-hosting/netlify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.