feat(video):Track Changes Online with ChangeDetection, a Self-Hosted …

…Docker Container

_posts/2024-06-21-change-detection-docker.md

@@ -28,6 +28,8 @@ Tracking things on the web just got a whole lot easier with ChangeDetection, the
 
 See [this post](/posts/docker-compose-install/) on how to install `docker` and `docker compose`
 
+## Prepare Our Server
+
 Create folder for your compose and mounts
 
 ```bash
@@ -61,6 +63,10 @@ Your folder structure should look like this
 └── docker-compose.yml
 ```
 
+## Tasks from Our Compose File
+
+### Docker Compose Contents
+
 Simple version of `change detection`
 
 ```yaml
@@ -70,6 +76,8 @@ services:
     image: ghcr.io/dgtlmoon/changedetection.io:latest
     container_name: changedetection
     hostname: changedetection
+    environment:
+      # - BASE_URL=https://mysite.com # configure this for your own domain
     volumes:
       - ./data/datastore:/datastore
     ports:
@@ -80,6 +88,8 @@ Advanced version of `change detection`
 
 If you want to use Selenium + Webdriver, uncomment the `WEBDRIVER_URL` variable and the `browser-chrome` service, and then comment out `PLAYWRIGHT_DRIVER_URL` variable and `playwright-chrome` service.
 
+To see all supported configurations, see the [Docker compose file on github](https://github.com/dgtlmoon/changedetection.io/blob/master/docker-compose.yml)
+
 ```yaml
 ---
 services:
@@ -94,6 +104,8 @@ services:
     environment:
       # - WEBDRIVER_URL=http://playwright-chrome:4444/wd/hub
       - PLAYWRIGHT_DRIVER_URL=ws://playwright-chrome:3000
+      # - BASE_URL=https://mysite.com # configure this for your own domain
+
     depends_on:
       playwright-chrome:
         condition: service_started
@@ -126,9 +138,18 @@ services:
       - DEFAULT_STEALTH=true
       # Ignore HTTPS errors, like for self-signed certs
       - DEFAULT_IGNORE_HTTPS_ERRORS=true
-
 ```
 
+## Chrome Extension
+
+If you want to install the Chrome Extenions, you can but adding it here
+
+- <https://chromewebstore.google.com/detail/changedetectionio-website/kefcfmgmlhmankjmnbijimhofdjekbop?hl=en>
+
+Then all you need to do to configure it is visit your ChangeDetection site and click Settings and it will automatically configure it for you!
+
+Then when visiting a site, all you need to do it click the extension and click add!
+
 ## Join the conversation
 
 <blockquote class="twitter-tweet" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">This week I spun up ChangeDetection, a free and open source (and self-hosted) container to help you track things on the web! <br>Check it out!<a href="https://t.co/Kmi5i94GcJ">https://t.co/Kmi5i94GcJ</a> <a href="https://t.co/s1uteYMHtH">pic.twitter.com/s1uteYMHtH</a></p>&mdash; Techno Tim (@TechnoTimLive) <a href="https://twitter.com/TechnoTimLive/status/1804175575117865385?ref_src=twsrc%5Etfw">June 21, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>