How to Deploy a Static Site on DigitalOcean

This guide walks you through deploying a static React site + React-Tooltip library, using DigitalOcean's App Platform. Follow these steps to get your site live quickly and easy!

import {Tooltip} from 'react-tooltip';

<a id="my-anchor-element">◕‿‿◕</a>

<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />

1. Uploading the project to GitHub

Your project needs to be hosted on GitHub for easy integration with DigitalOcean. Here's how to do it:

1. Create a new repository on GitHub and copy the repository URL.
2. In your terminal, add the GitHub repository as a remote in your project folder:

   git remote add origin https://github.com/your-username/your-repo.git

3. Commit any pending changes and push your code to the main branch:

   git add .
   git commit -m "Initial commit"
   git push -u origin main

2. Setting up DigitalOcean App Platform

DigitalOcean App Platform makes it easy to deploy static sites. Follow these steps:

1. Log in to your DigitalOcean account or sign up for a new account.
2. On the dashboard, click Create and select Apps.
3. Connect your GitHub account to DigitalOcean by following the on-screen instructions.
4. Select your repository and branch. Usually, the main branch is used for production.
5. Specify the build output directory as build/, which is the default output folder for React projects.
6. Choose your deployment plan. You can have up to 3 static sites on free tier.
7. Click Create Resources and wait for the process to complete.

After the deployment finishes, DigitalOcean will provide a URL for your live site. Visit this URL and enjoy your live site!

Support

If you run into any issues, refer to:

• The DigitalOcean Documentation
• The React-Tooltip Documentation