Post

Meet Homepage - Your HomeLab Services Dashboard

Meet Homepage, your new HomeLab services dashboard homepage! Homepage is an open source, highly customizable homepage (or startpage) dashboard that runs on Docker and is integrated with over 100 API services. It’s easy to set up, looks good by default, and helps you keep track of everything you are running in your HomeLab and more. Today we’ll set up Homepage and get it running in Docker in no time.

📺 Watch Video

Disclosures:

  • Nothing in this video was sponsored

Don’t forget to ⭐ homepage on GitHub!

Requirements

  • docker (and compose)

Docker Setup

See this post on how to install docker and docker compose

Install

Make a directory

1
mkdir homepage

cd into it

1
cd homepage

create a docker-compose.yaml file

1
touch docker-compose.yaml

Edit it

1
nano docker-compose.yaml

Place the contents

1
2
3
4
5
6
7
8
9
10
11
12
13
14
version: "3.3"
services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    ports:
      - 3000:3000
    env_file: .env # use .env
    volumes:
      - /path/to/config:/app/config # Make sure your local config directory exists
      - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations, see alternative methods
    environment:
      PUID: $PUID # read them from .env
      PGID: $PGID # read them from .env

Create an .env file for variables

1
touch .env

Edit it

1
nano .env

add to file:

1
2
PUID=1000
PGID=1000

Save and exit

Start the container

1
docker compose up -d

Note: The container can take up to 60 seconds to start the first time. It’s a good idea to check the container to see if it is passing health checks before browsing to your site.

Check to be sure you see that the container is healthy.

You can check by running:

1
docker ps

You should see something like:

1
2
CONTAINER ID   IMAGE                                 COMMAND                  CREATED         STATUS                    PORTS                                       NAMES
8d841cf77e6f   ghcr.io/gethomepage/homepage:latest   "docker-entrypoint.s…"   2 minutes ago   Up 2 minutes (healthy)    0.0.0.0:3000->3000/tcp, :::3000->3000/tcp   homepage

Once it’s healthy, visit http://<IP-ADDRESS-DOCKER-MACHINE>:3000

You should see your new homepage!

Configure

On docker machine, cd into config directory

1
cd config

You’ll see yaml files, these are configurations we can edit to configure our homepage

edit settings.yaml

1
nano config/settings.yaml
1
2
3
4
5
6
7
8
9
10
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/settings

title: My Awesome Homepage # <----- add this line

providers:
  openweathermap: openweathermapapikey
  weatherapi: weatherapiapikey

Save, exit, and revisit your homepage

Should refresh, if not click the refresh in lower right hand corner

Title of document should now be

My Awesome Homepage

If we want, we can also customize the background but updating this file too

Edit settings.yaml

1
nano settings.yaml
1
2
3
4
5
6
7
8
9
10
11
12
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/settings

title: My Awesome Homepage 

background: https://images.unsplash.com/photo-1502790671504-542ad42d5189?auto=format&fit=crop&w=2560&q=80 # <----- add this line

providers:
  openweathermap: openweathermapapikey
  weatherapi: weatherapiapikey

Save and exit again, and the background should be updated.

You can also mount your own image rather than reference one on the web however I am going to stick with one from the web that I don’t have to worry about additional mounts and configuration in the future.

If we want to add some additional filters to the image using tailwind css, we can like so

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/settings

title: My Awesome Homepage 

background:
  image: https://images.unsplash.com/photo-1502790671504-542ad42d5189?auto=format&fit=crop&w=2560&q=80
  blur: sm # sm, "", md, xl... see https://tailwindcss.com/docs/backdrop-blur
  saturate: 50 # 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate
  brightness: 50 # 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness
  opacity: 50 # 0-100

# ^^^^  add the above block
  providers:
    openweathermap: openweathermapapikey
    weatherapi: weatherapiapikey

If we want to set out homepage to dark mode and the color to slate, we can like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/settings

title: My Awesome Homepage 
theme: dark # <----- add this line
color: slate # <----- add this line
background:
  image: https://images.unsplash.com/photo-1502790671504-542ad42d5189?auto=format&fit=crop&w=2560&q=80
  blur: sm # sm, "", md, xl... see https://tailwindcss.com/docs/backdrop-blur
  saturate: 50 # 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate
  brightness: 50 # 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness
  opacity: 50 # 0-100

# ^^^^  add the above block
  providers:
    openweathermap: openweathermapapikey
    weatherapi: weatherapiapikey

Why do this? Isn’t this a lot of work?
1 word, it’s “repeatable”. We can back up our yaml files and even share them if we want. Also works great with Kubernetes since you can pass a ConfigMap file to your deployment thus not needing a volume.

