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?

[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.

[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.

[Mlearn]

[BartschLabs]

This must have been a lot of work! I see you list other dashboards, like Homarr and Dashy. What purpose?

[Kribensisis]

Here's mine. A bit of custom CSS, but nothing major. Portainer does the Dockge widget.

[brypie]

Hi.
Can you explain how you got the Dockge widget?

Thanks

[DroningOn75]

Hi Botond, its a bit of a workaround tbh, i could never find a way to get the asus router to report directly to Gethompage, those metrics are actually being polled from Home Assistant via the HACS plugin 'Asusrouter' works great tbh but the 0.32.1 update broke the decimal place and im getting huge readings that im yet to fix ie... 0.00000000000000 Mbit/s ie - HomeAssistant: - ASUS TUF-AX6000: icon: asus.png href: http://192.168.1.1/index.asp #link to router Admin webGui description: Internet Router and WiFi access point widget: type: homeassistant url: http://ha.home:8123 key: ########################################## custom: - state: sensor.tuf_ax6000_wan_download_speed label: Download Speed - state: sensor.tuf_ax6000_wan_upload_speed label: Upload Speed - state: sensor.tuf_ax6000_connected_devices label: Connected Devices

…

On Tue, 1 Oct 2024 at 20:27, Botond Pelyi ***@***.***> wrote: @DroningOn75 <https://github.com/DroningOn75> I'm interested in the Asus router widget. Can you please share it? Thanks! i guess it is something custom I'm about to create one with the chart integration from the Glances <https://gethomepage.dev/widgets/services/glances/> widget — Reply to this email directly, view it on GitHub <#473 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5BBTEVI3OLIHGRS2G5D2UTZZLZTRAVCNFSM6AAAAAARTWEOBWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAOBRGI4TGNY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[pelyib]

Thanks for sharing,
i don't use HA. I found this article (network bandwidth section), i will implement the same in JS

[remussamoila]

Here is my homepage

and monitoring tab

[mariusdmm]

How can you create these TABS/PAGES (Services/Monitoring)?

[owennewo-dev]

@mariusdmm instructions are in the documentation https://gethomepage.dev/configs/settings/#tabs

[BeeTwenty]

[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?

[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.....

[owennewo-dev]

Looks great!

[S2ciOnur]

With Tabs? How?!

[Fernando-Checa]

What you mean how? Tabs on the main page?

[S2ciOnur]

Yes

[Fernando-Checa]

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

[Fernando-Checa]

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

[ryanm7780]

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?

[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

[Ryland0]

Nothing fancy, but suits me just fine.

[S2ciOnur]

Can i get your layout.yml?

[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);
}

[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!