Deploying a Static Site on Hop3¶

This guide walks you through deploying a plain static site — just HTML, CSS, and JavaScript files — on Hop3. There is no build step and no application server: Hop3's static deployer configures nginx to serve your files directly. It's the simplest possible deployment.

New to static sites on Hop3? Read the Static Sites overview for the two deployment strategies (build at the source vs. build on the server). Using a generator? Its build output is also just static files, so it deploys the same way — see Hugo, Eleventy, Astro, or Jekyll.

Prerequisites¶

Before you begin, ensure you have:

A Hop3 server - Follow the Installation Guide
The Hop3 CLI - Installed on your local machine

No language runtime is required — that's the whole point of a static site.

Step 1: Create the Site¶

Create a project directory with a public/ folder to hold the files nginx will serve:

mkdir hop3-tuto-static && cd hop3-tuto-static && mkdir public

Add a home page:

cat > public/index.html <<'HTML'
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hop3 Static Site</title>
  </head>
  <body>
    <h1>Hello from Hop3</h1>
    <p>This page is served as a plain static site — no build, no app server.</p>
  </body>
</html>
HTML

Step 2: Configure Hop3¶

Tell Hop3 to serve the public/ directory as static. The recommended way is a short hop3.toml — no Procfile required. The static worker makes Hop3 skip the language toolchains and application servers entirely and serve the directory directly through nginx:

cat > hop3.toml <<'TOML'
[metadata]
id = "hop3-tuto-static"

[run.workers]
static = "public"
TOML

Confirm the configuration:

cat hop3.toml

static = "public"

Prefer a Procfile? echo "static: public" > Procfile works too. Hop3 accepts either, but hop3.toml wins if both declare a static directory — it's Hop3's own config file, whereas a Procfile is a generic, cross-tool convention that may belong to something else.

Deploy to Hop3¶

The following steps require a Hop3 server.

Initialize (First Time Only)¶

hop3 init --ssh root@your-server.example.com

Deploy¶

Deploy the site (the first deployment creates the app):

hop3 deploy hop3-tuto-static

deployed successfully

Set Hostname¶

Configure the hostname for the nginx proxy:

hop3 config set --app hop3-tuto-static HOST_NAME=hop3-tuto-static.$HOP3_TEST_DOMAIN

Wait for Process Stop¶

Wait for the previous deployment to fully stop:

sleep 5

Apply Configuration¶

Redeploy to apply the hostname configuration:

hop3 deploy hop3-tuto-static

deployed successfully

Verify Deployment¶

hop3 app status --app hop3-tuto-static

hop3-tuto-static

curl -s http://hop3-tuto-static.$HOP3_TEST_DOMAIN/

Hello from Hop3

How It Works¶

No build, no runtime. Hop3 sees the static directive (in hop3.toml or a Procfile) and uses its static deployer instead of a language toolchain or application server.
nginx serves your files. The named directory (public/) is served directly; requests never reach an app process.
Anything static works. Drop in CSS, JavaScript, images, or the build output of any static-site generator.

Useful Commands¶

hop3 app logs --app hop3-tuto-static        # View logs
hop3 app restart --app hop3-tuto-static     # Restart the app
hop3 config show --app hop3-tuto-static # Show configuration
hop3 app destroy --app hop3-tuto-static -y  # Remove the app

Next Steps¶

Put a static-site generator in front of the same workflow: Hugo, Eleventy, Astro, Jekyll.
Add a custom domain and TLS — see the deployment guides.