Services

Services are configured in service.yaml and really are button for accessing some of your services

Edit service.yaml

1
nano config/service.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/services

- My First Group:
    - My First Service:
        href: http://localhost/
        description: Homepage is awesome

- My Second Group:
    - My Second Service:
        href: http://localhost/
        description: Homepage is the best

- My Third Group:
    - My Third Service:
        href: http://localhost/
        description: Homepage is 😎
- Top Services:
    - Proxmox:
        icon: proxmox.png # icons found here https://github.com/walkxcode/dashboard-icons
        href: https://192.168.0.15:8006
        description: Proxmox VE
    - PiHole:
        icon: pi-hole.svg # icons found here https://github.com/walkxcode/dashboard-icons
        href: http://192.168.60.10/admin
        description: Server 1
    - Cowboy:
        icon: mdi-account-cowboy-hat-#FF0000 # icons found here https://pictogrammers.com/library/mdi/
        href: https://localhost/
        description: giddyup service
    - McDonald’s:
        icon: si-mcdonalds-#FFD700 # icons found here https://simpleicons.org/
        href: https://www.mcdonalds.com/
        description: homepage
    # ^^^ add this block

As you can see we configured 4 services:

Note: If you’re using Material Design Icons or Simple Icons you can change the color of the icon by appending the hex values to the icon name as shown above.

Service Widgets

These extend the functionality of service buttons. Optional but cool.

Edit service.yaml

1
nano config/service.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/services

- My First Group:
    - My First Service:
        href: http://localhost/
        description: Homepage is awesome

- My Second Group:
    - My Second Service:
        href: http://localhost/
        description: Homepage is the best

- My Third Group:
    - My Third Service:
        href: http://localhost/
        description: Homepage is 😎
- Top Services:
    - Proxmox:
        icon: proxmox.png # icons found here https://github.com/walkxcode/dashboard-icons
        href: https://192.168.0.15:8006
        description: Proxmox VE
    - PiHole:
        icon: pi-hole.svg # icons found here https://github.com/walkxcode/dashboard-icons
        href: http://192.168.60.10/admin
        description: Server 1
        widget:
          type: pihole
          url: http://192.168.60.10
          key: "{{HOMEPAGE_VAR_PIHOLE_API_KEY}}" # <--- updated with API key from PiHole
    - Cowboy:
        icon: mdi-account-cowboy-hat-#FF0000 # icons found here https://pictogrammers.com/library/mdi/
        href: https://localhost/
        description: giddyup service
    - McDonald’s:
        icon: si-mcdonalds-#FFD700 # icons found here https://simpleicons.org/
        href: https://www.mcdonalds.com/
        description: homepage

Stop the Docker container

docker stop homepage

Start the Docker container

docker start homepage

Note: I have noticed that sometimes you need to recreate the container in order for the variables from your .env to be replaced. Not sure if this is a feature or a bug, but docker compose up -d --force-recreate will stop the old container, remove it, and create a new one

We should now see pi hole statistics

Widgets

Widgets are standalone items like the resource and search at the top.

If you want to edit these items:

1
nano config/widgets.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/service-widgets

- resources:
    cpu: true
    memory: true
    disk: /

- search:
    provider: google # <--- updated with google
    target: _blank

- datetime:
    text_size: xl
    format:
      timeStyle: short
   # ^^^ add this block

Now we can see that search has been changed to Google and we’ve added a date widget.

My Dashboard

My Homepage Dashboard Here’s a fully working example of my own Homepage dashboard that I use!

As promised, here is both the config for Docker and even Kubernetes!

Docker Config

docker-compose.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
version: "3.3"
services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    restart: unless-stopped
    ports:
      - 3000:3000
    env_file: .env
    volumes:
      - ./config:/app/config # Make sure your local config directory exists
      - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations, see alternative methods
    environment:
      PUID: $PUID
      PGID: $PGID

config/bookmarks.yaml

1
---

config/services.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/services
# icons found here https://github.com/walkxcode/dashboard-icons

- Hypervisor:
    - Proxmox:
        icon: proxmox.svg
        href: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
        description: pve1
        widget:
            type: proxmox
            url: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
            username:  "{{HOMEPAGE_VAR_PROXMOX_USER}}"
            password:  "{{HOMEPAGE_VAR_PROXMOX_API_KEY}}"
            node: xing-01
    - Proxmox:
        icon: proxmox.svg
        href: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
        description: pve2
        widget:
            type: proxmox
            url: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
            username:  "{{HOMEPAGE_VAR_PROXMOX_USER}}"
            password:  "{{HOMEPAGE_VAR_PROXMOX_API_KEY}}"
            node: xing-02
    - Proxmox:
        icon: proxmox.svg
        href: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
        description: pve2
        widget:
            type: proxmox
            url: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
            username:  "{{HOMEPAGE_VAR_PROXMOX_USER}}"
            password:  "{{HOMEPAGE_VAR_PROXMOX_API_KEY}}"
            node: xing-03
    - Proxmox:
        icon: proxmox.svg
        href: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
        description: pve4
        widget:
            type: proxmox
            url: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
            username:  "{{HOMEPAGE_VAR_PROXMOX_USER}}"
            password:  "{{HOMEPAGE_VAR_PROXMOX_API_KEY}}"
            node: storinator
