As i get more self-hosted sites running on my home lab, or in a VPS somewhere, I find myself having to refer more an mroe often to notes about what I named the site (either in NGinX Proxy Manager), or looking in Portainer or the CLI to recall which ports I forwarded for a specific site or web application.

I've been seeing a lot of folks posting about their various shortcut dashboards all over the web, and figured it was high time for me to try one as well.  Think of these dashboards as the one address you may need / want to remember, and the rest are linked from there.

Can I solve this with bookmarks in my browser?  Sure, and you can even setup browser syncing on most browsers these days, but what if you are logging into someone else's computer, or using a public system, where you dont' really want to link that browser to your account?

This is where Dashboards come in very handy.

Installing Homer

This install, like many others is very straightforward.  Homer doesn't require a lot of pre-install setup.  I do however like to create folders / directories for each Docker app I run.

We will be running Homer in Docker, and while my tutorial covers using it from the CLI (terminal), you can absolutely setup it via Portainer if you prefer.  I have run it both ways, and it worked the same in both instances.

First, let's create a folder in our home directory called Homer.

mkdir homer

Now let's run Homer using that as our volume mapping.

docker run -d -p 8095:8080 -v /home/brian/homer/Config/Homer/assets:/www/assets --name="homer" --restart=always b4bz/homer:latest

In the command above I map port 8095 on my host machine to the container port 8080.  8080 is a very common port for web applications, so not using it on the host side is just smarter IMO.  feel free to map 8080 on your host if you aren't already using it for another site.

Next we map a volume on our host /home/brian/homer/Config/Homer/assets to the container volume /www/assets.  Again, feel free to change the path on the left side of the colon, but make sure to leave the right side (container path) alone.

We name our container "homer" and tell it to restart always in case of crahses or system reboots, then give it the image path and version to pull from dockerhub.

Now press Enter / Return, and let it run.

Done!  You've got Homer running on your machine.  You can now visit your host machine IP address at the host (left) port you specified.  In my case I go to http://192.168.7.125:8095.

We can see the demo / sample Homer dash already setup to show us what's possible.

Now we need to get into the configuration and start making some changes.

Edit the Config

Navigate to /home/<your user>/homer/Config/Homer/assetts, and open the config.yml file to edit your Homer dash content.

sudo nano /home/<your user>/homer/Config/Homer/assets/config.yml

Inside the config you'll find a lot of text, and it's all about how you can configure your Homer dash.

I go into more detail in the video, but you essentially want to setup your Title and Subtitle, update the message block to suit your needs, or remove it completely.

Then you'll want to use the sample "Services" blocks to setup your pages.  Give each Category a name and optional icon.  Under that define an "items" section, and within that setup shortcuts for that category.

Give each shortcut a name, logo / icon, url, short description, and tag, and you're ready to go.

Here's a short sample of what the services section should look like.

services:
  - name: "Data Analysis"  # category
    icon: "fas fa-cloud"
    items:
      - name: "Matomo"   # shortcut section
        logo: "assets/icons/matomo.png"
        subtitle: "Open Source Web Traffic Analytics"
        tag: "app"
        url: "https://<your url here>"
        target: "_blank" # optional html a tag target attribute
      - name: "Metabase"
        logo: "assets/icons/metabase.png"
        subtitle: "Open Source Data Analytics"
        tag: "app"
        url: "http://192.168.1.15:3000"
        target: "_blank"
  - name: "Remote Management"   # category
    items:
      - name: "Portainer"  # shortcut section
        logo: "assets/icons/portainer.png"
        subtitle: "Open Source Docker UI"
        tag: "local app"
        url: "http://192.168.1.15:9000"
        target: "_blank"
Note that Yaml syntax is space sensitive. So make sure to follow the spacing precisely.

As you go along. save using CTRL + O, then Enter, and refresh the web page to see how it's going.

If you get an error page, look at the line it addresses, then in the config.yml file look above and below that line for mistakes in spacing (at the beginning of the line), missing quotation marks, or colons, etc.   Yaml sytax is quite particular about what's there.

Now, just setup your dash anyway you like.  In the video, I show how you can find all the logos for your various sites and services as well.