Share your homepage

[javijuji]

Anyone up for showing their homepage? Would like to see different ways of organizing apps. I'll start with mine

[henryxrl]

Here's mine:

[henryxrl]

So this docker runs on a VM in Proxmox. The reason I can see the NAS storage is that I set up a shared folder with unlimited storage quota to the VM. In this case, it just shows the entire possible storage space of the NAS.

[dinjojo]

Can you share your yaml flies ?

[mfwadejr]

Would you mind telling me how you were able to get NGINX Proxy Manager stats to show? Share excerpt from yaml file (without username/pass, etc.) Every attempt by me fails.

BTW, great looking page!

[Relax427]

Would you mind telling me how you were able to get NGINX Proxy Manager stats to show? Share excerpt from yaml file (without username/pass, etc.) Every attempt by me fails.

    - NGINX Proxy Manager:
        icon: nginxproxymanager
        href: http://192.168.1.xxx:81
        description: 
        server: docker #setup in docker.yaml
        container: npm
        widget:
            type: npm
            url: http://192.168.1.xxx:81
            username: 
            password: 

Edit: username/password is a new user I added in the nginx web gui that has view only rights for everything.

[martirale]

@mfwadejr Were you able to solve your problem? I had the same problem but unlike Relax427, I have NGINX Proxy Manager (NPM) installed as a container in Proxmox. The thing is that I discovered what the problem was (in my case, of course) and it was the password of my NPM user. My password had special characters and that generated the error. By changing it to one that only contains letters (upper and lower case) and numbers without special characters, the NPM widget worked immediately. In case the information is useful to you.

[sgastol]

Mine:

[dinjojo]

Can you also attach your yaml files

[netsec007]

How did you get rid of the logo at the top left?

[Tokukarin]

[Tokukarin]

Not yet completely finished.

[Tokukarin]

@IIIdefconIII

background: https://images.unsplash.com/photo-1672288072591-619afe830096?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
backgroundOpacity: 0.5

Edit: Link got cut off, fixed it.
Edit 2: Also in addition:

theme: dark
color: slate
headerStyle: underlined

[javijuji]

Made some changes. Did anyone manage to get a double column for a single category?

[owennewo-dev]

@Gapoly https://gethomepage.dev/configs/settings/#favicon

[Gapoly]

@Gapoly https://gethomepage.dev/configs/settings/#favicon

I already got a favicon. I don't know how you can edit the header. The closest thing I found is https://gethomepage.dev/configs/settings/#header-style but I don't know how you can an image inside it.

[janreinhardt]

@Gapoly have a look here please:
https://gethomepage.dev/widgets/info/logo/

[Gapoly]

@Gapoly have a look here please: https://gethomepage.dev/widgets/info/logo/

I tried it, I'm not really sure how to use it. I tried putting in settings.yaml and services.yaml. Not working, I've seen a lot of homepages with the logo in the header, I can't figure it out

[xenogenick]

@Gapoly The logo bit goes in your widgets.yaml file as per the details here, along with any other things you want in the header: https://gethomepage.dev/widgets/info/

[nebberz]

Started using Homepage a couple days ago, big fan so far!

[ekalp]

Noted you have Docker/2/3, are these portainer instances with the docker-moby icon, or native calls into Docker for status?

[mfwadejr]

I just added a path in Unraid. All the other icons I have work just fine, only a select few don’t. Does anyone know what the max size the icon can be? <img width="803" alt="Screenshot 2023-02-15 at 4 21 17 PM" src="https://user-images.githubusercontent.com/125498560/219178343-258e69cb-f81c-4006-b4df-2b66b0a73b90.png"> 

…

On Feb 15, 2023, at 4:16 PM, IIIdefconIII ***@***.***> wrote: for me the custom icons are also not working, just the default one, while in the original uptime page it does shows icons. maybe we should make a pr for this. icon: /icons/deconz.png and mount that icons folder as a volume in the docker compose volumes: - $DOCKERDIR/homepage/images:/app/public/images - $DOCKERDIR/homepage/icons:/app/public/icons — Reply to this email directly, view it on GitHub <#473 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A55PJQAXJAWFPO5XFSTSRWLWXVBTPANCNFSM6AAAAAARTWEOBU>. You are receiving this because you commented.

[Twit123]

Just started using this a couple of days ago, I'm impressed so far.

[lokiiiii]

Really clean !
May I ask how do you get the grey icons ? Is it a parameter in your config files or did you just modified the icons directly and then specify their paths in your services.yaml ?
Thanks =)

