Create A Private Static Site With OAuth For Free With Render

This blueprint helps you deploy a private Quarto site behind OAuth, for free, on Render. This can be any static site and is not specific to Quarto.

Instructions and background are here.

Usage

1. Follow these instructions to set things up.
2. Update/author your content.
3. Add/delete emails from email_list.txt based on who is allowed to view your site. The email(s) must correspond to a person's primary email on Github (users will sign in on GitHub to identify themselves).
4. Run quarto render to update your site, and check-in all your content to GitHub.

Your site will automatically render.

How does this work?

There are two components that do most of the work here:

1. The render.yaml Blueprint

The render.yaml file drives all the settings and saves you from having to click around in the Render UI. Here is an explanation of this file:

services:
  - type: web   # Tells Render you wish to use their "Web Service" product
    name: oauth2-proxy-render   # Names your project so you can find it on your dashboard
    plan: free    # Tells render you want to use the free plan
    env: docker   # Tells render you wish to build and run a Docker container
    envVars:  # These set enviornment variables that are passed to the Docker container
      - key: OAUTH2_PROXY_CLIENT_ID      
        sync: false            # `sync: false` means to prompt the user for the value in the Render UI when first setting this up
      - key: OAUTH2_PROXY_CLIENT_SECRET
        sync: false            # `sync: false` means to prompt the user for the value in the Render UI when first setting this up
      - key: OAUTH2_PROXY_COOKIE_SECRET
        generateValue: true    # Generates a random string for you
      - key: OAUTH2_PROXY_HTTP_ADDRESS
        value: ":10000" # Render will automatically detect this port and send traffic to it.

This file is called a Blueprint, which has many more options you can read about here. Render automatically detects the port listening for http traffic and routes traffic to it accordingly. Render handles the incoming https traffic upstream with its own load balancers, as described here.

2. The Dockerfile

The Dockerfile copies the files for the static site, located in _site/, as well as the email whitelist email_list.txt.

The commands for this Dockerfile are explained in this tutorial. One key difference is that we are passing environment variables instead of flags for certain options. These environment variables are set in render.yaml, as discussed above.

FROM quay.io/oauth2-proxy/oauth2-proxy

COPY email_list.txt /site_config/
COPY _site /app/

ENTRYPOINT ["/bin/oauth2-proxy", \
            "--provider", "google", \
            "--upstream", "file:///app/#/", \
            "--authenticated-emails-file", "/site_config/email_list.txt", \
            "--cookie-expire=0h0m30s", \
            "--session-cookie-minimal=true", \
            "--skip-provider-button=true"]

You don't have to deploy things this way. Instead, you can mount a disk to this Docker container and transfer files to your site. This is more efficient since only your static files will normally change, not the software running the proxy. However, I want to keep things as simple as possible for this tutorial, so I'll leave that as an exercise to the reader (you may also have to pay a minimal amount for a disk). If you do this, you will also want to turn Auto Sync off.

Further Reading

See The tutorial.