This Homelab Dashboard is simple and beautiful!

hey everybody christian here and in this video i want to show you how to organize all your server management interfaces any self-hosted applications and workloads at home and we are using a free and open source home lab dashboard you can simply deploy in a darker container and configure an aesthetic yaml file it's really simple but i wanted to show you this awesome new home lab dashboard because i tried out some other ones in the past for example organizer which looks pretty good and might offer some more additional features and also heimdall which can be configured in the web app itself but to be honest guys i don't need something complicated where i would need to set up user credentials or configure everything in a web ui a home lab dashboard shouldn't really complicate things for me but instead just help me organize this stuff that i'm already self-hosting in my home lab and just be a very simple but beautiful dashboard page to quickly navigate to all the important web uis and maybe see if all the services are up and running and so on and this is exactly what you can very easily do with homer so let's start and let's organize your home lab so this free and open source project it's called homer and you can easily find that on github i've put your link to this project in the description down below and there you can see it is a very simple and easy home server dashboard that is written in html in javascript and you can easily configure that through a static yaml configuration file which makes it very simple and portable to set up and configure it also offers a light and a dark mode theme you could also customize with custom colors and your own themes if you really want to do that but i think the default ones already look pretty cool and i've just used that on my home lab to set up a dark mode dashboard for all my internal services and you might need to run a web server to expose that somehow but there's also a docker container that this project provides that you can easily just set up in your pertainer or docker compose file or even run it in portman if you want to do that and that is very very simple and easy but let me walk you through the setup process and let's configure this dashboard a little bit so you can see what i can do with that so first of all i want to show you how to deploy that in portena and if you don't know portena yet you don't know how docker works and so on i've made an entire video about it so check that out i will put your link to this in the description down below and then i will teach you how to set up portena and how to securely expose that with a trusted ssl certs with reverse proxy so that's pretty cool and you can also later use another reverse proxy to expose the homer dashboard also with ssl certs so let's start deploying this on our local server and i'm already running a container with a homer dashboard you can see it here so let's just add another container and let's call this homer dashboard we are also using the image from the official documentation so i will just copy this one here and paste it into the darker image and now we also need to expose the web part of our container so on the container the port is 8080 but because i'm already using that on the host operating system i'm changing that to ad82 for example but you could also choose any part you want just make sure that on the container side you're always using the port 8080. i know we also need to set up a volume because we want to persistently store the configuration file and all the other assets like images and icons for our entries here in a persistent volume or host operating system so you could in theory also use a volume here to store that on the host operating system but because then it's not really easy to access the folder and add any configurations or other assets into the container volume here i would strongly recommend you to go with a bind volume here instead and just put this somewhere on the host operating system where you can easily access the configuration file from outside so inside the container the path is 3ws assets and on the host operating system i want to store that in my personal home folder and create another folder that is called home or test for example and so now i also want to set up the restart policy to always and then we could start deploying the container but because i was having some problems with permissions when i store the volume on my personal home folder we also need to change the user in the group identifier in the environment variables because by default homer is using a different user id with something like dark http on user idu 911 or something like this and because i want to make sure that the container is using the right user permissions to have access to the files that are stored inside my personal home folder we also need to change the user to my user account on my home server the group as well and also the user id and the group id should be the identifier of your user that you are using on your host operating system so if you don't know that number just open your terminal access your home server and just type in id and that will tell you the username the group name and all the identifiers you need so now we are ready and we can start deploying our containers so let's do that and on my homelab server let's go into the homer test folder and let's see the configuration files that the homer dashboard should have written to our configuration file and you can see there is a config.yml file which contains all the necessary configuration for our home lab dashboard there are some example files and you could also add other custom ones as well so how you can edit this configuration file if you're on your home server in a terminal you could use a vim or text editor to edit this configuration file but because this is not really easy and i also want to easily copy drag and drop some assets i'm using visual studio code to edit any files here on my home server and i'm using a cool extension that you can use to remotely authenticate via ssh to another machine and access the project folder from within visual studio code so make sure you're going to the extensions and install the remote ssh extension and if you have installed that you can click on that small icon in the bottom left bar click on remote connection and connect to an ssh host so let's open the homework test folder natively work in visual studio code with a configuration file and if i save this file this should be automatically updated or uploaded to my server so if you're running into any permission errors make sure that you have set the user and the group id correctly in the environment variables of the container and it should match the permissions that you're using with your remote ssh connection as well because otherwise you might run into some permission errors here so let's start opening the dashboard by opening another browser tab here and when i access my home server here on that port 8082 we now should see the homer dashboards and this already looks pretty cool because it should use the system default for a light or a dark theme here you could also switch it with this button here and switch from a light to a dark theme or you could go with the default system settings in your operating system which is pretty cool and you can see there are some example entries here there's a cool title bar there are some links here you could use for a github account or for any documentation pages you want to drag on that bar here there's also a demo message where you could integrate some other endpoints and some apis you could display some dynamic messages here i will show you that in the configuration file and now you can define which different applications services or workloads you want to display in specific groups and this is really nice it's very simple but let's start customizing this so let's take a look at the config.yml file because this is a really great example you can basically just go through all of this stuff and start customizing this so for example here you can modify the title for example let's call this the digital live dashboard and the subtitle should be home lab whatever and we could also change the logo png file inside here but it's looking pretty nice we can also change if you want to display the header or not and you can also change the footer of this page here for example let's set this to false because i don't really need that and now you can see there are also some optional theme customization so for whatever reason you want to change some of the colors here inside you can just go here and change all this stuff and here we have our optional message so you could also query a url here for example if you want to display a message from an api or something like this you could also access this and display something dynamically with that if you don't want to do that you simply can't just remove this one here and then the message should disappear so because i'm already auto saving that file in visual studio code let's just reload the page and you can see that the message has been gone so now here you can edit the links inside the title bar you can change the url the icon or the name and the icons are based on that font awesome library so if you want to change that you can just go to the official homepage of font awesome here and search for specific icons so for example if i want to display something like a home icon for example i can just search for that here in the font awesome and i could just copy this identifier here so the class will tell the homer dashboard which icon you want to use so you can see that refers to fasfa-home so let's go back to our configuration file and let's change this to fas fa home for example and if i now go back to my browser window and do the reload you can see that this icon has changed to a home icon and what you now can simply do is go through all of your services and workloads and just change the url copy and paste some of these examples here and easily customize this i i think i don't need to rock you through all of this simple stuff here because you can easily figure out yourself how to do that as i said it is very very simple and just to demonstrate how that works in my home lab i've just created a simple page where you can just go to my github page find my boilerplates github repository go to my dot files for example and i already added everything that i'm currently running in my home lab and if i have some other program or service i want to add here i simply can just go to the yaml configuration file and add it here so i hope this helped you a little bit to find out how you can organize your home lab stuff in a very nice and clean dashboard but now it's up to you guys so let me know in the comments what you are running in your home lab and how you're organizing it and if you would want to watch more stuff about my home lab and which projects that i'm running i created an entire playlist about setting up my home lab server as well as the nas starch system with trunas the surface actually firewall and much more so check it out i've put your link to this playlist in the description down below so thanks everybody for watching and as always take care of yourself and i see you in the next one bye bye and this is just awesome right it's it's like we are all a community of tech enthusiasts and we are of course we we like linux we like freebsd and all but we don't force anybody to have the same opinions like we do and i think this is really a friendly peaceful and respectful community and i just want to thank you so much for that because this is really awesome

Channel: Christian Lempa

Views: 125,767

Keywords: homelab dashboard, homelab docker containers, homelab server, devops homelab, heimdall application dashboard, heimdall dashboard, business intelligence, eigene startseite erstellen, home server, proxmox deutsch, self hosted, self hosting

Id: 9iTPm45EmxM

Length: 10min 27sec (627 seconds)

Published: Tue Sep 07 2021