- Containers:
    - Rancher:
        icon: rancher.svg
        href: "{{HOMEPAGE_VAR_RACNHER_URL}}"
        description: k8s
    - Longhorn:
        icon: longhorn.svg
        href: "{{HOMEPAGE_VAR_LONGHORN_URL}}"
        description: k8s storage
    - Portainer:
        icon: portainer.svg
        href: "{{HOMEPAGE_VAR_PORTAINER_URL}}"
        description: docker
        widget:
            type: portainer
            url: "{{HOMEPAGE_VAR_PORTAINER_URL}}"
            env: 2
            key: "{{HOMEPAGE_VAR_PORTAINER_API_KEY}}"
- DNS:
    - Pi-Hole1:
        icon: pi-hole.svg
        href: "{{HOMEPAGE_VAR_PIHOLE_URL_1}}"
        description: quasar
        widget:
            type: pihole
            url: "{{HOMEPAGE_VAR_PIHOLE_URL_1}}"
            key: "{{HOMEPAGE_VAR_PIHOLE_API_KEY_1}}"
    - Pi-Hole2:
        icon: pi-hole.svg
        href: "{{HOMEPAGE_VAR_PIHOLE_URL_2}}"
        description: blazar
        widget:
            type: pihole
            url: "{{HOMEPAGE_VAR_PIHOLE_URL_2}}"
            key: "{{HOMEPAGE_VAR_PIHOLE_API_KEY_2}}"
    - Pi-Hole3:
        icon: pi-hole.svg
        href: "{{HOMEPAGE_VAR_PIHOLE_URL_3}}"
        description: electron
        widget:
            type: pihole
            url: "{{HOMEPAGE_VAR_PIHOLE_URL_3}}"
            key: "{{HOMEPAGE_VAR_PIHOLE_API_KEY_3}}"
- Network:
    - UniFi:
        icon: unifi.svg
        href: "{{HOMEPAGE_VAR_UNIFI_NETWORK_URL}}"
        description: network
        widget:
            type: unifi
            url: "{{HOMEPAGE_VAR_UNIFI_NETWORK_URL}}"
            username:  "{{HOMEPAGE_VAR_UNIFI_NETWORK_USERNAME}}"
            password:  "{{HOMEPAGE_VAR_UNIFI_NETWORK_PASSWORD}}"
    - Uptime Kuma:
        icon: uptime-kuma.svg
        href: "{{HOMEPAGE_VAR_UPTIME_KUMA_URL}}"
        description: internal
        widget:
            type: uptimekuma
            url: "{{HOMEPAGE_VAR_UPTIME_KUMA_URL}}"
            slug: home
    - Uptime Robot:
        icon: https://play-lh.googleusercontent.com/cUrv0t00FYQ1GKLuOTvv8qjo1lSDjqZC16IOp3Fb6ijew6Br5m4o16HhDp0GBu_Bw8Y=w240-h480-rw
        href: https://uptimerobot.com/dashboard
        description: external
        widget:
            type: uptimerobot
            url: https://api.uptimerobot.com
            key: "{{HOMEPAGE_VAR_UPTIME_ROBOT_API_KEY}}"
- Storage:
    - TrueNAS:
        icon: truenas.svg
        href: "{{HOMEPAGE_VAR_TRUENAS_URL}}"
        description: scale
        widget:
            type: truenas
            url: "{{HOMEPAGE_VAR_TRUENAS_URL}}"
            key: "{{HOMEPAGE_VAR_TRUENAS_API_KEY}}"
    - MinIO:
        icon: minio.svg
        href: "{{HOMEPAGE_VAR_MINIO_URL}}"
        description: object storage
