How to Install Materialious on Your Synology NAS

How to Install Materialious on Your Synology NAS

Materialious is a modern material UI design for Invidious. Materialious has multiple built-in features, including built-in Sponsorblock, built-in Return YouTube dislikes, video progress tracking & resuming. There are no ADS, no tracking. With Materialious you can choose between Light/Dark themes and custom color themes. Materialious integrates with Invidious subscriptions, watch history & more. It provides live stream support, Dash support, Chapters, Audio-only mode, Playlists and PWA support. In this step by step guide I will show you how to install Materialious on your Synology NAS using Docker and Portainer.

  • STEP 1

Please Support My work by Making a Donation.

  • STEP 2

Install Portainer using my step by step guide. If you already have Portainer installed on your Synology NAS, skip this STEP. Attention: Make sure you have installed the latest Portainer version.

  • STEP 3

Make sure you have a synology.me Wildcard Certificate. Follow my guide to get a Wildcard Certificate. If you already have a synology.me Wildcard certificate, skip this STEP.

  • STEP 4

Go to Control Panel / Network / Connectivity tab/ Check Enable HTTP/2 then click Apply. Follow the instructions in the image below.

Materialious-Invidious Synology NAS Set up 1

  • STEP 5

Go to Control Panel / Security / Advanced tab/ Check Enable HTTP Compression then click Apply. Follow the instructions in the image below.

Materialious-Invidious Synology NAS Set up 2

  • STEP 6

Go to Control Panel / Login Portal / Advanced Tab / click Reverse Proxy. Follow the instructions in the image below.

Materialious-Invidious Synology NAS Set up 3

  • STEP 7

Now click the “Create” button. Follow the instructions in the image below.

Materialious-Invidious Synology NAS Set up 4

  • STEP 8

After you click the Create button, the window below will open. Follow the instructions in the image below.

On the General area, set the Reverse Proxy Name description: type in Invidious. After that, add the following instructions:

Source:
Protocol: HTTPS
Hostname: invidious.yourname.synology.me
Port: 443

Check Enable HSTS

Destination:
Protocol: HTTP
Hostname: localhost
Port: 7601

Materialious-Invidious Synology NAS Set up 5

  • STEP 9

On the Reverse Proxy Rules click the Custom Header tab. Click Create and then, from the drop-down menu, click WebSocket. After you click on WebSocket, two Header Names and two Values will be automatically added. Click Save. Follow the instructions in the image below.

Synology Proxy WebSocket

  • STEP 10

Go to Control Panel / Login Portal / Advanced Tab / click Reverse Proxy. Follow the instructions in the image below.

Materialious-Invidious Synology NAS Set up 6

  • STEP 11

Now click the “Create” button. Follow the instructions in the image below.

Materialious-Invidious Synology NAS Set up 7

  • STEP 12

After you click the Create button, the window below will open. Follow the instructions in the image below.

On the General area, set the Reverse Proxy Name description: type in Invidious UI. After that, add the following instructions:

Source:
Protocol: HTTPS
Hostname: invidiousui.yourname.synology.me
Port: 443

Check Enable HSTS

Destination:
Protocol: HTTP
Hostname: localhost
Port: 3241

Materialious-Invidious Synology NAS Set up 8

  • STEP 13

On the Reverse Proxy Rules click the Custom Header tab. Click Create and then, from the drop-down menu, click WebSocket. After you click on WebSocket, two Header Names and two Values will be automatically added. Click Save. Follow the instructions in the image below.

Synology Proxy WebSocket

  • STEP 14

Go to File Station and open the docker folder. Inside the docker folder, create one new folder and name it invidiousdb. Follow the instructions in the image below.
Note: Be careful to enter only lowercase, not uppercase letters.

Materialious-Invidious Synology NAS Set up 8B

  • STEP 15

Log into Portainer using your username and password. On the left sidebar in Portainer, click on Stacks then + Add stack. Follow the instructions in the image below.

1 Synology Portainer Add Stack

  • STEP 16

In the Name field type in invidious. Follow the instructions in the image below.

Note: Copy Paste the code below in the Portainer Stacks Web editor.

