Hosting Astro.js or Any Static Site with Dokku

Dokku is an application that manages your vps. It handles all painful tasks of configuring webservers, installing ssl, managing databases, hosting multiple websites, Custom lambda functions etc.
A short guide on how to host a static website using dokku.

Prerequisites

• You need to be comfortable with the shell, git, ssh
• Have a server/Vps and can ssh into it
• Have some files/site to host on the internet
• Configured your domain to point to your server

General Overview

We’ll install dokku on the server. Configure it. The ssh, the new project, ssl certs etc. Then we configure git so that we can push our files to the server Then we’ll configure dokku, so it knows how to configure the server for our app. Finally there are some troubleshooting tips.

Installation

Ssh to server. Install dokku

# install docker
wget -nv -O - https://get.docker.com/ | sh

# install dokku
wget -qO- https://packagecloud.io/dokku/dokku/gpgkey | sudo tee /etc/apt/trusted.gpg.d/dokku.asc
# programmatically determine distro and codename
DISTRO="$(awk -F= '$1=="ID" { print tolower($2) ;}' /etc/os-release)"
OS_ID="$(awk -F= '$1=="VERSION_CODENAME" { print tolower($2) ;}' /etc/os-release)"
echo "deb https://packagecloud.io/dokku/dokku/${DISTRO}/ ${OS_ID} main" | sudo tee /etc/apt/sources.list.d/dokku.list
sudo apt-get update -y
sudo apt-get  -y install dokku
sudo dokku plugin:install
sudo dokku plugin:install-dependencies --core

ssh

On the server, we need to add ssh key to dokku. You may need to modify the command if you have multiple keys the file

! Don’t change the admin or dokku username below !!!

cat ~/.ssh/authorized_keys | dokku ssh-keys:add admin 
dokku ssh-keys:list

project management

Each website on the server will have its own project.

dokku apps:create PROJECT_NAME
dokku domains:add PROJECT_NAME gyaaniguy.top
# dokku apps:destroy   PROJECT_NAME

ssl

Change your email below.

dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git
dokku letsencrypt:set --global email YOUR_EMAIL@gmail.com
dokku letsencrypt:enable gyaaniguy
dokku letsencrypt:cron-job --add

Pushing

I have configured my ~/.ssh/config . Your setup may vary.

Host gyaaniguy.top
User dokku
IdentityFile /home/aa/.ssh/my-ssh-key

Configure git to add a remote location. Set the PROJECT_NAME as created above. The project name can be set to a url to deploy to a particular url.

git remote add remoteserver dokku@gyaaniguy.top:PROJECT_NAME  #PROJECT_NAME -> deploys to specified domain OR subdomain of site if not set in dokku settings
git remote add remoteserver dokku@gyaaniguy.top:gyaaniguy.top  #  deploys to url
git push remoteserver main    

Static site deployment

How to tell dokku to configure the server to host a static site.

Deploy a simple html site

If you have a simple folder with html files. No static site generator.

• cd to dir having html files
• create new file .static
• make sure an index.html file is present. (If not check docs)
• push

Done !

Deploy a static site generator powered site.

If you are using an app like jekyll or astrojs. We need to do more.

Following has been tested with AstroJS

Steps:

1. create .static file at root of your site.
2. Specify buildpacks in the .buildpacks file
3. Set server root dir

—

1. touch .static #

2. Create a .buildpacks file on local

This file instructs dokku on how to ‘use’ our src. How to build the site, how to configure nginx etc

https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/dokku/heroku-buildpack-nginx

!! Order is Important !!

First line: Instructs to install node.js > run astro build command (from package.json) . This creates the output html files in dist dir Second: Configure nginx to treat this site as static.

2. Set server root dir

Astro puts the generated html files in the dist dir. It will be the root on the server dokku config:set gyaaniguy NGINX_ROOT=dist

Maintainance

To reclaim disk space, run these on your server

 dokku repo:gc PROJECT_NAME
 git -C /home/dokku/PROJECT_NAME repack -a -d -f --window=0
 dokku repo:purge-cache #This makes next deployment slower

Troubleshooting

Observe working/logs

dokku logs gyaaniguy -t
dokku apps:list
dokku logs:failed --all

docker ps # get containerID
docker logs containerID
docker exec -it containerID bash -> ls /app/www/dist (should be present)

Make sure app is detected as .static during build

If can’t build site on remote using npm.

Or if your app isn’t detected as node.

• Make sure the .buildpack order is correct
• Or build locally. Remove the https://github.com/heroku/heroku-buildpack-nodejs from .buildpack. push dist directory

npm run build
git add 'dist' && git commit -m 'add dist'
# git push

Also note app.json file. Not relevant for astro. But could be useful

https://dokku.com/docs/advanced-usage/deployment-tasks

{
  "scripts": {
    "dokku": {
      "predeploy": "cd /app && npm run build"
    }
  }
}


## shortcut

```bash
 APP_NAME="gyaaniguy" ;  DOMAIN="gyaaniguy.top" ;
 # Create the app
dokku apps:create "$APP_NAME"
# Set the domain
dokku domains:set "$APP_NAME" "$DOMAIN"
# Enable Let's Encrypt for SSL
dokku letsencrypt:enable "$APP_NAME"
dokku letsencrypt:cron-job --add

---