- Media:
    - Plex:
        icon: plex.svg
        href: "{{HOMEPAGE_VAR_PLEX_URL}}"
        description: media server
        widget:
            type: plex
            url: "{{HOMEPAGE_VAR_PLEX_URL}}"
            key: "{{HOMEPAGE_VAR_PLEX_API_TOKEN}}"
    - Tautulli:
        icon: tautulli.svg
        href: "{{HOMEPAGE_VAR_TAUTULLI_URL}}"
        description: plex stats
        widget:
            type: tautulli
            url: "{{HOMEPAGE_VAR_TAUTULLI_URL}}"
            key: "{{HOMEPAGE_VAR_TAUTULLI_API_KEY}}"
    - HDHomerun:
        icon: hdhomerun.png
        href: "{{HOMEPAGE_VAR_HDHOMERUN_URL}}"
        description: flex 4k
        widget:
            type: hdhomerun
            url: "{{HOMEPAGE_VAR_HDHOMERUN_URL}}"
- Remote Access:
    - PiKVM:
        icon: https://avatars.githubusercontent.com/u/41749659?s=200&v=4
        href: "{{HOMEPAGE_VAR_PIKVM_URL}}"
        description: remote kvm
    - IPMI:
        icon: https://upload.wikimedia.org/wikipedia/commons/1/1d/Super_Micro_Computer_Logo.svg
        href: "{{HOMEPAGE_VAR_IPMI_1_URL}}"
        description: storinator
    - IPMI:
        icon: https://upload.wikimedia.org/wikipedia/commons/1/1d/Super_Micro_Computer_Logo.svg
        href: "{{HOMEPAGE_VAR_IPMI_2_URL}}"
        description: hl15
    - Netboot:
        icon: https://netboot.xyz/img/nbxyz-laptop.gif
        href: "{{HOMEPAGE_VAR_NETBOOT_URL}}"
        description: network boot utility
    - Tripp Lite:
        icon: https://upload.wikimedia.org/wikipedia/commons/f/f9/Tripp_Lite_logo.svg
        href: "{{HOMEPAGE_VAR_UPS_1_URL}}"
        description: 1500
    - Eaton:
        icon: https://cdn11.bigcommerce.com/s-fg272t4iw0/images/stencil/1280x1280/products/2549/2802/C-12556__63907.1557814942.jpg?c=2
        href: "{{HOMEPAGE_VAR_UPS_2_URL}}"
        description: 5p
- Home Automation:
    - Home Assistant:
        icon: home-assistant.svg
        href: "{{HOMEPAGE_VAR_HOME_ASSISTANT_URL}}"
        description: home
        widget:
            type: homeassistant
            url: "{{HOMEPAGE_VAR_HOME_ASSISTANT_URL}}"
            key: "{{HOMEPAGE_VAR_HOME_ASSISTANT_API_KEY}}"
    - UniFi:
        icon: https://play-lh.googleusercontent.com/DmgQvSdocOrGr0D0rxSBE9sqh23Fw3ck3BgKRN788cZnOKgcZlcEAFRYwmUbp6vMTVI
        href: "{{HOMEPAGE_VAR_UNIFI_PROTECT_URL}}"
        description: protect
    - Scryped:
        icon: https://www.scrypted.app/images/web_hi_res_512.png
        href: "{{HOMEPAGE_VAR_SCRYPTED_URL}}"
        description: mgmt console
    - Broadlink Control:
        icon: https://nwzimg.wezhan.net/contents/sitefiles3606/18030899/images/5430245.png
        href: "{{HOMEPAGE_VAR_BROADLINK_CONTROL_URL}}"
        description: light control
- Other:
    - GitLab:
        icon: gitlab.svg
        href: https://gitlab.com
        description: source code
    - GitHub:
        icon: github.svg
        href: https://github.com
        description: source code
    - Shlink:
        icon: https://shlink.io/images/shlink-logo-blue.svg
        href: "{{HOMEPAGE_VAR_SHLINK_URL}}"
        description: dashboard

config/settings.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/settings

title: Techno Tim Homepage

background:
  image: https://cdnb.artstation.com/p/assets/images/images/006/897/659/large/mikael-gustafsson-wallpaper-mikael-gustafsson.jpg
  blur: sm # sm, md, xl... see https://tailwindcss.com/docs/backdrop-blur
  saturate: 100 # 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate
  brightness: 50 # 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness
  opacity: 100 # 0-100

theme: dark
color: slate

useEqualHeights: true

layout:
  Hypervisor:
    header: true
    style: row
    columns: 4
  Containers:
    header: true
    style: row
    columns: 4
  DNS:
    header: true
    style: row
    columns: 4
  Network:
    header: true
    style: row
    columns: 4
  Remote Access:
    header: true
    style: row
    columns: 4
  Storage:
    header: true
    style: row
    columns: 4
  Media:
    header: true
    style: row
    columns: 4
  Home Automation:
    header: true
    style: row
    columns: 4
  Other:
    header: true
    style: row
    columns: 4

config/widgets.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/service-widgets

- resources:
    cpu: true
    memory: true
    disk: /

