Homepage - An Open Source, Self Hosted Informational Dashboard and Bookmarks Organizer.

foreign [Music] Advocate and I'm back with another video and today I'm going to talk about home page now if you know me you know that I've been using Dashi for quite a long time talked about Homer and I've talked about Heimdall I wanted to cover another really nice start page a link page whatever you want to call this now people always ask why do you have that why couldn't you just use links so if you look I do I use links like crazy okay I do use links in the browser like crazy but a nice start page is about my services so I get more information out of this than just a link to my pages in a lot of cases you can see the little green dot that tells me my service is actually able to be reached which means it's up and running right now at the very least doesn't mean it's functioning correctly but it gives me a little bit of information I also get the time and the current temperature which is probably not accurate there we go 101 degrees today a little bit warmish so you see kind of what we get out of something like this so I really like Dashie I've enjoyed Dashie for a long time I support it on GitHub financially just to help keep it going but there are some other really great options out there and some people just may want to try something different they may want to try something else so homepage is one that some of my viewers have brought up multiple times to me at this point and I thought you know what it's time for me to cover this and see what you guys think so if you get a look this is kind of a screenshot of what it's going to look like and once you've got it set up of course it could look quite different as well they've got some other screenshots here on their page that you can look at to see what all they've got going on and then of course they've got a list of their features which is pretty extensive they've got support and suggestions and places where you can go to make those support requests and make suggestions they've got your getting started which is what we're going to use with our Docker compose now if you want to just do Docker run you have that option here as well and if you want to use node straight up you can just use that you do not have to use Docker I know a lot of you guys always say I don't want to use Docker I just want to put it on my system here's your option here's the here's the option to run it with just node you just go do a git pull and run it with node if you want to do it that way as well they have a little bit of configuration information if you want to help develop it and you're a developer and you know how to do some of this stuff or if you're just trying to get into development you want to you know throw your hands in there and say let me see what I can do then here's your options for that as well so really cool and if you look up here I always like to look kind of let you guys see this but you can see six hours ago I mean this is some pretty recent stuff that they've been doing uh very useful to see that let's go look at the license here real quick um we're gonna just kind of check that out as well so if you look here's the new general public license version three so this is a fully open source project which is great this is what we want we always want open source software that's the best thing you can get it means anybody can grab it they can make it better they can share that back with everybody else you can take it you can make it better and share it back with other people you can share with your family and friends without having to worry about somebody coming to your door saying hey you shared my stuff that wasn't right why did you do that this is what they want when they give you this type of thing I'm trying to remember to point out on these projects that I bring to you guys is how you can support them in in a financial way because again if out of a hundred thousand subscribers that I've got on this channel now if each of you just went and donated 50 cents to this guy he would have fifty thousand dollars to encourage him to keep going with this project for the next year so just keep that in mind if you can afford a dollar go go give them a dollar if you can afford a pound if you can afford whatever your currency happens to be a little bit of that really goes a long way and makes a difference to let them know that we appreciate what they're doing so it gives you a few different ways over here on the right side panel and the link to this page will be in the show notes in the description as always but you can go here and support them in a few different ways so just pick the one that seems to fit the best with you and definitely go do that if you like this project and you would like to keep seeing this project moving forward I think it's so valuable that we have the ability to give something as small as a dollar and still make a difference or maybe as big as a hundred dollars or a thousand dollars whatever you've got if you find Value in something make sure to let the people who make that product know that you find Value in it by supporting them and making sure that they understand that what what they do is important to you all right we're gonna get an installation of home page right after this I want to say thank you to all of my subscribers and all of my patrons over at patreon seriously you guys make this so worth it for me to do these videos every week I really truly enjoy it and I just can't say thank you enough if you're enjoying these videos subscribe let YouTube know that I'm doing a good job by subscribing to the channel plus you'll get notified when I have new videos coming out and finally if you're enjoying what I'm doing give it a like just click on that thumbs up and that way YouTube knows that you like it and they'll pass it along to other people that might enjoy my content as well I really appreciate it thank you again let's get started as always we want to use Docker or Docker compose if possible to run our applications and the reason that I say that I know a lot of you are not super wild about Docker but I love Docker because it lets me containerize that thing it lets me run it on the same system as I run a bunch of my other services and it keeps it completely separate from those Services if I don't want them to communicate which means if I mess it up I can just go destroy that container and none of my other services are affected they don't ever know it was there and they don't even care they just keep running it's really great it's not throwing a bunch of different things into my file system where I have to go clean them out and figure out where they went I really get to control it down to the very last bit of where everything goes and it lets me keep everything together and let me back things up very cleanly and if something catastrophic happens which has happened to me it lets me bring things back up very fast which is awesome so I really appreciate the way that Docker works and what it provides to me if you're one of those people that says I don't like it because it's a black box that's not true you can actually see what's going inside of going on inside of your Docker containers by just jumping into the Container in your terminal and looking at all the same things you always look at it's kind of like having your own little contained mini machine running inside of your host system that said we're going to scroll down here to where they have the docker compose and this is a type of service that you generally just want to run on your inside Network it's not something you want on every computer you ever log on to but if you do you can absolutely set this up with a reverse proxy you'd want to put some kind of authentication in front of it I'm sure so that other people aren't trying to attach to your different network items and things like that but this isn't going to let you see everything inside of your network that's running from some outside machine unless you've got some kind of wire guard or some other tunnel setup that you're accessing everything from so be aware of that this is really something meant to run inside of your network that you you jump on and you see it just like this one here where if I want to go and check out my remotely install I just click on it and it opens up my remotely install now this does run from a URL but if I didn't if it was something that only ran local like my portainer for instance then this is what I would get and if I try to do this from anywhere outside of my network and not on a VPN I wouldn't see this page it would just tell me I couldn't find it so just kind of understand that as we move forward with this so I'm just going to grab this and I'm going to copy it and I've already got my terminal open and I have SSH over to the server that I want to install this on so I'll just show you that right now I have this Docker folder that everything is installed in I know there's a lot here but this Docker folder is where all of my Docker applications are installed right now what I'm going to do is create a folder for home page so I'm going to do mkdir- p and then I'm going to type Docker slash home page and what this says is make a directory and if this folder doesn't exist create it for me if it does exist just use the one that's there next it jumps to this one it says and if this folder doesn't exist create it for me if it does exist then use the one that's there in this case we know it doesn't exist that's why we're creating it when I hit enter everything gets done automatically and again if I do an LS you'll see I still just have that one Docker folder but now if I see the end of that Docker folder and do an LS I'll have a home page folder right here so we can CD into that guy and if we clear that out and do an LS you see there's nothing in here yet so we're going to say Nano Docker hyphen compose dot yml this is a file we want to create and it's empty we're going to do Ctrl shift or actually I'll do right click and paste in this case there we go so we paste in that Docker compose information and we'll go up through here and kind of look at what all we've got so it's a version 3.3 that's fine the service that we're going to have is going to be called home page and the image is right here it's going to pull from the GitHub container repo and it's been Phelps and home page so the name for the container is also going to be home page and then the ports that it wants is three thousand and three thousand now three thousand is a pretty common port for node applications so I'm going to change this to something else it doesn't really matter what you change it to as long as it's important that's not in use on your host system always only change the left side the left side of this mapping is my host Port the right side is the port inside of the container and it expects this application to be running at three thousand so unless you're a developer and you have somehow changed this one on purpose you should never change the right side of this mapping so I'm going to go in here and I'm going to put in let's put in 89.21 it doesn't matter it's just a it's just a port it's just a number that we can use it as long as it's not in use by anything else it's fine so now it says path to config and then it says slash app slash config so what I'm going to do is I'm going to take out this part and I'm going to put dot slash so it's going to have this dot it's going to have this config file and the dot slash says put it in the current folder that I'm in which is the same folder where we're creating the docker compose again I'm keeping everything together inside of this home page folder now this next one says okay I also want to have access to things running on the docker sock so this one we're going to leave exactly as it is there's nothing for us to change anything after the hashtag is just a comment for you so we're not going to do anything there and then finally the user information here if we wanted to do this we could I'm not going to undo this right now we'll see if we need to do it in a minute I'm just going to save what I've got with Ctrl o press enter to confirm and then I'm going to exit the Nano editor with Ctrl X and we're just going to do Docker space compose up Dash D now if you try to do it this way and you get an error you may need to do it like this just depending on what version of Docker compose you have you may have to put a hyphen so Docker hyphen compose up Dash D if you have a newer version of Docker compose it should work with a space this is going to go out and start pulling down everything it needs so it's going to pull down that image that we need for home page shouldn't take very long this is the biggest file here about eight megabytes look like there's a couple of bigger files but that's it and everything's running now if we want to see what's going on while it's trying to start up we can do Docker space compose and again if you have an older version you might have to do Docker hyphen compose but then we can do logs space hyphen f so it tells us right there it's listing on Port 3000 but remember we changed that to 89.21 in our case so we're going to go to that one so there's not a lot of logging going on nothing seems to be messed up we'll Ctrl C to get out of the logging and if we do LS you'll see we've got this config folder so let's do CD config and then do an LS there's no config file in there yet so we'll probably have to create one but that's it we've got everything installed everything is running now we're going to do some configuration to make our site come up if we go to our browser we open a new tab and we go to the IP address of that server now in your case if you're on the machine where you're installing it you do localhost if you're not then use the IP address of the machine that you're installing it on and the port is 89.21 so this is going to load up it's got some Base information some base stuff there but really we don't have a config set up yet so it's got it shows us groups second group third group a few basic things here that it's trying to read so we've got a little bit of information to start it's got a search bar up here which is pretty nice and a little bit of uh just kind of basic information in the bottom right so everything's running the next thing we need to do is figure out how to configure this thing now that we've got home page running the next part is configuration and configuration is done through configuration files so to get those configuration files created if you'll remember to get those configuration files created if you'll remember I looked at it while ago in the terminal and there was nothing in the config folder but once you actually visit your home page for the first time it generates those configuration files so now we can see several configuration files here there's also some logs if you're having issues so you can kind of figure out what's happening and there's a lot going on here that you kind of need to understand so there's this bookmarks.yaml that's going to be this section down here so that's where you set up these different bookmarks here at the bottom then you've got the services.yaml that's this one here and that is this section on the screen here above the bookmarks okay and then you've got a few other things that you can set up as well so you've got some different settings that you can set but uh you know nothing special to set there widgets so this is some of those widgets up at the Top If you look up here you've got your little widgets right here so you've got a few different things that you can set up now there are some settings and I'm going to warn you this is going to go bright for a second I'm just going to show you the daytime mode so I'm just going to flip this switch so you get kind of a day mode if you prefer the non-dark and then switch it back if you want the dark and then over here you've got some color settings and things like that where you can pick some different colors you can switch it to a different blue or you know kind of any any color you want that's a really bright white but it's got white background so I kind of like this one it's it's pretty pretty deep and dark which is great that's a little easier on my eyes but if you like the daytime modes you do have that option as well so we're going to go in there and actually set some of this up and kind of play with these configuration files so these are yaml configuration files which means they are space dependent you don't want to use tabs you always want to use spaces and things need to be indented correctly so if you run into issues uh websites that will check your yaml code to make sure that everything looks right and can give you a better feedback sometimes than what you get from this will will really help and then you know a little bit of Googling if you have to but as you get used to it it gets pretty easy to set up the ammo that's how your Docker compose files laid out as well so just kind of keep that in mind but there is no graphical user interface based setup unfortunately which is something I really really like about Dashie is that I can just go into the Dashie and edit the actual file the way that it looks the page and everything in the user interface I don't have to go use the configuration files I can if I want to but it does have a graphical editor which makes it easier for me to lay things out and figure out where I want stuff and know how it's going to look when I'm done the nice thing about this one is that it does update kind of automatically on its own as you make changes so we'll go in and we'll do sudo and you have to do sudo because if you look ls-al um these things are all owned by root so we can't edit them just by default so just remember these are running inside the container we just have them linked or mapped so that they don't go away if we reset and upgrade a home page or anything but just remember that they're owned by Roots we do have to use sudo to adjust those things we'll do sudo Nano and we'll do the services first let's do that one first and if we look in here you can see they've got this group setting so this first group second group and then they've got the service name and then they've got a a link basically and then they've got a description if you want to give it that so if we look at the page and just see what it looks like here's your here's my first group which is kind of the title my second group my third group and then here's the service name and then here's that description and if you click it would try to go to localhost which I don't have anything running on localhost so that doesn't help me but I can change those things to work the way that I want so I'm going to go down here and I'm going to rename this let's rename this something useful so let's call this servers let's call this home servers home servers how about that and instead of my first service I'm going to call this uh Aria which is my main proximox server and I'll go in here and just edit this thing and we want to make that https that's good so that's 192. I believe that's the right address there and then we're going to call this something different so prox MOX server and we'll go down and we'll actually just take that and one two three four hyphen and then we'll give it a space and we're going to give it Bia which is my other proximox server we're going to put a cool in there we're going to go out six faces or eight spaces let's see eight I think and we're gonna do href colon https colon slash slash 0.29 and this is the same port number and a slash and the description again you don't have to give it a description you can if you want to but testing proxmox server something like that and then we could give it more we'll go down here and change the second group up real quick here as well let's call this um social or actually let's call this home management and we'll give this one home assistant and we'll give it the address for that which I think is one of two it's either that one or we should be able to just also do home assistant.local if I spell things correctly it will help and then colon 8123 that should also work and we'll call this home automation and let's give this one another one as well I'm gonna give that one a description we'll just leave it like it is let's just see how we do with that and then we've got the third group that's default and actually we're going to add a fourth group just so you can see that it changes and we won't even give it a description so we'll make sure we have one last line control o to save and we're going to press enter now it should update yes oh I have a mistake somewhere ah yes okay we'll go fix it that's probably good so it shows you when you have a yammo mistake and this is telling me that I have one and you have to have a colon after the service name so make sure you put a colon on those I'll save it again and we'll go back to the browser and it'll refresh there we go so we've got three groups with different items here and there's my fourth group right there and we can actually click and this should try to find my home assistant uh maybe my DNS is not working I can always go back and put the IP address let's see about my proxbox server there we go yeah proxbox is working and the other one everything's working great so this is how you can create these things you could probably do another column these are pretty wide given what I'm putting in them there's nothing really do an LS we're still in the config file so if we just go back one level here into our homepage folder what it is I moved all of the PNG icons that I have from the dashboard icons GitHub repo into the same folder where Docker compose is and where the config file is so we're just going to go to CD config again and we're going to do sudo Nano services.yaml and we'll go here and we'll add icon and colon and we're going to put dot dot slash which means go back one level from where I'm at which is basically here we're in the config folder so here we're in the home page folder and then use the PNG folder and I want the proxmox dot PNG file and I'll put the same thing on this one icon and Dot slash PNG slash proxmox.png and we'll save and then if we go back and look at our home page there we go we've got our proximox icon showing up on on these guys so we can do the same thing with home system same thing with iSpy and so on and so forth all the way across the board so really um quite a quite a simple way to go and get some things done um really setting up everything that we want for our different Services here so yeah this is pretty pretty easy to set up let's go look at the bookmarks because this is this is a place where I feel like this could be really much more useful to me this is a lot thinner a lot smaller so it lets me put a lot more things if I tried to put everything that I have here and if I zoom this back out to normal size you can see what all I've got I mean I've got 12 here I've got 10 there I've got 9 here 6 6 and 3 and then I've got a few here that are hidden so I've got a lot of stuff uh kind of kind of listed out here and it's because it's pretty small that it all fits pretty well on the screen so kind of trying to figure out how and and if the home page can actually deal with those types of sizes and pages will be useful at some point so I definitely want to kind of figure that out all right we've got everything set up there let's just get out of that let's go look at our bookmark pseudo nanobookmarks.yaml and again you can see a similar setup to what they had before so he has GitHub I can say get lab and I can go here and just change the abbreviation to whatever I want and I can go to get lab.com and I could probably put my user save this and hit enter and then go look at the page and we should see it get updated and it does it says gitlab now instead so if we click on it it takes it to my profile on gitlab which is what you'd expect so pretty simple bookmarking really really not hard to do there which is great and really I could use this for all of my other services as well because these are a lot smaller it might be even a better way to do that if you're wanting information or detail about some of your services or something is really something you use all the time like these you know maybe I would want to put these up here but I think I'd use this smaller section more often if if anything so really some some very cool stuff he's got a lot of great documentation over here so if you're wondering about setting up these service widgets he's got documentation on what that should look like if you're looking to to get the information widgets he's got information about how to set these up and what what you can put in to get them and here's all of the available widgets that he's got right now which is great so again really good documentation so the bookmark section uh if you're looking for Docker information so using Docker TLS you've got a lot of really great information about what you can do with this system it's pretty nice it's very lightweight and it loads up very fast so that's one of the things that they claimed was that it would load up almost instantaneously which is true um very very fast for it to load so I've been pretty impressed and it reloads very fast and refreshes one of the problems I have here is when I want to get a icon to show up um it does not refresh all the time I have to tell Firefox like hey don't cache all this stuff and you have to do some special things in Dev mode so I'm not sure why all the caching happens but it probably to make it load faster but it also makes it hard to make modifications to see those things happen really fast so I really kind of like that this thing refreshes pretty quickly and shows me those changes very fast the color schemes are okay I'd love to see one that's a little bit darker more like this that'd be really nice but I think you can kind of go in and probably mess with the color themes as well if you want to and kind of create your own but yeah this is not a bad project very cool very nice home page very fast very easy to set up as you saw very easy to get going and once you're ready you just go and start editing your config files and you kind of check and see how things go as you're making changes just save and it'll pop up and actually if you have two monitors you can set your browser on one side and your configuration file on the other make a change and watch it change over here when you save and that way you can kind of see what you're building out as you go and make sure everything looks the way that you want so that's homepage I hope you guys enjoyed this if you did like subscribe tell your friends about it so they can come along on the open source Journey with us and I'll talk to you next time foreign [Music] Source Advocate and I'm back and I've set up a store with a little bit of merchandise I love being your open source Advocate but I want you guys to be the open source Advocates with me so if you want to get out there and get some of this stuff and if you do let me know what you think of it thank you for subscribing

Channel: Awesome Open Source

Views: 34,734

Keywords: open, source, opensource, open-source, self, hosted, selfhosted, self-hosted, free, libre, software, server, web, internet, browser, linux, mac, macos, os x, windows, microsoft, unix, bsd, ios, android, pi, raspberry, desktop, vps, tutorial, how to, setup, installation, instructions, cli, command line, terminal, interface, network, networking, news, projects, homepage, home, page, dashy, homer, heimdall, design, designing, dash, dashboard, overview, monitor, monitoring, status, system, services, bookmarks, bookmark, collection

Id: 3Ux7zfCCM1A

Length: 25min 34sec (1534 seconds)

Published: Tue Sep 12 2023