Would you like to deploy a Static Website to the Cloud with the DigitalOcean App Platform? Here’s how we do it.

At Bobcares, we often receive requests regarding DigitalOcean as part of our DigitalOcean Managed Services.

Today, let’s see the process of deploying a static website.

How to Deploy a Static Website to the Cloud with DigitalOcean App Platform

Here is the procedure our Support Engineers follow to deploy the Static website.

Before getting started make sure that you have website files for a static website and it is working locally, an email address to register a Github account, a credit card or Paypal account for signing up with DigitalOcean’s cloud service ( You won’t be charged for the first three websites).

1. Creating a GitHub Account to deploy a static website

Register for a Github account if you don’t have one so that you will be able to create a Github repository. In order to create a free account, sign up on GitHub’s homepage.

2. Download and install the GitHub Desktop App

Most of the developers use the CLI (Command Line Interface) tool Git to interact with Github. But if you are not familiar with using your computer’s terminal then you can also use the GitHub Desktop app. Today, we shall discuss the instructions for using the GitHub Desktop app.

First, download the GitHub Desktop app by following the instructions on the GitHub Desktop homepage. The link for it is: https://desktop.github.com/

Then open the application file that you have downloaded and complete the installation process as per the instruction.

3. Create a GitHub Repository for your Website Project

Now we shall create a local repository on the machine for the website project using the GitHub Desktop app.

For that, first, open the GitHub Desktop app. Then click on the “Sign in to GitHub.com” blue button.

Now follow the prompts to connect to the GitHub Desktop app with your GitHub account. A window should appear with options for getting started, once the Desktop app is connected with your account. Click on the “Create a New Repository on Your Hard Drive” button (third large button from the top).

Then a prompt appears where you would need to fill in the details of your new repository.

In these windows, here are the below details that you would need to enter.

• Repository name. Here, let us call it “my-static-site.”
• A description of your repository for reference.
• Leave the automatically-generated Local Path as it is. This is the path where GitHub Desktop will store your project on your local machine.

In case, if you wish to add a file store your site’s documentation, you can check the option ‘Initialize this repository with a README’.

The ‘Git Ignore’ option will allow you to select a template for ignoring certain files.

The “License” option will allow you to choose an open-source license for your work. However, if you don’t know what to select here then you can keep it ‘none’.

After entering the details, click “Create Repository”. Now, the Desktop app will show the details of the newly-created repository.

4. Copy Website Files to GitHub Repository

Now, we shall copy the website files and place them in the newly-created GitHub repository folder.

First, on your desktop, open the folder where the website project’s files and folders are present. Here, we are considering “html-site”.

Next, find and open the newly created repository folder that you named in Step 3. Here, we have set the repository folder as “my-static-site”.

Now copy the files from your working folder to your repository folder. After pasting the files into your repository folder, the GitHub Desktop app should display the files in the “Changes” panel on the left side of the app window.

Once the folders are in the local repository folder, you are ready to save your changes to the repository. On GitHub, saved changes are called commits. Every time you commit changes, you must make a comment that will describe your changes.

To commit your changes, add a comment in the field that says “Summary (required)” and any additional info you would like to include in the field “Description” in the bottom left corner of the Desktop app.

Then click on the “Commit to master” button that is present below the text fields which will save the changes to the “main” branch of the project.

After committing the changes to the main branch, your files in the left-hand panel will disappear as this panel only displays files that contain uncommitted changes.

5. Pushing Committed Files to GitHub

In the previous step, you have committed the changes to the repository on the local machine. However, this repository is not yet pushed to your Github account. Now we shall push this commit to your repository on GitHub, which will add your website files to your GitHub repository.

So in order to push the local repository to your GitHub repository, click on the blue “Publish repository” button. After clicking, a modal will appear asking few details. Fill them out with the name and description of your repository.

After filling in your details, click the “Publish repository” button. Once the uploading process completes, your repository should be available on your account on GitHub. Finally, you can check it by visiting the relevant URL, which will have the following format:

https://github.com/your_github_account_name/your_repository_name

6. Create Your DigitalOcean Account

In order to create a DigitalOcean account, visit the sign-up page of DigitalOcean and choose among the following options:

• Entering an email address and password
• Using Google Single Sign On
• Using GitHub Single Sign On

If you choose the first option, you will need to verify your email address using the email automatically sent to you.

Note: You will need to enter a payment method to verify your identity and keep spammers out. However, you will not be charged. You may see a temporary pre-authorization charge to verify the card, which will be reversed within a week.

After verifying the account, you should be able to access the App Platform.

7. Deploy Your Static Website with DigitalOcean App Platform

First, access the DigitalOcean App Platform portal and click on the “Launch Your App” button.

Next, a prompt appears to select your GitHub repository. Since you have still not connected the App Platform account to your GitHub account, you’ll need to click on the “Link Your GitHub Account” button.

Then a prompt appears where you need to sign in to your GitHub account. Select the account that you want to connect to the App Platform. On the next page, you will have the option to select the repositories to permit the App Platform to access. Click the “Only select repositories” button and select the repository that you pushed to your GitHub account in Step 5 then click on Save.

Now you will be directed back to App Platform, where you can select your repository in the dropdown menu.

Click “Next”, after selecting the repository. Then a prompt appears to choose the name, branch, and options for Autodeploy. If the Autodeploy box is checked, any future changes you make to your repository files will be immediately pushed to your live site. Then click “Next”.

Then the App configuration page appears. This page should automatically detect your component type as a “Static Site”.

Now you need not make any changes on this page. Scroll down to click the “Next” button. A window appears where you can select the “Starter” plan if you’d like to deploy this site as one of your free three static sites.

Now select the desired plan and click the “Launch Your Starter App” button. You will be directed to your app’s admin page. When your app is finished deploying, you will see the “Deployed Successfully!” message.

Also, you can click on the link under your app’s name at the top of the page to make sure your site is working properly.

Finally, now your website should be published to the web through the App Platform.

[Need more assistance with DigitalOcean related queries?- We are here to help you.]

Conclusion

In today’s writeup, we saw how our Support Engineers deploy a static website.