X
Popular Searches

How to Deploy a Static Site For Free Using DigitalOcean’s App Platform

DigitalOcean logo

App Platform is a new Platform-as-a-Service (PaaS) offering from DigitalOcean. It lets you push code to production without configuring any infrastructure. App Platform connects to GitHub and GitLab repositories to automatically build and deploy your projects.

DigitalOcean launched App Platform in October 2020, saying it wanted to “reimagine” the PaaS concept. App Platform is a fully-managed solution that supports most popular languages, provides an automatic HTTPS certificate and offers horizontal and vertical scaling.

Creating Your Site

In this guide, we’ll show you how you can use the free Starter plan to build and deploy a static website without worrying about infrastructure. You can launch up to three sites for free. Additional sites can be purchased either by upgrading to a higher tier or by paying a flat $3/mo per site.

The first step is simple: you need to create your static site! App Platform supports most popular static generators such as Gatsby, Hugo and Jekyll. You can also use plain HTML and CSS, without a build process at all.

We’re using a barebones Jekyll site for this tutorial. If you just want to follow along, you can fork one of DigitalOcean’s sample applications. Once you’ve created your site, make sure to push your code to a Git repository in your GitHub or GitLab account.

Connecting DigitalOcean to Your Repository

Once you’re ready to deploy, login to your DigitalOcean account. Click the “Apps” link in the left sidebar. Next, click the blue “Launch Your App” button.

Advertisement

You now need to connect App Platform to your GitHub or GitLab account. Click the button which applies to you. Follow the prompts to authenticate yourself and allow DigitalOcean to access your repositories. You’ll then get redirected back to DigitalOcean.

You should now see that your account has been connected. Select the repository you want to deploy from the dropdown menu. If your repository isn’t showing up, make sure its permission settings allow DigitalOcean to access it. Follow the help link at the bottom of the screen if you need to check.

Configuring Your App

On the next screen, begin by giving your app a name. This is displayed within the DigitalOcean UI. It’s usually a good idea to match the name of your Git repository.

Use the dropdown menu to choose which DigitalOcean datacentre region to deploy to. At the time of writing, only the New York, Amsterdam and Frankfurt regions supported App Platform. You should usually choose the datacentre that’s geographically closest to your users.

You now need to select the branch to deploy from. The default of master should be correct for most projects. You could change this to easily deploy a pre-release version of your project, such as a staging or test branch.

Advertisement

The final option, “Autodeploy code changes,” controls whether DigitalOcean should automatically update your app. When this is enabled, App Platform will monitor your Git repository. It will start a new deployment automatically when fresh code is merged into your selected branch. You’ll need to manually initiate each new deployment if you don’t enable this setting.

When you click “Next”, DigitalOcean will scan your repository to work out how it’s built. In our case, App Platform has detected that we’re deploying a Jekyll site. The build command has been populated automatically.

You can edit the build command if you need to customise how your site is built. You can also set environment variables that will be made available to the build process.

Deploy Your App

Click the Next button to finalise your app’s deployment. You’ll need to confirm the App Platform tier you want to deploy to. Make sure the free Starter plan is selected (or switch to a paid plan if you’d prefer) and review the Monthly App Cost which is displayed. Finally, click the blue “Launch Starter App” button to begin your deployment.

Deployment may take several minutes to complete. App Platform needs to build your site, running the Jekyll compiler in our case, before pushing it onto DigitalOcean’s infrastructure. Progress will be displayed within the project’s dashboard.

Eventually, you’ll see a green “Deployed successfully” message. Your app’s now deployed to the DigitalOcean cloud! Click the “Live App” link to view your deployment. You’ll have been assigned a random ondigitalocean.app subdomain. In our case, we can now see the default Jekyll homepage.

Managing Your App

Now your app is live, you can use the dashboard to monitor and manage it. The “Overview” tab lets you check the latest deployment time and see at-a-glance health stats.

Advertisement

To get more detailed information, click the “Insights” tab. This displays metrics graphs that log the CDN throughput of your app. Use the “Deployments” tab to view the deployment history. This will show a single “initial deployment” event to begin with. It will be populated with new logs as you make additional deployments.

You can now try updating your app. Change a file in your repository, create a Git commit and push it to the branch you’re deploying from. If you enabled auto-deployments, DigitalOcean will detect the push event and automatically redeploy. Within a few minutes, your change will be live!

Adding a Domain

App Platform has built-in custom domain support. The “ondigitalocean.app” environment you’re handed by default is unlikely to be much use beyond initial experimentation.

Click the “Settings” tab in your app’s dashboard. Next, click the “Edit” link next to the Domains heading. Press the “Add Domain” button and type the domain you want to use.

On the next screen, follow the guidance to link your domain to your App Platform deployment. If you use DigitalOcean’s nameservers, the relevant DNS records will be added automatically. Otherwise, you’ll have to manually copy the displayed DNS records into your registrar’s DNS settings interface.

Advertisement

Click “Add Domain” to attach the domain to your app. You’ll be able to use it to access your deployment as soon as the DNS resolution is setup correctly. DigitalOcean will automatically obtain an SSL certificate for your site.

Conclusion

DigitalOcean’s App Platform is a new contender in the PaaS space. It allows you to deploy apps from a Git repository without having to think about infrastructure. You connect your account, select your repository and follow the prompts to get your code live on the internet.

We’ve only looked at the most basic deployment, a static site with no external dependencies. App Platform can also be used to host backend services and databases with similar ease of use. Each app can incorporate multiple components, such as a PHP API, a static frontend, and a database. Using the dashboard, you can view the logs from your services and obtain interactive console access to your running components.

Behind the scenes, your code is automatically containerised using Docker. It’s then deployed to DigitalOcean-managed Kubernetes clusters. Using App Platform allows you to focus on your code and keep building features, without having to worry about infrastructure and deployments.

James Walker James Walker
James Walker is a contributor to CloudSavvy IT. He is the founder of Heron Web, a UK-based digital agency providing bespoke software development services to SMEs. He has experience managing complete end-to-end web development workflows, using technologies including Linux, GitLab, Docker, and Kubernetes. Read Full Bio »

The above article may contain affiliate links, which help support CloudSavvy IT.