LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • Prerequisites
  • 1. Create a GitHub repository
  • 2. Export Webstudio Project
  • 3. Push to GitHub
  • 4. Setup Digital Ocean Droplet
  • 5. Configure Coolify to use your Droplet
  • 6. Setup a Project on Coolify
  • 7. Sync, Build, and push new changes

Was this helpful?

Edit on GitHub
  1. university
  2. Self-Hosting

Digital Ocean with Coolify (Docker)

How to deploy your Website Project to Digital Ocean using Coolify.

PreviousAWS with Flightcontrol (Docker)NextHetzner with Coolify (Docker)

Last updated 2 months ago

Was this helpful?

In this tutorial, you will learn how to export your Webstudio Project and use to deploy it to .

Coolify is a PaaS that makes it easy to deploy and manage applications on your own server, giving you control over your infrastructure without the complexity. You can self-host Coolify or use their Cloud.

Prerequisites

1. Create a GitHub repository

Create a repository where you will add the Webstudio Project code in the following steps.

Be sure to clone the repository to your local machine.

2. Export Webstudio Project

Use the CLI to export your Project and select the "Docker" option.

3. Push to GitHub

Now that the site code is local, push it to GitHub.

You do not need to install dependencies.

4. Setup Digital Ocean Droplet

  1. Log in to your Digital Ocean account and click on "Create" > "Droplets".

  2. Select your preferred region.

    1. Note: In following steps, the automatic Docker install failed on Ubuntu versions higher than 22 during our setup. If yours fails, you can manually install Docker on the Droplet or use a different Ubuntu version and rerun the process.

  3. Choose a plan with sufficient RAM (minimum 1GB but we recommend more for optimal performance).

  4. Choose an authentication method (SSH keys are recommended for security).

  5. Click "Create Droplet". Wait for your Droplet to be provisioned. Once completed, you’ll be provided an IP address; copy it.

5. Configure Coolify to use your Droplet

  1. Create a Coolify account or log in to your existing account.

  2. Navigate to the "Servers" section in the Coolify dashboard.

  3. Add a new server and provide your Droplet's IP address then click “Continue”.

  4. Click “Validate Server & Install Docker Engine“ and Coolify will install all necessary components on your server automatically. Once completed, you should see a green “Proxy Running” status.

6. Setup a Project on Coolify

  1. Go to Projects and create a new one.

  2. Add a Resource to the project.

  3. Select the source of your code, likely a private repository.

  4. Add a GitHub app and provide it access to your repository with the site.

  5. Change the Build Pack to "Dockerfile".

  6. Click Deploy and wait several minutes while it deploys. You can click “Show debug logs” to see more info.

  7. If all goes well, you should see “Deployment is Finished.”

    1. If the deployment fails, one possibility is that the server does not have enough resources.

  8. (Optional) If you are loading images from third-party domains, add them to your environment variables with the key DOMAINS and a comma-separated list of the third-party domains.

  9. At the top, there is a "links" button which will take you to the live site.

7. Sync, Build, and push new changes

When you are ready to publish your latest changes again, follow these steps:

  1. Click “Publish” in the builder (even though you aren’t publishing to the cloud, it’s necessary to generate the latest build data).

  2. Run webstudio sync

  3. Run webstudio build --template docker

  4. Push the changes to GitHub


Now, you should have a website built on Webstudio that is hosted on Digital Ocean using Coolify, giving you full control over your infrastructure.

Select the Ubuntu image with .

📤
▶️
GitHub account
Digital Ocean account
Webstudio CLI
version that is supported by Docker
Coolify
Digital Ocean
webstudio sync command