- datetime:
    text_size: xl
    format:
      timeStyle: short

.env

Note: These variables will be replace in the configuration above. You will need to supply your own values here in your file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
PUID=1000
PGID=1000

HOMEPAGE_VAR_PIHOLE_API_KEY_1=
HOMEPAGE_VAR_PIHOLE_API_KEY_2=
HOMEPAGE_VAR_PIHOLE_API_KEY_3=

HOMEPAGE_VAR_PIHOLE_URL_1=
HOMEPAGE_VAR_PIHOLE_URL_2=
HOMEPAGE_VAR_PIHOLE_URL_3=

HOMEPAGE_VAR_PLEX_URL=
HOMEPAGE_VAR_PLEX_API_TOKEN=

HOMEPAGE_VAR_TAUTULLI_URL=
HOMEPAGE_VAR_TAUTULLI_API_KEY=

HOMEPAGE_VAR_HDHOMERUN_URL=

HOMEPAGE_VAR_HOME_ASSISTANT_URL=
HOMEPAGE_VAR_HOME_ASSISTANT_API_KEY=

HOMEPAGE_VAR_TRUENAS_URL=
HOMEPAGE_VAR_TRUENAS_API_KEY=

HOMEPAGE_VAR_UNIFI_NETWORK_URL=
HOMEPAGE_VAR_UNIFI_NETWORK_USERNAME=
HOMEPAGE_VAR_UNIFI_NETWORK_PASSWORD=

HOMEPAGE_VAR_UNIFI_PROTECT_URL=

HOMEPAGE_VAR_UPTIME_KUMA_URL=

HOMEPAGE_VAR_MINIO_URL=

HOMEPAGE_VAR_RACNHER_URL=

HOMEPAGE_VAR_LONGHORN_URL=

HOMEPAGE_VAR_PORTAINER_URL=
HOMEPAGE_VAR_PORTAINER_API_KEY=

HOMEPAGE_VAR_PROXMOX_URL=
HOMEPAGE_VAR_PROXMOX_USER=
HOMEPAGE_VAR_PROXMOX_API_KEY=

HOMEPAGE_VAR_UPTIME_ROBOT_API_KEY=

HOMEPAGE_VAR_SCRYPTED_URL=

HOMEPAGE_VAR_PIKVM_URL=

HOMEPAGE_VAR_NETBOOT_URL=

HOMEPAGE_VAR_BROADLINK_CONTROL_URL=

HOMEPAGE_VAR_IPMI_1_URL=
HOMEPAGE_VAR_IPMI_2_URL=

HOMEPAGE_VAR_UPS_1_URL=
HOMEPAGE_VAR_UPS_2_URL=

HOMEPAGE_VAR_SHLINK_URL=

Kubernetes Config

Here’s my Kubernetes config!

deployment.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: homepage
  namespace: default
  labels:
    app: homepage
  annotations:
    reloader.stakater.com/auto: "true"
spec:
  selector:
    matchLabels:
      app: homepage
  replicas: 3
  progressDeadlineSeconds: 600
  revisionHistoryLimit: 1
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxUnavailable: 25%
      maxSurge: 1
  template:
    metadata:
      labels:
        app: homepage
      annotations:
        deploy-date: "deploy-date-value"
    spec:
      containers:
        - name: homepage
          image: ghcr.io/gethomepage/homepage:v0.8.4
          resources:
            requests:
              memory: 128Mi
              cpu: 200m
          envFrom:
            - secretRef:
              name: homepage-secret
          ports:
            - containerPort: 3000
              name: http
          readinessProbe:
            httpGet:
              path: /
              port: http
            initialDelaySeconds: 60
            periodSeconds: 10
            failureThreshold: 5
            timeoutSeconds: 5
          livenessProbe:
            httpGet:
              path: /
              port: http
            initialDelaySeconds: 10
            periodSeconds: 10
            timeoutSeconds: 5
          volumeMounts:
            - mountPath: /app/config/custom.js
              name: homepage-config
              subPath: custom.js
            - mountPath: /app/config/custom.css
              name: homepage-config
              subPath: custom.css
            - mountPath: /app/config/bookmarks.yaml
              name: homepage-config
              subPath: bookmarks.yaml
            - mountPath: /app/config/docker.yaml
              name: homepage-config
              subPath: docker.yaml
            - mountPath: /app/config/kubernetes.yaml
              name: homepage-config
              subPath: kubernetes.yaml
            - mountPath: /app/config/services.yaml
              name: homepage-config
              subPath: services.yaml
            - mountPath: /app/config/settings.yaml
              name: homepage-config
              subPath: settings.yaml
            - mountPath: /app/config/widgets.yaml
              name: homepage-config
              subPath: widgets.yaml
            - mountPath: /app/config/logs
              name: logs
      volumes:
        - name: homepage-config
          configMap:
            name: homepage
        - name: logs
          emptyDir: {}
      topologySpreadConstraints:
        - maxSkew: 1
          topologyKey: topology.kubernetes.io/zone
          whenUnsatisfiable: DoNotSchedule
          labelSelector:
            matchLabels:
              app: homepage