[Twit123]

Hi,

I just modified the the icons directly and specified thier path.

Simon

[mmillner99]

Can I ask what code you used to move the search bar to another line? thx in advance!
-Mike

[alexdelprete]

Just completed the configuration...still tinkering with some things, but I like it:

[Tokukarin]

You can use the Proxmox API for it.
Edit:
Or the glances widget like alex wrote below

[alexdelprete]

You can use the Proxmox API for it.

Not on the widgets. These are the available ones:

[mrtargaryen]

How do you see resources widgets on each of those? I would really like to do this.

[Vctrsnts]

Hi.
Can you explain who put six controls ( PVE1, PVE2, PBS, NAS, etc... ) and next the search box?
Because I trying and not very well
Thanks a lot

[david85091]

i would love to see the yaml files. makes mine look like a pos!

[alexdelprete]

It's through Glances: https://gethomepage.dev/en/widgets/glances/

You need to install Glances and run it in web server mode on each server you want CPU/RAM info from: -w, --webserver - run Glances in web server mode (bottle needed)

I installed it as a daemon on each server, following this: https://github.com/nicolargo/glances/wiki/Start-Glances-through-Systemd

I hope devs will implement getting also disk info from Glances.

[Relax427]

I got it working, thank you very much.

Is there a way to see an "expanded" glances like with resources?

For anyone else on Debian 11 from scratch:

Installed python3 and pip:

sudo apt install python3 python3-dev python3-jinja2 python3-psutil python3-setuptools psensor psensor-server python3-pip lm-sensors -y

Installed bottle for web server:

sudo pip install bottle

Installed glances:

sudo pip3 install glances

Verified install:

sudo glances --version

Created new unit file glances.service:

sudo echo '[Unit]
Description=Glances
After=network.target

[Service]
ExecStart=/usr/local/bin/glances -w
Restart=on-abort
RemainAfterExit=yes

[Install]
WantedBy=multi-user.target' > /etc/systemd/system/glances.service

Enable unit:

sudo systemctl enable glances.service

Start service:

sudo systemctl start glances.service

[ArbiterGR]

Here's mine. I love homepage so far! Switched from Homer.

[spydermixx]

Looks good! Could you share how you've set up your YAML config to get the extra metrics under your Unraid entry please?

[dfatih]

Would love to see it as well. thinking about switching from homarr but this seems quiet a bit of configuration.

[amaeru16]

hello, it looks really good, could you share your yaml files please? @ArbiterGR

[A-Void-Me]

I love homepage, thanks for this project. many ideas to steal from this thread ;)

[benjamin051000]

I see firewatch background, I upvote

[mariusdmm]

Can you please tell me how you put those icons on Media/SmartHome/Server?

[OberfragGER]

Thats a category. So you habe to put that in you settings.yaml.

[mariusdmm]

layout:
Media:
    icon: mega-nz.png
    header: true
    headerStyle: boxedWidgets
    useEqualHeights: true # overrides global setting
    style: row
    columns: 2

I put an icon like this and it doesn't display it.

[crispybegs]

i've tried quite a few dashboards but this is the best by far. thanks @benphelps

[Rabenherz112]

Homepage is for sure awesome for making some good-looking dashboards!

[crispybegs]

what are the 'fileshare' widgets you've got going on there?

[Rabenherz112]

Those are Synology NAS which I have
https://gethomepage.dev/en/services/diskstation/

[Jas-SinghFSU]

Are you using Shlink as your URL shortener? Trying to find one with a more modern UI but none seems as complete as Shlink. Maybe that's a sign to give up and give shlink some respect lol.

[nikitoyd]

Just started...

[Dhruvp25]

hey, how did u setup nextcloud mine is not setting up, constantly showing API error help me pls if u can share with easy steps as im somehow experienced in home server development. And also how can i get that small "running" service green showing on each tabs?

[nikitoyd]

1. 'Running' - I've just used labels, so all services were added via auto discovery.

2. nexcloud - I didn't configure API communication. Just docker container usage as for all auto discovered services.
   You can use labels as well to pass config to make extra info work

[Lukylix]

Custom code but i made i pull request. Hoping it will pass all the steps :)

[xinmans]

cloud you please show your config code for column 3?

[RoboMagus]

cloud you please show your config code for column 3?

@Lukylix, yes please 😄

[Lukylix]

Sorry my pull request didn't go through.
As my linter was making things hard to read and this functionality didn't fit with the project.
My version of homepage is quite old now.
I recommend sticking with the official project.