version: "3.9"
services:
  invidious-db:
    image: postgres:16
    container_name: Invidious-DB
    hostname: invidious-db
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: ["CMD", "pg_isready", "-q", "-d", "invidious", "-U", "kemal"]
      timeout: 45s
      interval: 10s
      retries: 10
    volumes:
      - /volume1/docker/invidiousdb:/var/lib/postgresql/data:rw
    environment:
      POSTGRES_DB: invidious
      POSTGRES_USER: kemal
      POSTGRES_PASSWORD: kemalpw
    restart: on-failure:5

  invidious:
    image: quay.io/invidious/invidious:latest
    container_name: Invidious
    hostname: invidious
    user: 1026:100
    security_opt:
      - no-new-privileges:true
    ports:
      - 7601:3000
    environment:
      INVIDIOUS_CONFIG: |
        db:
          dbname: invidious
          user: kemal
          password: kemalpw
          host: invidious-db
          port: 5432
        check_tables: true
        captcha_enabled: false
        default_user_preferences:
          locale: ro
          region: RO
        external_port: 443
        domain: invidious.yourname.synology.me
        hmac_key: e8b09fcc0882e8b646beab0135027f748c39f27acb142b339a9b199acd3b0a2b
        https_only: true
    restart: on-failure:5
    depends_on:
      invidious-db:
        condition: service_started
        
  materialious:
    image: wardpearce/materialious
    container_name: Invidious-Materialious-UI
    restart: on-failure:5
    ports:
      - 3241:80
    environment:
      VITE_DEFAULT_INVIDIOUS_INSTANCE: https://invidious.yourname.synology.me
      VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE: https://www.returnyoutubedislike.com/
      VITE_DEFAULT_FRONTEND_URL: https://invidious.yourname.synology.me
      VITE_DEFAULT_SPONSERBLOCK_INSTANCE: https://sponsor.ajay.app

Note: Before you paste the code above in the Web editor area below, change the value numbers for user with your own UID and GID values. (Follow my step by step guide on how to do this.) 1026 is my personal UID value and 100 is my personal GID value. You have to type in your own values.
Note: Before you paste the code above in the Web editor area below, change the value for locale and region. ro and RO are abbreviations for Romania. You should use your own locale and region abbreviations. For example, for the United States you should use locale: us region: US.
Note: Before you paste the code above in the Web editor area below, change the value for domain. Type in your own synology.me DDNS that you have previously created at STEP 6.
Note: Before you paste the code above in the Web editor area below, change the value for VITE_DEFAULT_INVIDIOUS_INSTANCE. Type in your own synology.me DDNS that you have previously created at STEP 6 with https at the beginning.
Note: Before you paste the code above in the Web editor area below, change the value for VITE_DEFAULT_FRONTEND_URL. Type in your own synology.me DDNS that you have previously created at STEP 6 with https at the beginning.

Materialious-Invidious Synology NAS Set up 9

  • STEP 17

Scroll down on the page until you see a button named Deploy the stack. Click on it. Follow the instructions in the image below. The installation process can take up to a few minutes. It will depend on your Internet speed connection.

Materialious-Invidious Synology NAS Set up 10

  • STEP 18

If everything goes right, you will see the following message at the top right of your screen: “Success Stack successfully deployed“.

Materialious-Invidious Synology NAS Set up 11

  • STEP 19

Go back to STEP 1 or you will deal with karma 🙂.

  • STEP 20

Now open your browser and type in your HTTPS/SSL certificate like this https://invidiousui.yourname.synology.me In my case it’s https://invidiousui.mariushosting.synology.me If everything goes right, you will see the Materialious-Invidious main page. Search for something. Follow the instructions in the image below.

Materialious-Invidious Synology NAS Set up 12

  • STEP 21

At the top right of the page, click the Settings icon to access the Materialious settings. Follow the instructions in the image below.

Materialious-Invidious Synology NAS Set up 13

Enjoy Materialious!

🆘TROUBLESHOOTING

If you encounter issues by using this container, make sure to check out the Common Docker issues article.

Note: Can I run Docker on my Synology NAS? See the supported models.
Note: How to Back Up Docker Containers on your Synology NAS.
Note: Find out how to update the Materialious container with the latest image.
Note: How to Free Disk Space on Your NAS if You Run Docker.
Note: How to Schedule Start & Stop For Docker Containers.
Note: How to Activate Email Notifications.
Note: How to Add Access Control Profile on Your NAS.
Note: How to Change Docker Containers Restart Policy.
Note: How to Use Docker Containers With VPN.
Note: Convert Docker Run Into Docker Compose.
Note: How to Clean Docker.
Note: How to Clean Docker Automatically.
Note: Best Practices When Using Docker and DDNS.
Note: Some Docker Containers Need WebSocket.
Note: Find out the Best NAS Models For Docker.
Note: Activate Gmail SMTP For Docker Containers.

This post was updated on Wednesday / April 3rd, 2024 at 5:20 AM