config.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
apiVersion: v1
kind: ConfigMap
metadata:
  name: homepage
  namespace: default
  labels:
    app: homepage
data:
  kubernetes.yaml: |
    mode: cluster
  settings.yaml: |
    title: Techno Tim Homepage

    background:
      image: https://cdnb.artstation.com/p/assets/images/images/006/897/659/large/mikael-gustafsson-wallpaper-mikael-gustafsson.jpg
      blur: sm # sm, md, xl... see https://tailwindcss.com/docs/backdrop-blur
      saturate: 100 # 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate
      brightness: 50 # 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness
      opacity: 100 # 0-100

    theme: dark
    color: slate

    useEqualHeights: true

    layout:
      Hypervisor:
        header: true
        style: row
        columns: 4
      Containers:
        header: true
        style: row
        columns: 4
      DNS:
        header: true
        style: row
        columns: 4
      Network:
        header: true
        style: row
        columns: 4
      Remote Access:
        header: true
        style: row
        columns: 4
      Storage:
        header: true
        style: row
        columns: 4
      Media:
        header: true
        style: row
        columns: 4
      Home Automation:
        header: true
        style: row
        columns: 4
      Other:
        header: true
        style: row
        columns: 4
  custom.css: ""
  custom.js: ""
  bookmarks.yaml: ""
  services.yaml: |
    - Hypervisor:
        - Proxmox:
            icon: proxmox.svg
            href: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
            description: pve1
            widget:
                type: proxmox
                url: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
                username: "{{HOMEPAGE_VAR_PROXMOX_USER}}"
                password: "{{HOMEPAGE_VAR_PROXMOX_API_KEY}}"
                node: xing-01
        - Proxmox:
            icon: proxmox.svg
            href: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
            description: pve2
            widget:
                type: proxmox
                url: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
                username: "{{HOMEPAGE_VAR_PROXMOX_USER}}"
                password: "{{HOMEPAGE_VAR_PROXMOX_API_KEY}}"
                node: xing-02
        - Proxmox:
            icon: proxmox.svg
            href: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
            description: pve2
            widget:
                type: proxmox
                url: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
                username: "{{HOMEPAGE_VAR_PROXMOX_USER}}"
                password: "{{HOMEPAGE_VAR_PROXMOX_API_KEY}}"
                node: xing-03
        - Proxmox:
            icon: proxmox.svg
            href: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
            description: pve4
            widget:
                type: proxmox
                url: "{{HOMEPAGE_VAR_PROXMOX_URL}}"
                username: "{{HOMEPAGE_VAR_PROXMOX_USER}}"
                password: "{{HOMEPAGE_VAR_PROXMOX_API_KEY}}"
                node: storinator
    - Containers:
        - Rancher:
            icon: rancher.svg
            href: "{{HOMEPAGE_VAR_RACNHER_URL}}"
            description: k8s
        - Longhorn:
            icon: longhorn.svg
            href: "{{HOMEPAGE_VAR_LONGHORN_URL}}"
            description: k8s storage
        - Portainer:
            icon: portainer.svg
            href: "{{HOMEPAGE_VAR_PORTAINER_URL}}"
            description: docker
            widget:
                type: portainer
                url: "{{HOMEPAGE_VAR_PORTAINER_URL}}"
                env: 2
                key: "{{HOMEPAGE_VAR_PORTAINER_API_KEY}}"
    - DNS:
        - Pi-Hole1:
            icon: pi-hole.svg
            href: "{{HOMEPAGE_VAR_PIHOLE_URL_1}}"
            description: quasar
            widget:
                type: pihole
                url: "{{HOMEPAGE_VAR_PIHOLE_URL_1}}"
                key: "{{HOMEPAGE_VAR_PIHOLE_API_KEY_1}}"
        - Pi-Hole2:
            icon: pi-hole.svg
            href: "{{HOMEPAGE_VAR_PIHOLE_URL_2}}"
            description: blazar
            widget:
                type: pihole
                url: "{{HOMEPAGE_VAR_PIHOLE_URL_2}}"
                key: "{{HOMEPAGE_VAR_PIHOLE_API_KEY_2}}"
        - Pi-Hole3:
            icon: pi-hole.svg
            href: "{{HOMEPAGE_VAR_PIHOLE_URL_3}}"
            description: electron
            widget:
                type: pihole
                url: "{{HOMEPAGE_VAR_PIHOLE_URL_3}}"
                key: "{{HOMEPAGE_VAR_PIHOLE_API_KEY_3}}"
    - Network:
        - UniFi:
            icon: unifi.svg
            href: "{{HOMEPAGE_VAR_UNIFI_NETWORK_URL}}"
            description: network
            widget:
                type: unifi
                url: "{{HOMEPAGE_VAR_UNIFI_NETWORK_URL}}"
                username: "{{HOMEPAGE_VAR_UNIFI_NETWORK_USERNAME}}"
                password: "{{HOMEPAGE_VAR_UNIFI_NETWORK_PASSWORD}}"
        - Uptime Kuma:
            icon: uptime-kuma.svg
            href: "{{HOMEPAGE_VAR_UPTIME_KUMA_URL}}"
            description: internal
            widget:
                type: uptimekuma
                url: "{{HOMEPAGE_VAR_UPTIME_KUMA_URL}}"
                slug: home
        - Uptime Robot:
            icon: https://play-lh.googleusercontent.com/cUrv0t00FYQ1GKLuOTvv8qjo1lSDjqZC16IOp3Fb6ijew6Br5m4o16HhDp0GBu_Bw8Y=w240-h480-rw
            href: https://uptimerobot.com/dashboard
            description: external
            widget:
                type: uptimerobot
                url: https://api.uptimerobot.com
                key: "{{HOMEPAGE_VAR_UPTIME_ROBOT_API_KEY}}"
    - Storage:
        - TrueNAS:
            icon: truenas.svg
            href: "{{HOMEPAGE_VAR_TRUENAS_URL}}"
            description: scale
            widget:
                type: truenas
                url: "{{HOMEPAGE_VAR_TRUENAS_URL}}"
                key: "{{HOMEPAGE_VAR_TRUENAS_API_KEY}}"
        - MinIO:
            icon: minio.svg
            href: "{{HOMEPAGE_VAR_MINIO_URL}}"
            description: object storage
    - Media:
        - Plex:
            icon: plex.svg
            href: "{{HOMEPAGE_VAR_PLEX_URL}}"
            description: media server
            widget:
                type: plex
                url: "{{HOMEPAGE_VAR_PLEX_URL}}"
                key: "{{HOMEPAGE_VAR_PLEX_API_TOKEN}}"
        - Tautulla:
            icon: tautulli.svg
            href: "{{HOMEPAGE_VAR_TAUTULLI_URL}}"
            description: plex stats
            widget:
                type: tautulli
                url: "{{HOMEPAGE_VAR_TAUTULLI_URL}}"
                key: "{{HOMEPAGE_VAR_TAUTULLI_API_KEY}}"
        - HDHomerun:
            icon: hdhomerun.png
            href: "{{HOMEPAGE_VAR_HDHOMERUN_URL}}"
            description: flex 4k
            widget:
                type: hdhomerun
                url: "{{HOMEPAGE_VAR_HDHOMERUN_URL}}"
    - Remote Access:
        - PiKVM:
            icon: https://avatars.githubusercontent.com/u/41749659?s=200&v=4
            href: "{{HOMEPAGE_VAR_PIKVM_URL}}"
            description: remote kvm
        - IPMI:
            icon: https://upload.wikimedia.org/wikipedia/commons/1/1d/Super_Micro_Computer_Logo.svg
            href: "{{HOMEPAGE_VAR_IPMI_1_URL}}"
            description: storinator
        - IPMI:
            icon: https://upload.wikimedia.org/wikipedia/commons/1/1d/Super_Micro_Computer_Logo.svg
            href: "{{HOMEPAGE_VAR_IPMI_2_URL}}"
            description: hl15
        - Netboot:
            icon: https://netboot.xyz/img/nbxyz-laptop.gif
            href: "{{HOMEPAGE_VAR_NETBOOT_URL}}"
            description: network boot utility
        - Tripp Lite:
            icon: https://upload.wikimedia.org/wikipedia/commons/f/f9/Tripp_Lite_logo.svg
            href: "{{HOMEPAGE_VAR_UPS_1_URL}}"
            description: 1500
        - Eaton:
            icon: https://cdn11.bigcommerce.com/s-fg272t4iw0/images/stencil/1280x1280/products/2549/2802/C-12556__63907.1557814942.jpg?c=2
            href: "{{HOMEPAGE_VAR_UPS_2_URL}}"
            description: 5p
    - Home Automation:
        - Home Assistant:
            icon: home-assistant.svg
            href: "{{HOMEPAGE_VAR_HOME_ASSISTANT_URL}}"
            description: home
            widget:
                type: homeassistant
                url: "{{HOMEPAGE_VAR_HOME_ASSISTANT_URL}}"
                key: "{{HOMEPAGE_VAR_HOME_ASSISTANT_API_KEY}}"
        - UniFi:
            icon: https://play-lh.googleusercontent.com/DmgQvSdocOrGr0D0rxSBE9sqh23Fw3ck3BgKRN788cZnOKgcZlcEAFRYwmUbp6vMTVI
            href: "{{HOMEPAGE_VAR_UNIFI_PROTECT_URL}}"
            description: protect
        - Scryped:
            icon: https://www.scrypted.app/images/web_hi_res_512.png
            href: "{{HOMEPAGE_VAR_SCRYPTED_URL}}"
            description: mgmt console
        - Broadlink Control:
            icon: https://nwzimg.wezhan.net/contents/sitefiles3606/18030899/images/5430245.png
            href: "{{HOMEPAGE_VAR_BROADLINK_CONTROL_URL}}"
            description: light control
    - Other:
        - GitLab:
            icon: gitlab.svg
            href: https://gitlab.com
            description: source code
        - GitHub:
            icon: github.svg
            href: https://github.com
            description: source code
        - Shlink:
            icon: https://shlink.io/images/shlink-logo-blue.svg
            href: "{{HOMEPAGE_VAR_SHLINK_URL}}"
            description: dashboard
  widgets.yaml: |
    - resources:
        cpu: true
        memory: true
        disk: /

    - datetime:
        text_size: xl
        format:
          timeStyle: short
  docker.yaml: ""

