 Hey, folks, in today's episode of Code Club, at long last, we are going to post the visual that we made in the last episode of Code Club up to the internet so that everyone can see the beautiful visualization we've made indicating the level of droughtiness across the world over the past 30 days. To do that, we're going to be using GitHub. So I'm going to start here in VS Code for today. If you want to get a copy of my entire project down below, there is a link in the description to a blog post where you can go and get all the information you need to download that. I've also got a video I'll link to up across the top of the screen here showing you how you can use that information to get caught up for where we are, because I think you're going to find what we do in this episode in the next to be pretty slick and pretty cool way to disseminate our research. So what we're going to do is I'm going to start by creating a new file that I'll call index.html and here I'm going to say hello world right and I'll go ahead and save that we're going to do more with this file before it's all said and done but that's pretty good for now I've got my terminal open now and you can see that my main is red because that index file is not being tracked so I'll go ahead and do get add index.html get commit and I'll do hello world and then it doesn't like that exclamation point so I will go ahead and to get commit hello world without the exclamation point and then I'll go ahead and push that up to my repository coming over to GitHub where I have my drought index repository off of my Riffamonus project you'll now see if I hit refresh that we sure enough have index.html it has hello world in it so we can use github to host websites for us if you go to the Riffamonus website if you go to my lab website those are all actually generated and hosted on github we're going to do something a lot like that I'll be it a little bit different we're going to use github to host a website for us so to do that I'm going to come over to settings here on the right side of the menu of my repository and then down this left side where we've got the menu the option for pages this now is github pages is designed to let you host your personal organization or project pages from a github repository and so I'm going to deploy from a branch and this is going to be my main branch and then the branch that we're going to work off of is main and we'll do it from the root of the project sometimes people will make a directory called docs I'm going to put it in the root so that's pretty easy to know where it is and to work with go ahead and save this so this tells me that it's going to be hosted off of riffamonus.org so again if I do riffamonus.org forward slash drought underscore index I now have my hello world page right so the index that I had here in the project root is being displayed and rendered here at drought index so drought index is the name of the repository off of my riffamonus account and if you don't have a custom domain like that that's fine you might have something that would probably look something more like riffamonus.github.io again riffamonus.github.io as you can just see maps to riffamonus.org so if you're like sally smith you might have sally smith.github.io as the URL and then the directory that it's off of is the name of the repository so okay again this case it's drought index and then index.html is the page that is rendered when you go to that site right so if I did like index.html again it's the same thing very good so now we want to improve upon this so how are we going to improve upon this well we are going to use rmarkdown to create an index.html file for us that includes our visualization so I'll create another file that I'll save to be index.rmd and this again as you see is an rmarkdown document it knows that it's an r file and so oftentimes when people work with rmarkdown they're doing it within our studio we could certainly be doing that but I'm doing something a little bit different here right so we're doing it in vs code and so we can start by putting in yaml and so yaml is the header that goes at the top of an rmarkdown document and so I could say title and I'll say drought index for world author and we'll do pat schloss I'll do email address I'll do pat at riffamonus.org and I'll do github repo and I'm gonna go ahead and grab this url and plop that into there and then I also want to do output and I'll do html document and so what that means is that when we render this document it's going to output it as an html document you can also output it as a word document or as a pdf you can also do books you can also do slide decks all sorts of great things but we're going to do something simple with an html document okay so we'll go ahead with that as the header for our index.rmd file I also want to insert my image right and so to do that we can use markdown and so to insert a static image we can use this exclamation point square brace and then parentheses uh and inside the parentheses put the path to our visual which is invisuals world drought .png so I'll do visuals forward slash world drought .png save that and again that's going to insert a static version of that image now you might be saying well why didn't use rcode within the rmarkdown document to do this well I prefer to keep things separated as much as possible to make the computational load of each step as easy as possible right as you'll see we'll go through this and we'll try to make our web page as simple as it is look more and more sophisticated with each step if I were to kind of do all these tweekings of changing font sizes or changing margins or all these different things then I would have to be regenerating the figure each time and that would take a long time instead if I generate the figure previously in the pathway in the pipeline I can then use that as a dependency to build out my index.html file so we'll go ahead and save this in my terminal I need to install our markdown so let's double check what environment we're in we'll do kanda env list we're in the base so let's go ahead and do kanda activate drought and again if we do kanda env list we'll see that we're in the drought environment and to install that to remind ourselves I could do mamba install hyphen c kanda forge and that's the channel that it's going to look for the rmarkdown r package and for r packages they all start with r hyphen so we can do r hyphen markdown like that and it tells us that everything's already installed I think that's probably because our markdown comes with the tidyverse just to double check though I'm going to go ahead and inside of my environment.yaml file in here I'll go ahead and put r hyphen r markdown and I'm not sure what version it's using here so I think what I'll do is double check things by coming over to google and do kanda forge r hyphen r markdown and click on that and we see that it's up to 2.17 right so we'll go in here and do 2.17 save that and then the next time we burn down our environment and start it back up again we'll be sure to have that version I'm a little bit worried that it wasn't installed with tidyverse that I may have installed it accidentally along the way anyway we'll be in good shape there okay so to render our index.rmd file what do we do well we can use r and so r typically when you run it like that will launch us into r like so but I don't want to do that so what I'll do instead is r hyphen e and what that means is execute what follows in quotes right and so I'm going to do library r markdown like that and then so that's going to load r and the first thing it's going to run in r is library r markdown and then I can do render and then in quotes and I'll do single quotes because I've got double quotes on the outside right I'll do index.rmd single quote to close that and double quotes to close the entire thing and of course that outputs index.html which we see here now so if we look at index.html this is clearly an HTML file right and it's got all of the goodness of the png file in there as well and so I can do open index.html to open it in a browser and there we go we have a web page created right we've got our visual we also have a title and my name and all that other good stuff so there's a couple things that I would like to do to modify this further I want to get rid of that title and my name if anything I want to move my name down to the bottom and perhaps say like this visual developed by pat schloss something like that and I want to make the whole page black and I want the visual to really use the entire space of the HTML page of the web page right so how do we do that well let's come back to our index.rmd file and in here I'm going to go ahead and create a code chunk and so if you're not familiar with our markdown it allows you to combine output from code chunks that you run as well as inline code with text and visuals and links and all sorts of stuff using markdown which in some ways a lot simpler than full-fledged HTML css so I'm instead of putting in an r chunk I'm going to put in a css chunk inside this css chunk I can define css code styling for my html there's also a way to have a separate file to provide the css but I find it's easiest to have that css chunk right up in the top of my rmd file so I'll start out with body and so the body anchor defines the entire body of the web page and so I'll then do background hyphen color and let's do black and then we'll do color for the color of the text to be white with a semicolon there and so again we'll go ahead and rerun all this great trust me we're gaining on it we now have a black background to our web page we also have the code chunk in here and so what it's doing is it's echoing out the contents of this css code chunk and so I can turn that off by doing echo equals false save that go ahead and re-render it and now that code chunk is gone I don't quite know if there is an id or a tag that is being used for these these titles and names so if I right click on it for inspect so what this shows me then is that for my title it's got a class of title and for my name for the author there's a class of author and so I can turn off the display on those two classes so then back here I can do dot author comma dot title and then within that I can do display none and that should turn off the display of my name and the title so let's go ahead and try this again so again my name and the title goes away again I just want to point out that there's a lot of iteration that's going on here to make things look right I certainly don't want to be waiting a few moments for the visual to re-render itself it's so nice that I've already generated that and that's just one more component to the overall webpage the next thing I'd like to do is to use the full real estate that I have across the webpage so I'll go ahead and right click on this to inspect and if I look at the body the nice thing is that as I hover these different anchors it tells me what basically that corresponds to by highlighting something over on the left side of the page right and so again these were the tags that I just ignored right the title and the author and if I look here that's container fluid by default our markdown uses the bootstrap framework so container fluid is part of that main container is another class that we can modify so again I'll come over here and do main dot main container and so then to main container I'll do max hyphen width and I'll do a hundred percent with the semicolon at the end let's get some spacing in here save that and we'll re-render it and so now that uses the full real estate of the page and what you'll notice is that as I shrink it down the size of the page the figure shrinks with it so that's pretty slick great so the next thing I'd like to do is put some information in the lower left corner about who I am how I generated it and how people can get a hold of me also I'd like to put in some information about the last time this page was updated so again I can come back in here so I'll say site developed by Pat Schloss all right and then I'll maybe also add up here like last updated on 2022 hyphen 10 17 all right and let's go ahead and see what this looks like before we take the next step so we'll go ahead and render that and so we can see last updated there so it's our markdown doesn't recognize line spaces unless we force it to so if I put two spaces at the end of a line that should recognize that there's a line break there and so sure enough we now see that there's a line break at the end there so I'd like to add the GitHub repo over developed and my email address over Pat Schloss so to go ahead and turn these into hyperlinks I can wrap developed in square braces then put parentheses to the right of it and then my name I can also do the same type of thing so to get the address that we want developed to be linked to I'll come back up here to GitHub repo and then in here we're going to use some special notation and so we'll start with a back tick R and then after the GitHub repo I'll put a back tick and so this is an example of inline R code basically within this line of text it's going to inject the output of running R now running R GitHub repo won't get us anything but what we can instead do is R markdown colon colon and then metadata dollar sign GitHub repo so this R markdown metadata will go up to the amel it'll identify the variable the directive called GitHub repo and then because that's all baked within this inline R code it'll insert that there so let's go ahead and save that we'll render it and make sure it looks like we hope it would and so sure enough when I hover over developed I see that I've got the right URL down there good so we're going to do the same type of thing but for my email address right and so here we'll do mail to colon and then instead of GitHub repo we want email address and so we'll plop that in there save it render it it will be good and so now you see that if I hover over patch loss we get mail to pat at riffamonos.org and like we saw before for developed very good so the next thing I want to take care of is this date because I've hard coded the date in here so to do that we're going to do something a lot like what we did here with this inline R code and to do that we need lubricate so we'll put a code chunk in here and we'll do R for an R based code chunk and I also want to echo equals false to not echo out the library lubricate right so that's good and so then here I'm going to again put in inline R code which we've seen I can do back tick R space and then a back tick and so then within this pair of back ticks I want to insert my function call so I'll do today with the open and close parentheses so we do have the date but we lost our line break we've also got some messages up here at the top so I'm going to go ahead and it looks like I only have one space here let's go and put two spaces in there at the end of that last updated line and then I'll come back up here and I can then add message equals false that should turn off those messages being outputted to the web page we now got rid of those messages and you can see that we've got our line break back in there then one of the final things I want to do is let's go ahead and make this font a little bit bigger so it's easier to see and we're not squinting so closely to see what it looks like to do that of course we'll come back down to our CSS and we have our body here so because that's the only font on the page I'm going to embed my font size here into the body and so I will then do font hyphen size and I'm going to do 1.2 vw so that vw is a way to dynamically size the text relative to the size of the viewing window so let's go ahead and save this and we'll take a look at what that does so I feel like that's a decent size font and as I rescale this you'll see that the font here gets smaller with the size of the page if I'd used something like em then it would have been a constant size and it would have been that size even if it was this small like say when the size that you would see on like your phone right and so I like having that dynamic size of the text for what we have down here in this footnote so that looks great I'm pretty happy with the appearance of all this you know one thing that I might think about doing I'll go ahead and do that is if I come back to code and if I look at my plot then in here for this color for a gray I had this set of f5s I'm gonna get rid of this I'm not sure what's going on there so I'll go ahead and replace that white with my hexadecimal save it and let's see what we look like again it's hard to tell the difference between that and white but that color matches the colors for everything else and I'm okay with that blue color for the hyperlinks so now we want to go ahead and make a snake make rule to render the index page so I'll come down to the bottom here and do rule render index and our input will have two inputs right so we'll have index.rmd that needs to be in quotes and then we also need our visuals the world drought png file so we'll do visuals forward slash world drought dot png put that in quotes I'll call this rmd and this my png good and then our output will be what that will be index.html right and so then I'll go ahead and grab this shell statement so I have to modify this a little bit I'll go ahead and copy this line that I've been running from the command line and replace this input r script and instead of index.rmd that works fine but all alternatively go ahead and put in curly braces input.rmd save that and I want to include this index.html back up here at the top go ahead and save that and so now we can do snake make let's do hyphen hyphen dry run it says everything's up to date um let's go ahead for now and remove index.html try that again and we see that it needs to go ahead and render the index as well as the targets rule so we'll let it do that with hyphen c1 that all worked well and again if we do open index.html we see the webpage that we'd hoped would be there cool so now we are ready to commit and push our changes up to github so again if we look at what we've got we've got all this I'm not totally sure what's going on with that .vs code I don't think it's important so I'm probably gonna add that to .getignore so let's go ahead and do that here in here I'll do .vs code forward slash and again if we do get status we see all those things that need to be added and then committed so I'll go ahead and do get add period get commit and then we'll do generate pretty index page all right and now we can do get push so we can see that with the push we now have index rmd and index.html and so we see the html that has been updated with the stuff that we just worked on so that's good if I come back over to my index file and I try to refresh it voila again we're up at riffimonas.org slash droughtindex.index I don't think I actually need that index.html and that will represent and that will show us our visual so again we have used our markdown to generate a web page that github is displaying for us again this is another benefit of making your code open and available and using great tools like github is that we can use github to post web pages for us it's it's really slick and we can use our markdown along with it to achieve that end so this title is a little bit of a lie because these data already are about a week old and so the next thing that I want to do is go ahead and re-kick the snake make workflow to pull down fresh data and to start over and to regenerate this figure that is truly updated for whatever day it is because ultimately what I want to do is have this updated every day but I don't want to have to do that every day I want to get github actions to do that for me so that is exactly what we're going to do in the next episode I will show you how we can take the workflow that we've been developing with a few little tweaks here and there to get github to refresh this every day at the same time every day so that we can check in the website and see what the current level of droughtiness looks like across the world and for my neck of the world so that you don't miss that please please please make sure that you've subscribed to the channel you've clicked that bell icon you've given this video a thumbs up and by all means if you like what we're doing spread the word and please tell your friends about what we're doing all right take care and we'll see you next time for another episode of code club