How to Add a "Deploy to DigitalOcean" Button to Your Repository

The Deploy to DigitalOcean Button allows users to launch an application onto App Platform. It can be embedded in the README file for GitHub repositories, allowing users who are browsing your repository to deploy your code in one click, with a button that looks like this:

Deploy to DO

Overview

  1. Add a deploy.template.yaml file in the .do folder in the root directory of your repository.
  2. Add the Deploy to DigitalOcean button in the root README file in the repo.

Add the deploy.template.yaml File

The .do/deploy.template.yaml file contains all of the configuration details required to successfully launch your application on App Platform. The structure of this YAML file is documented in the App Spec Reference topic.

Here’s a sample deploy.template.yaml file for a Golang service with no database:

spec:
 name: sample-golang
 services:
 - name: web
   git:
     branch: main
     repo_clone_url: https://github.com/digitalocean/sample-golang.git

Here’s an example of a minimal deploy.template.yaml file for a Python-based service with a dev database:

spec:
  services:
    - name: sample-python
      git:
        branch: main
        repo_clone_url: https://github.com/digitalocean/sample-python.git
    databases:
    - name: example-db

And here’s an example of a minimal deploy.template.yaml for a static site:

spec:
 name: sample-html
 static_sites:
 - git:
     branch: main
     repo_clone_url: https://github.com/digitalocean/sample-html.git
   name: sample-html

Configure Environment Variables

If your app requires an environment variable to properly function, it must be listed in the deploy.template.yaml file with a placeholder value.

App Platform will then prompt users to enter values for these environment variables during app creation time.

For example, in the deploy.template.yaml file below:

  • DB_FOO_1 is a secret with a default value - DB-password-testvalue. App Platform allows the user to edit this environment variable at app creation time. This could be a database environment variable needing to be set for the app to properly deploy.
  • EMAIL will be available in plain text during run time. App Platform will prompt the user to provide a value for this environment variable at app creation time.
  • MESSAGE will be available in plain text during run and build time with a default value of This is a greeting message. App Platform will allow the user to edit this environment variable at app creation time.
  • DATABASE_URL is a bindable variable that points to the database connection string for example-db.
spec:
  name: sample-golang
  services:
  - name: web
   git:
     branch: main
     repo_clone_url: https://github.com/digitalocean/sample-golang.git
   envs:
   - key: DB_FOO_1
     value: "DB-password-testvalue"
     type: SECRET
   - key: EMAIL
     scope: RUN_TIME
   - key: MESSAGE
     value: "This is a greeting message"
   - key: DATABASE_URL
     scope: RUN_TIME
     value: ${example-db.DATABASE_URL}
  databases:
  - name: example-db

Add the Button

Add the following code to your GitHub repo or website to embed the button in your GitHub repo or website.

Markdown

To add the button to your GitHub repo's README file, update the URL with your repo's path information and then add the code to your repo's README file:

[![Deploy to DO](https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/{REPO-OWNER}/{REPO-NAME}/tree/{BRANCH-NAME})

HTML

To add the button to your website or blog, update the URL with your repo's path information and then embed the code on your website:

<a href="https://cloud.digitalocean.com/apps/new?repo=https://github.com/{repo-owner}/{repo-name}/tree/{branch-name}">
 <img src="https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue.svg" alt="Deploy to DO">
</a>
Note
The git URL in deploy.template.yaml must be the same as that is specified in this spec.

Update URL Path

You must then replace the following variables in this code with the following values for the button to work:

  • REPO-OWNER: The base of your Github URL. This is usually your user name or organization name.
  • REPO-NAME: The name given for this specific repo. This is the next path in the GitHub URL.
  • BRANCH-NAME: Common defaults are main and master but this could be any branch in your repo.

The following code embeds this image in the README or website, making it viewable by users browsing your repository on GitHub.com or your website. Your code edits make the image clickable so that users can deploy your app:

Deploy to DO

Customization

If you’d prefer a different color or style of button, you can swap out the image URL https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue.svg, with one of the following styles:

Blue Ghost

https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue-ghost.svg

Deploy to DO

White Ghost

https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-white-ghost.svg

Deploy to DO

White

https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-white.svg

(Shown here on a black background)

Deploy to DO

Verify the Button Works

Once you've added the button to your repo or website, click the Deploy to DigitalOcean button. If set up correctly, the button sends you to DigitalOcean's Control Panel and prompts you to log in. Log in to the control panel.

Once logged in, the control panel prompts you to enter any environmental variables your app may require. To update environmental variable values, click Edit and then enter values for any necessary environmental variables.

Once you have entered any necessary environmental variables, click Deploy. Your app should deploy within a few minutes.

If your app does not deploy, or the button does not correctly link to DigitalOcean's Control Panel, or the control panel doesn't display your environmental variables, check your configuration using the set up steps above.

Limits

Only the following combination of components are currently supported:

  • 1 Service
  • 1 Service + Dev Database
  • 1 Static site
  • 1 Static site + Dev Database