secret.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
kind: Secret
apiVersion: v1
type: Opaque
metadata:
    name: homepage-secret
    namespace: default
stringData:
    HOMEPAGE_VAR_PIHOLE_API_KEY_1: ""
    HOMEPAGE_VAR_PIHOLE_API_KEY_2: ""
    HOMEPAGE_VAR_PIHOLE_API_KEY_3: ""
    HOMEPAGE_VAR_PIHOLE_URL_1: ""
    HOMEPAGE_VAR_PIHOLE_URL_2: ""
    HOMEPAGE_VAR_PIHOLE_URL_3: ""
    HOMEPAGE_VAR_PLEX_url: ""
    HOMEPAGE_VAR_PLEX_API_TOKEN: ""
    HOMEPAGE_VAR_TAUTULLI_url: ""
    HOMEPAGE_VAR_TAUTULLI_API_key: ""
    HOMEPAGE_VAR_HDHOMERUN_url: ""
    HOMEPAGE_VAR_HOME_ASSISTANT_url: ""
    HOMEPAGE_VAR_HOME_ASSISTANT_API_key: ""
    HOMEPAGE_VAR_TRUENAS_url: ""
    HOMEPAGE_VAR_TRUENAS_API_key: ""
    HOMEPAGE_VAR_UNIFI_NETWORK_url: ""
    HOMEPAGE_VAR_UNIFI_NETWORK_username: ""
    HOMEPAGE_VAR_UNIFI_NETWORK_password: ""
    HOMEPAGE_VAR_UNIFI_PROTECT_url: ""
    HOMEPAGE_VAR_UPTIME_KUMA_url: ""
    HOMEPAGE_VAR_MINIO_url: ""
    HOMEPAGE_VAR_RACNHER_url: ""
    HOMEPAGE_VAR_LONGHORN_url: ""
    HOMEPAGE_VAR_PORTAINER_url: ""
    HOMEPAGE_VAR_PORTAINER_API_key: ""
    HOMEPAGE_VAR_PROXMOX_url: ""
    HOMEPAGE_VAR_PROXMOX_USER: ""
    HOMEPAGE_VAR_PROXMOX_API_key: ""
    HOMEPAGE_VAR_UPTIME_ROBOT_API_key: ""
    HOMEPAGE_VAR_SCRYPTED_url: ""
    HOMEPAGE_VAR_PIKVM_url: ""
    HOMEPAGE_VAR_NETBOOT_url: ""
    HOMEPAGE_VAR_BROADLINK_CONTROL_url: ""
    HOMEPAGE_VAR_IPMI_1_url: ""
    HOMEPAGE_VAR_IPMI_2_url: ""
    HOMEPAGE_VAR_UPS_1_url: ""
    HOMEPAGE_VAR_UPS_2_url: ""
    HOMEPAGE_VAR_SHLINK_url: ""

Join the conversation

⚙️ See all the hardware I recommend at https://l.technotim.live/gear

🚀 Don’t forget to check out the 🚀Launchpad repo with all of the quick start source files

🤝 Support me and help keep this site ad-free!

This post is licensed under CC BY 4.0 by the author.