Building a Static Site Quickly
Validated on 31 May 2023 · Last edited on 10 Oct 2023
App Platform builds your code and runs it for you. A static site is the simplest thing it can host: rather than running a container, App Platform keeps a directory of built files and serves them from DigitalOcean’s CDN.
That makes it a good fit for anything that compiles down to HTML, CSS and JavaScript: a framework build, a documentation site, a single-page application, or plain hand-written files.
Deploy From a Git Repository
In the control panel, click Create and choose Apps.
- Choose a source. GitHub, GitLab or Bitbucket for source code, or a container registry if you already publish images. The first time you connect a Git provider you are asked to authorize DigitalOcean and choose which repositories it can see.
- Pick the repository and branch. Leave Autodeploy on and every push to that branch redeploys the site. Turn it off if you would rather deploy by hand.
- Let it detect the resource. App Platform inspects the repository, works out the language and runtime, and proposes a component type. For a site that compiles to files, set the component type to Static Site.
- Name and region. Name the app and choose where it is served from.
- Review and launch. Check the summary, then create the resources. The first build starts straight away.
When the build finishes the app gets a URL on ondigitalocean.app. You can add your own domain afterwards, and App Platform manages the certificate for it.
Configure the Build
Detection gets most projects right, but two settings are worth checking before the first deploy:
- Build command. Whatever produces your files, such as
npm run build. Leave it empty if the repository already contains the finished files. - Output directory. Where that command leaves them, such as
distorbuild. Getting this wrong is the most common reason a build succeeds and the site is empty.
Environment variables are set on the same screen. Anything secret should be marked as an encrypted variable rather than left in plain text, and build-time variables are distinct from run-time ones.
Deploy From an App Spec
Everything configured in that form is also expressible as an app spec, a YAML file describing the app. Keeping the spec in the repository means the deployment is reviewed like the rest of the code, and a new environment is one command rather than a walk back through the form.
doctl apps create --spec .do/app.yamlYou can export the spec of an app you built through the control panel, which is the quickest way to get a correct starting file:
doctl apps spec get your_app_id > .do/app.yamlFrom there, updating the app is a matter of editing the spec and applying it, or simply pushing to the deploy branch if you left autodeploy on.