[nsrafk]

I'll share a somewhat basic one here. I do not like all the blurring/background image stuff :)

[gouthamravee]

Do you mind posting your yaml please?

[amaeru16]

I'm interested too for the yaml files, this homepage looks great

[nanohits]

Yes this one is really good. Please share the settings, services and widget YAML's pretty please

[bignay2000]

Looking for a better way to show disks and disk stats

My hosts are Debian and have a mix of NVMe, SSD and Hard Drive storage.

Anyone have a widget recommendation?

[bignay2000]

I was able to add disks via Glances Widget

[bignay2000]

Heres mine

services.yaml.txt

[owennewo-dev]

Here is my Homepage! Although it's super easy to learn I have spent a few weeks experimenting and tinkering.
Thanks contributors!

I also created a repository with my config files, and with instructions on getting Homepage running on a TrueNAS Scale server, because I couldn't find any instructions when I started. Soon I will add instructions on installing Glances and NetAlertX on a TrueNAS server and tying it to Homepage!
https://github.com/owennewo-photo/setup-Homepage-on-TrueNAS

[owennewo-dev]

I changed it from blurring the entire background to just the cards

[FriendlyNGeeks]

Yes I know some of my services/host are offline. I swapped everything except HA to Prox. Orange Tag indicates host on Prox. I'll move the rest of the services when I get more Orange Pi 5 pros with some POE hats

[owennewo-dev]

Nice Homepage! How did you get the small widgets? The ones in a 4x4 grid under the Portainer widget. Also how did you get the orange tag on your services?

[FriendlyNGeeks]

The id attribute adds an id to any object on page. Use CSS to target

.flex-col.services-list {
    display: inline;
}

#serviceBtn {
    display: inline-block;
    float: left;
    width: 50%;
    height: 100%;
    padding: 0.25rem;
}

#proxlxc {
    background: linear -gradient(135deg,#eb7e02 20px,hsla(0,0%,100%,0) 0);
    border-radius: .375rem
}
/* #proxlxc :first-child.cursor-pointer {
    background: linear-gradient(135deg,#eb7e02 20px,hsla(0,0%,100%,.05) 0);
    border-radius: .375rem
} */

#proxlxc .cursor-pointer::after {
    position: absolute;
    top: 0px;
    left: 0px;
    content: ""attr(data-tag)"";
}

.services-list.mt-3 {
    margin-top: 0;
}

    - Pelican:
        icon: /icons/png/pelican.png
        href: https://dash.domain.com
        id: proxlxc
    - SIAB:
        icon: /icons/png/unix-term.png
        href: https://zerosol.local:4200
        description: Shell In A Box
        id: serviceBtn

[chriswa81]

Thanks for the css Code. But, is the proxlxc Code correct? Don't work for me. No indicator tag displayed.

[chriswa81]

Found the mistake:
...background: linear-gradient... without space

[Fernando-Checa]

Still work in progress.....

[S2ciOnur]

With Tabs? How?!

[Fernando-Checa]

What you mean how? Tabs on the main page?

[S2ciOnur]

Yes

[ssaenger]

Tabs documentation: https://gethomepage.dev/configs/settings/#tabs

[nanohits]

Are you able to share your services.yaml file?

[Fernando-Checa]

Enough tinkering for now... this is a rabbit hole :-)
Time for some real work now...

[TQSHY]

I added a group of services with 8 columns outside the tabs, so it's always visible.

You need to define the main group like this:

# group outside TABs #

- main:
    - Hass:
        href: https://hass.home.es/
        icon: /icons/home-assistant.svg
    - Nodered:
        href: https://nodered.home.es/
        icon: /icons/nodered.png
    - Proxmox:
        href: https://proxmox.home.es
        icon: proxmox.png
    - Portainer:
        href: https://portainer.home.es
        icon: portainer.png
    - TrueNAS:
        href: https://truenas.home.es/
        icon: truenas-scale.png
    - pfSense:
        href: https://pfsense.home.es/
        icon: /icons/pfsense.png
    - CloudFlare:
        href: https://cloudflare.com/
        icon: cloudflare
    - Gitea:
        id: col-small
        href: https://gitea.home.es/
        icon: gitea.png

thank you for sharing. Ill take it as Inspo and try to implement it

[Fernando-Checa]

I added custom.js so the main group always is displayed on top of the others

