ttvfx/DEPLOY.md

Deploying twotalesvfx.com

The site is a fully static export, so there is no Node process to run in production.

1. Build

npm ci
npm run build        # outputs ./out

Or build on the server straight from git:

git clone https://git.twotalesvfx.com/pinto/ttvfx.git /opt/ttvfx
cd /opt/ttvfx && npm ci && npm run build

2. DNS (Cloudflare)

twotalesvfx.com is already on Cloudflare (proxied). Point the apex and www at the VPS and leave the existing review and git records alone:

Type	Name	Value	Proxy
A	@	<VPS IPv4>	Proxied
A	www	<VPS IPv4>	Proxied

At the time of writing the apex returned Cloudflare 522 (origin unreachable), so the current @ record needs updating.

SSL/TLS mode: Full (strict), using either certbot (below) or a Cloudflare Origin Certificate installed in nginx.

3. Upload

If building locally:

rsync -avz --delete out/ user@your-vps:/var/www/twotalesvfx.com/

If building on the server, copy or symlink /opt/ttvfx/out to /var/www/twotalesvfx.com.

4. nginx

/etc/nginx/sites-available/twotalesvfx.com:

server {
    listen 80;
    server_name twotalesvfx.com www.twotalesvfx.com;
    root /var/www/twotalesvfx.com;

    # www -> apex
    if ($host = www.twotalesvfx.com) { return 301 https://twotalesvfx.com$request_uri; }

    location / {
        try_files $uri $uri/ $uri.html =404;
    }

    # Hashed build assets can be cached forever
    location /_next/static/ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Video: allow range requests to be cached
    location ~* \.mp4$ {
        add_header Cache-Control "public, max-age=604800";
    }

    error_page 404 /404.html;

    gzip on;
    gzip_types text/css application/javascript image/svg+xml application/json;
}

sudo ln -s /etc/nginx/sites-available/twotalesvfx.com /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx
sudo certbot --nginx -d twotalesvfx.com -d www.twotalesvfx.com   # HTTPS via Let's Encrypt

(For Apache, set DocumentRoot to the same folder plus ErrorDocument 404 /404.html. Because the build uses trailingSlash, every page is a folder with its own index.html.)