<!--
  canonical-url: https://www.avonture.be/blog/heimdall-dashboard
  published:     2025-02-01
  This is a static plain-Markdown mirror generated at build time.
  Visit the canonical URL above for the fully rendered page, with images and interactive components.
-->

# Heimdall - Web dashboard

> Tired of old browser bookmarks? Learn how to self-host and set up Heimdall, a beautiful web dashboard that gives you immediate, personalized access to all your favorite applications and links via Docker.

---
![Heimdall - Web dashboard](/img/v2/docker_playing_with_app.webp)

**TL;DR**

Tired of cluttered browser bookmarks? This article introduces Heimdall, a visually appealing, self-hostable web dashboard for organizing your favorite applications and links. Learn how to quickly deploy Heimdall using Docker with a simple `compose.yaml` file. The guide walks you through the initial setup, from customizing the appearance and creating organizational tags to adding your first applications. It also explains how to ensure your dashboard's configuration persists even if the container is removed.

> <https://heimdall.site/>

I've never been a big fan of browser's bookmarks and in fact I have almost none. And, quite logically, I almost never display the favorite bar.

I only visit a few sites on a regular basis and my browser history remembers them; otherwise a famous search engine remembers them for me.

However, I'm not averse to a personalized homepage and I'm quite happy with Heimdall at the moment.

Heimdall is a web application you can self-host (and it's a piece of cake using Docker) on your computer.

Here is the official demo:

![Heimdall - Web dashboard](./images/heimdall.gif)

You will define the look\&feel of your homepage by specifying which links you want to have immediate access to and, for others, you will classify them according to folders.  Nothing too complicated.

But it does give you a much nicer way of accessing your site than the outdated bookmarks management.  It's perhaps one of the things that hasn't changed in thirty years.

## Creating your dashboard

Please create a dummy folder and jump in it:

```bash
$ mkdir ~/tools/dashboard && cd $_
```

In that folder, please create a file called `compose.yaml` with the following content (refers to [official Docker Hub page](https://hub.docker.com/r/linuxserver/heimdall/) for the latest version):

**compose.yaml**

```yaml
# cspell:disable
name: tools

services:
  heimdall:
    image: lscr.io/linuxserver/heimdall:latest
    container_name: heimdall
    environment:
      - PUID=${USER_ID:-1000}
      - PGID=${GROUP_ID:-1000}
      - TZ=Europe/Brussels
    volumes:
      - ./config:/config
    ports:
      - 80:80
      - 443:443
    restart: unless-stopped
```

> **Note:**
>
> In the code here above, I've preferred the syntax `PUID=${USER_ID:-1000}` and `PGID=${GROUP_ID:-1000}` instead of just hardcoding `1000`: on my computer, my Linux user id is `1002`; not `1000` so I prefer to use a variable and, if the variable isn't defined, then use `1000` as default. Same for the group id.

## Running the dashboard

Once the `compose.yaml` file has been created, just run this command: `USER_ID=$(id -u) GROUP_ID=$(id -g) docker compose up --build --detach`.

This command will define our two `USER_ID` and `GROUP_ID` variables, initialise them to your own values then run the container.

> **Note:**
>
> If you've hardcoded IDs in the `compose.yaml` file to, f.i. `1000` (because you know it's your IDs); then the command becomes shorter: `docker compose up --build --detach`

## First run

Once you've fired the `docker compose up --build --detach` command, you've already created the container i.e. you can already surf to `http://localhost` to see it in action.

> Screenshot — http\://localhost
>
> The default welcome page

Let's play, click on the last button bottom right (the settings icon) and under `Appearance`, let's upload a new background image.

> Screenshot — http\://localhost
>
> My own background

It's a lot more fun, isn't it?

### Saving the configuration on disk

Did you notice that, in the `compose.yaml` file there is a section called `volumes` with the following configuration?

**compose.yaml**

```yaml
volumes:
  - ./config:/config
```

It means that the `config` folder of Heimdall will be stored on your disk; in a folder called `config` too. *That's the [volume mechanism](/blog/docker-volume) at work.*

I can check this by running `ls -alh` on my host:

```bash
Permissions Size User       Group      Date Modified    Name
drwxr-xr-x     - christophe christophe 2025-01-26 10:36 config
.rw-r--r--   284 christophe christophe 2025-01-26 10:36 compose.yaml
```

And, thus, everything I'll do in Heimdall will be saved on my computer. So, it means, if I've to stop and remove the Docker container, by running it again, I'll retrieve all my settings.

### Adding some links

I suggest that, before adding new links, you first click on the Tags icon (the fifth icon bottom right) because you'll organize your links using tags and you have to create tags first.

> Screenshot — http\://localhost
>
> Adding tags

Add as many tags as you want. For this tutorial, I'll just create one.

When finished, click on the `Cancel` button top right or click on the fourth button bottom right (called `Application list`)

Create a new application. You can choose between an `Application type` or a `Website`. In my current use, I always choose `Website`. I fill then the URL and click on `Go`.

Heimdall will extract the favicon in different sizes. I click on the one I wish.

> Screenshot — http\://localhost
>
> Adding Docker

Automatically, Heimdall has filled in some properties in the bottom part of the screen. I'll remove `Home dashboard` from the `Tags` area and, instead, type `Docker` i.e. the tag I've previously created.

> Screenshot — http\://localhost
>
> Adding Docker

Once saved, I'll get my new homepage:

> Screenshot — http\://localhost
>
> Homepage with Docker

We can see that tags are represented as a folder. If I click on it, I'll *enter* in the *folder* and see all applications having this tag.

I can, too, add applications that will appear immediately on the homepage (like shortcuts on your desktop). To do this, create a new application and keep `Home dashboard` in the list of tags.

Let's explore that `Application Type` feature:

> Screenshot — http\://localhost
>
> Application type

It's just something like a snippet. If I select `Bitwarden` from there, Heimdall will do basic initializations; it'll fill in the `Application name` textbox and the icon. Ok, why not.

I'll point the URL to `https://vault.bitwarden.com/#/login` and I'll keep `Home dashboard` as tag.

> Screenshot — http\://localhost
>
> With Bitwarden

Here is the dashboard I'm using at work. Since it's so easy to add new items; I'm doing changes to it as soon as I'm working on a new project.

> Screenshot — http\://localhost
>
> Final Heimdall dashboard

### More customizations

By clicking on the last icon bottom right, you can customize a few more things in Heimdall. You can display f.i. a search engine which is nice.

You can customize the CSS and add some JS too.

## Continue your journey

Visit the official site <https://heimdall.site/> to get updates and docs.

Two other self-hosted applications I keep running next to Heimdall: [Uptime Kuma](/blog/docker_uptime_kuma), to know when one of those links is down, and [Memos](/blog/docker-memos) for note-taking.

Get inspirations by searching **dashboard heimdall homepage** on [Google Search images](https://www.google.com/search?sca_esv=e645136bb336bc61\&q=dashboard+heimdall+homepage\&udm=2).