`
// javascript

function getSelectedTab() {
const tabsContainer = document.getElementById('tabs');
if (!tabsContainer) return null; // Si no existe el contenedor

 moveLastToFirst()

 // Busca dentro del contenedor el botón con aria-selected="true"
 const activeButton = tabsContainer.querySelector('li > button[aria-selected="true"]');
 return activeButton ? activeButton.textContent.trim() : null; // Retorna el texto del botón seleccionado o null

}

function setupTabListeners() {
const tabsContainer = document.getElementById('tabs');
if (!tabsContainer) {
console.error("El contenedor con id 'tabs' no existe.");
return;
}

 // Añade un listener a cada botón para detectar clics
 const buttons = tabsContainer.querySelectorAll('li > button');
 buttons.forEach((button) => {
   button.addEventListener('click', () => {
     // Actualiza aria-selected para reflejar el estado activo
     //buttons.forEach((btn) => btn.setAttribute('aria-selected', 'false'));
     //button.setAttribute('aria-selected', 'true');

     // Muestra el tab seleccionado en la consola
     console.log("Nuevo tab seleccionado:", button.textContent.trim());

     var delayInMilliseconds = 30; //1 second

      setTimeout(function() {moveLastToFirst(); }, delayInMilliseconds);

      });
 });

}

function moveLastToFirst() { // coloca el grupo main al principio
const container = document.getElementById('layout-groups');
if (!container) {
console.error("El contenedor con id 'layout-groups' no existe.");
return;
}

 // Obtiene todos los divs dentro del contenedor
 const divs = Array.from(container.children);
 if (divs.length < 2) {
   console.warn("No hay suficientes elementos para reordenar.");
   return;
 }

 // Toma el último div
 const lastDiv = divs[divs.length - 1];

 // Mueve el último div al principio del contenedor
 container.insertBefore(lastDiv, divs[0]);

 console.log("Reordenados los divs en 'layout-groups':");

}

window.onload = () => {
console.log("El tab seleccionado es:", getSelectedTab());
setupTabListeners();
}
`

[Fernando-Checa]

Enough tinkering for now... this is a rabbit hole :-) Time for some real work now...
This looks amazing. Any chance you'd share the YAML for how you got this done in services, widgets, etc?

the files are in the github repo

https://github.com/Fernando-Checa/homepage_theme/tree/main

[nanohits]

Hi mate, looks like your repo the services.yaml is blank, can you I please request it?

[janreinhardt]

This looks awesome. What format and size is your favicon please? I cant get it to work myself. Is yours *.png or *.ico? 180x180 or smaller? Configured the standard way via settings.yaml ?
Thanks!

[Ryland0]

Nothing fancy, but suits me just fine.

[S2ciOnur]

Can i get your layout.yml?

[amaeru16]

i'm interested too! :)

[mlofjard]

[wfy-belief]

Very beautiful, can you share the css configuration. Thank you

[mlofjard]

Sure, it's just a few overrides:

#page_container {
    background:
         radial-gradient(circle at top left, rgba(0, 255, 255, .3) 0%, transparent 60%),
         radial-gradient(circle at bottom right, rgba(255, 0, 255, .2) 0%, transparent 60%),
         radial-gradient(circle, #888, #111);
}

