Adding Static Files To Ghost

Recently I found myself wanting to add static files to this blog site so I could embed custom scripts into the site without having to place everything into the code injection settings.

Goal

The goal is to reduce the amount of code that sits in Ghots's code injection settings, making things simpler and cleaner to manage.

Before

<script>
... (lots of code)
</script>

After

<script src="/static/custom_script.js"></script>

Implementation

Unfortunately, as far as I'm aware, Ghost does not provide any way to simply add static files, So we will have to do it ourselves. Because I am running Ghost in a docker container modifying Ghost directly is out of the question, any changes I made would just be overridden when recreating the container.

So instead what we will do is add an Nginx HTTP server in front of Ghost that will serve static files at the path /static and will pass all other requests back to Ghost. The Nginx configuration that we will use is as

nginx.conf

user www-data;
worker_processes 1;

events {
    worker_connections 1024;
}

http  {

    default_type  application/octet-stream;
    include       /etc/nginx/mime.types;
    
    server {
        listen 2370 default_server;         # listen on port 2370
        client_max_body_size 0;             # Allows large file uploads

        location /static {                  # Static file path prefix
            root /;                         # Path to files
        }

        location / {
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Proto https;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $http_host;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";            
            proxy_set_header Origin http://$host;
            proxy_pass http://ghost:2368;    # hostname provided by Docker
        }
    }
}

Simply add the nginx.conf to the root of you docker-compose directory. Next we need to add the a Nginx service to the docker-compose file. First we need to add the service.

  nginx:
    image: nginx:latest
    restart: always
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf # Local nginx.conf file
      - ./static/:/static                  # Folder with static files
    ports:
      - 2370:2370                          # New server port
    networks:
      - proxy

networks:
  proxy:

The last thing we need to do is change the ports on the Ghost service. Because Nginx is now acting as the HTTP server we shoud change the Ghost's port to - 2368, from now on our Ghost server will be accessible on 127.0.0.1:2370.

Done

From now on our Ghost server will be accessible on 127.0.0.1:2370 and any files keeped in the folder /static within the root of our docker-compose directory will be accessible at the blog.domain.com/static.

Complete Docker File

docker-compose.yml (and commento)

version: '3'
services:
  ghost:
    image: ghost:latest
    restart: always
    ports:
      - 2368
    networks:
      - proxy
    volumes:
      - ./ghost/:/var/lib/ghost/content
    environment:
      # see https://ghost.org/docs/config/#configuration-options
      database__client: sqlite3
      database__connection__filename: "content/data/ghost.db"
      database__useNullAsDefault: "true"
      database__debug: "false"
      url: "https://blog.<DOMAIN>"
      
  nginx:
    image: nginx:latest
    restart: always
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./static/:/static
    ports:
      - 2370:2370
    networks:
      - proxy

  commento:
    image: caroga/commentoplusplus:latest
    restart: always
    ports:
      - 8080:8080
    environment:
      - COMMENTO_ORIGIN=https://commento.<DOMAIN>
      - COMMENTO_PORT=8080
      - COMMENTO_POSTGRES=postgres://postgres:postgres@db:5432/commento?sslmode=disable
      - COMMENTO_FORBID_NEW_OWNERS=true
      - COMMENTO_GOOGLE_KEY=<KEY>
      - COMMENTO_GOOGLE_SECRET=<KEY>
      - COMMENTO_GITHUB_KEY=<KEY>
      - COMMENTO_GITHUB_SECRET=<KEY>
    depends_on:
      - db
    networks:
      - db_network

  db:
    image: postgres:13.4
    restart: always
    environment:
      POSTGRES_DB: commento
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
    networks:
      - db_network
    volumes:
      - ./commentodb/:/var/lib/postgresql/data

networks:
  db_network:
  proxy:

Download Files