Skip to content.
Joe Heaton's Webzone
🥐 ☕
Online since 2011

Migrate Static Site to Digital Ocean Web App Platform

Digital Ocean released a new App Platform for running serverless apps with support in their free-tier for static sites. There are two approaches to hosting a static site on the App Platform, either include the build process in the repo and allow App Platform to build your site, or use a branch/repo with only the HTML output.

I went with the HTML approach, this is because my static site currently uses Hugo with some external tools particular to my build process. I could’ve built inside a container but that was more effort than just pushing HTML.

The process is straight-forward, select the Git repo containing your app, this process integrates with Github meaning you can use private repos. Then you set your app’s region, which git branch contains the live version and whether you want the app to be redeployed on every push to the repo.

I updated my Makefile to automate publishing changes via git, this setup requires a git repo to be manually cloned to $(SITE).git/.

publish-git: hugo-prod git-provision git-diff user-confirm-git git-add clean-git

git-provision:
	# Sync static HTML to git repo
	rsync -havi --exclude '.git*' public/ $(SITE).git/

git-diff:
	cd $(SITE).git/  # Static HTML Git repo
	git status -sb   # List modified and unstaged files
	git --no-pager diff  # List modifications

# Confirm you're happy to proceed based on the above output
user-confirm-git:
	@printf "\nReview the above diff and these variables before confirming:\n SITE=$(SITE)\n URL=$(URL)\n THEME=$(THEME)\nAre you sure? [y/N] "
	read ans && [ $${ans:-N} = y ]

git-add:
	cd $(SITE).git/  # Static HTML Git repo
	git add -A .     # Stage all additions, modifications & deletions
	git status -sb   # List changes
	git commit -m "$$(date +%Y-%m-%dT%H:%M)"  # Commit changes, use date as commit message
	git push origin master  # Push changes

Settings!