.service[data-name="Calendar"] {
 .text-red-500 {
    color: rgb(226, 232, 240);
  }
  .text-red-500\/40 {
    color: rgb(226, 232, 240, .2);
  }
  .text-gray-500 {
    color: rgb(226, 232, 240, .2);
  }
  .service-title {
    display: none;
  }
  .service-container > .flex-col > .w-full > .flex-col {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .bg-cyan-500 {
    background-color: #f26419;
  }
  .bg-teal-500 {
    background-color: rgb(0, 190, 190);
  }
}

.docker-status.dark\:bg-theme-900\/50:is(.dark *) {
  background-color: rgb(var(--color-900) / .2);
}
.docker-status .text-emerald-500\/80 {
  color: rgba(226, 232, 240, .8);
}

[brypie]

Nice!

• How did you get the Container widgets to work?

[Weeb-with-NPC-energy]

Can you share your settings.yaml, please?

I cannot figure out how to combine row and column like your did with your infrastructure and services section.

[owennewo-dev]

I updated my background, added some nested widgets, and converted a lot of my bookmarks to icon style.

[sankethguru]

Looks so cool! Can you provide the yaml confing for ADS iframe?

[owennewo-dev]

@sankethguru Thanks! I have a repo for all my config files, so you can look here

But to save you time I will put the yaml here too.

services.yaml

  - Planes:
      - ADS-B Exchange:
          widget:
            type: iframe
            name: ADS-B Exchange
            src: https://globe.adsbexchange.com/
            classes: h-64 # optional, use tailwind height classes, see https://tailwindcss.com/docs/height
            referrerPolicy: same-origin # optional, no default
            allowPolicy: fullscreen # optional, no default
            allowFullscreen: false # optional, default: true
            loadingStrategy: eager # optional, default: eager
            allowScrolling: no # optional, default: yes
      - ATC:
         - Tower/Approach:
             icon: https://cdn.brandfetch.io/idz5JfMMsI/w/400/h/400/theme/dark/icon.png?c=1bfwsmEH20zzEfSNTed
             href: https://www.liveatc.net/hlisten.php?mount=kboi&icao=kboi
         - Delivery/Ground:
             icon: https://cdn.brandfetch.io/idz5JfMMsI/w/400/h/400/theme/dark/icon.png?c=1bfwsmEH20zzEfSNTed
             href: https://www.liveatc.net/hlisten.php?mount=kboi_gnd&icao=kboi

The two ATC links go to Liveatc.net, and they are configured as nested widgets.

settings.yaml

layout:
  Services1:
    style: row
    columns: 3
    header: false
  Services2:
    style: row
    columns: 4
    header: false
  Blocks:
    style: row
    columns: 3
    header: false
    Tasksblock:
      style: column
      columns: 1
      header: false
    MailCalendar:
      style: column
      columns: 1
      header: false
      Links:
        style: row
        columns: 2
        header: false
    Planes:
      style: column
      columns: 1
      header: false
      ATC:
        style: row
        columns: 2
        header: false
# etc etc #

My settings.yaml is a little confusing, let me know if you need a better explanation haha.

[sankethguru]

Much thanks!

[S2ciOnur]

How did you get that green status dot on TrueNas and e.g. portainer? it does not work for me :(

[owennewo-dev]

@S2ciOnur You need to add siteMonitor: http://your.server.ip and statusStyle: dot to your service yaml. This is what my TrueNAS widget looks like:

    - TrueNAS:
        id: truenas-scale
        icon: truenas-scale.png
        href: http://your.server.ip
        siteMonitor: http://your.server.ip
        statusStyle: dot
        widget:
          type: truenas
          fields: ["uptime", "alerts"]
          url: http://your.server.ip
          key: apikey
          enablePools: true
          nasType: scale

[lazarevski]

Recording.2025-01-29.004927.mp4

[owennewo-dev]

Very nice, super clean!

[Byrnesdigital]

This looks awesome. How do the links and stats pages look? Care to share any config files? I really like the header

[kexo1]

That camera under homeassistant widget, is that iframe? How did you make it without borders? And how did you get live wallpaper with this much quality?

[Gapoly]

Finally finished mine and I love the final result. Also, thanks to @owennewo-dev for showing his conf because I really like the plane iFrame (I didn't even know I could do that). And the other members of the community for helping me with stuff, especially the logo in the header.

[janreinhardt]

Could you share your settings.yaml please?

[owennewo-dev]

This looks great! I love my iFrame 😁

[Gapoly]

Yep @janreinhardt

---
# For configuration options and examples, please see:
# https://gethomepage.dev/configs/settings/

title: Nemealan
favicon: /icons/favicon.ico
description: Mon dashboard
language: fr

headerStyle: underlined # default style

startUrl: http://homepage.nemeapve.lan

background:
  image: /images/krosmoz1.jpg
  #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: 100 # 0-100

theme: dark

color: purple
# slate, gray, zinc, neutral, stone, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, red, white

providers:
  openweathermap: 4315idontthinkso343573

showStats: true

cardBlur: sm

layout:
  Homelab:
    icon: https://toppng.com/uploads/thumbnail/database-database-icon-11563207079j8dvtin30q.png
  Aviation:
    icon: /icons/plane.png
  NemeaNAS:
    icon : https://www.truenas.com/wp-content/uploads/2020/06/logo-TrueNAS-Scale-compressor.png
    style: row
    columns: 4
  NemeaPVE:
    icon : /icons/proxmox.png
    style: row
    columns: 3
  Developer:
    style: column
    columns: 1
  Warframe:
    style: column
    columns: 1
  Divers:
    style: row
    columns: 3

[nanohits]

Here is mine.

[owennewo-dev]

Very nice background image.

[owennewo-dev]

I keep making changes haha!

https://github.com/owennewo-dev/Homepage-config

[flailin]

Thanks to everyone for posting their examples and configs, spent a day or so on mine and this thread has helped with all my questions without asking :)