↓Skip to main content
  1. Posts/

Website Hosting on DigitalOcean's App Platform

·3 mins·
Web Dev Hosting
Mathew Schlemmer
Author
Mathew Schlemmer
Table of Contents
Web - This article is part of a series.
Part 1: Git Cheat Sheet
Part 2: This Article

Whether you’re looking to refresh an old website or launch something brand new, getting online quickly has never been easier. Thanks to modern static site generators and powerful cloud hosting platforms, you can stand up a sleek, responsive website in no time and at no cost.

This guide will show you how to build a site using the Hugo static site generator and deploy it effortlessly with DigitalOcean’s App Platform. Ready to get started? Let’s dive in!

Prerequisites
#

  • GitHub account
  • DigitalOcean account (use the link below for a $200 credit)
  • Hugo installed locally
  • Git installed locally
  • Your favorite text editor
  • A functional Hugo test site
  • A domain (optional)

DigitalOcean Referral Badge

Install Hugo and Git
#

  • Download and install the extended version of Hugo from its GitHub releases page. For platform specific information you can view Hugo’s installation documentation.
  • Verify Hugo version:
hugo version

hugo v0.147.0+extended+withdeploy linux/amd64 BuildDate=unknown

  • Download and install Git.

Create Your Site
#

  • Create a new Hugo site if you haven’t already:
hugo new site my-hugo-site
  • Add any theme you like. We’ll use the Paper theme for this example.
Warning! Some theme installation instructions may vary. 
cd my-hugo-site
git init
git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper
  • Rename hugo.toml to config.toml.
Warning! At the time of writing, DigitalOcean’s version of Hugo expects config.toml to be present.
  • Update your config.toml file to reflect the theme.
theme = "paper"
  • Add content using Hugo’s built in content generator:
hugo new content content/posts/my-first-post.md
  • Open content/posts/my-first-post.md using your favorite text editor and add some content.
+++
date = '2025-05-16T14:03:33-04:00'
draft = true
title = 'My First Post'
+++

## ^ This is front matter generated by Hugo

## v This is Markdown written by you

This is **bold** text, and this is *emphasized* text.

Visit the [Hugo](https://gohugo.io) website!

***

`Look Maw no hands!`
Markdown cheatsheet
  • Test your site locally:
hugo server -D

My New Hugo Site: http://localhost:1313/

Commit Your Changes to the Git Repository
#

  • Inside your site directory my-hugo-site, commit your changes:
git add .
git commit -m "Initial commit"
  • Create a new repository on GitHub via instructions found here.
  • Link your local repo and push:
git remote add origin https://github.com/yourusername/my-hugo-site.git
git branch -M main
git push -u origin main

Publishing with DigitalOcean’s App Platform
#

  • Log in to your DigitalOcean dashboard.
  • Navigate to the Apps section and click Create App.
  • Choose GitHub as your source and connect your account if prompted.
  • Select your repository and the branch: main
  • DigitalOcean will automatically detect your Hugo site and populate build commands.
Warning! config.toml must reside at the root of my-hugo-site.
  • Configure app details (name, region, etc.) and ensure Autodeploy code changes is enabled.

Example Name: turtle-app-24b68.ondigitalocean.app

  • Choose the Starter (free) plan for static sites.
  • Click Launch Starter App to deploy.

DigitalOcean will build your Hugo site and host it on a global CDN, providing you with a live URL and SSL certificate.

You can review DigitalOcean’s guide starting with step 4.

Verify Your Site’s Availability
#

  • Your site is now available via its application name.

Example URL: https://turtle-app-24b68.ondigitalocean.app/

Optional Domain Customization
#

Add a Custom Domain via Control Panel
#

Access App Settings
#

  • Log in to the DigitalOcean cloud dashboard.
  • Select your app turtle-app-24b68.ondigitalocean.app.
  • Go to the Settings tab.

Add Your Domain
#

  • Click the Edit link next to Domains.
  • Click Add Domain

Choose Domain Mapping Method
#

You have two main options:

  • DigitalOcean Name Servers:
    • Set your domain registrar’s name servers to:
      • ns1.digitalocean.com
      • ns2.digitalocean.com
      • ns3.digitalocean.com
    • This delegates DNS management to DigitalOcean.
  • CNAME Record:
    • Copy the provided turtle-app-24b68.ondigitalocean.app alias.
    • Add a CNAME record in your domain registrar’s DNS settings pointing your custom domain to this alias.

Verify Your Domain Configuration
#

  • Wait for DNS changes to propagate (can take a few minutes to several hours).
  • Once complete, your app will be accessible at your custom domain.

Sources
#

Web - This article is part of a series.
Part 1: Git Cheat Sheet
Part 2: This Article