Building a website using R {distill}

hi everyone my name is lisa lenway and i'm going to be talking today about building a distill website um so i have this to-do list sort of thing open because i actually tried to make this video the other day and i got bogged down in some parts of this so i want to make sure i um sort of continue in a reasonable way and don't let myself get stuck so the first thing i want to do is acknowledge all the tabs that i have open on my computer um so let's see i'm trying to think the best place to start so maybe i'll start with this and i'll put all of these my first blog post is going to be about uh creating this website so i'll put all these resources out there so the first time i sort of really uh maybe had a little bit better understanding about how to build a website was when i watched um this webinar by allison hill and desiree de leon if you haven't watched this yet you should go watch that before watching this video because it's super informative and super helpful and then they also i think this is the right tab nope this is just alison's web webpage they also have resources i forget where they are but i'll put that on the blog as well they have great resources that go along with this video um i have allison's website open because i think her website is wonderful i have a couple other websites open um these um most of these i think oops not that one are from um the example sites page on the uh in the distilled documentation um and then i think so there's some great examples hope that hopefully they don't mind that i'm showing them and then i also have a lot of these people's corresponding um github pages open so i can look at their code you can see i've been digging into some of these css files i have the distill for our markdown page open i have this example page i have this reintroduction i have uh allison's notes from a presentation that i believe she just gave last night so that's super convenient um i also have the video that i just watched of that presentation and then i have the netlify page open which i'm going to be talking about um in just a little bit okay so um and i'm probably going to do this a little bit differently than other people would go about creating this so you know i would love to hear how other people do this sort of thing but the first thing i'm going to do is start with a github repo because i'm trying to get in the habit of making repositories for oops um for well all my projects so um i'm not used to starting on this uh spot oops sorry okay where's my new repository button this is a little bit embarrassing um hello oh there we go i'm used to starting from a different page um so i'm going to call this um we're going to keep it simple i'll call this lisa lindway underscored distill and i'm going to do what i usually do and add a readme file and i'm going to choose a license and i'm going to choose the creative commons and i really ought to learn more about what these various license are licenses are i haven't done that yet so someday so i'm going to create this repository which for right now is going to be very boring i am going to copy that link and then we will jump into our studio and here i am going to do a new project version control git paste that there and i'm going to put this in the indicated location and i will create a project great so then i'm gonna reference my little cheat sheet i've got here okay i've done one two and three um i'm gonna load the distill library so if you don't have it installed you should certainly install that first and then i'm going to use the create website function now this is where i think i'm doing this in a bit of a roundabout way and i'm sure there are better ways to do this um because this is like well i'll show you in a minute um i'm going to just have my title be my name okay so this is going to create some files for me um so what i um let me just see here okay so the reason i don't like the way i've done this is because i actually want everything to be inside of this lisa lendway underscore distill folder but it has now created this website folder um so i'm again i'm probably doing this in an extremely roundabout way and i'm sure there's a better way to do this um but this is what i'm going to do i'm going to move all these files up a level so i'm going to move all of these just to distill you can see by the way that i tried to create a blog the other day and it actually works i just um when i was creating the video i didn't like it so we're starting over again all right so those things all moved um and i'm just going to oops um i'm then going to delete this entire website folder so again i'm really positive that there's a better way of doing this than what i just did but that's okay um let me reference my notes again here okay i'm also going to delete this readme file oops um because when i tried to build this before it would give me errors if i had the readme file in there and again i'm sure there's great reasoning for this i just don't know what those reasons are um and then what i'm looking for i there's code i can type to do this but i really want to have this build tab up here and i don't know if this is true of everyone but it never shows up right away for me um so i just close our studio and reopen it and my computer's being really slow there it goes and usually when i reopen it yep there it is so we're now in here and notice that i now have this build tab so the first thing i'm going to do is build the website and just make sure um that everything looks nice okay um so here it's just popping up out here um i'm gonna open this in the browser just because it gives me a bit better feel um so there's a home that's where i am right now there's an about um and i'm actually going to sort of combine these things in a moment but this is a great start um okay so what did i say next um okay so i'm going to make the home page the about page so i'm going to open up um this site.yaml file and i am by no means a yaml or a css or sort of anything besides our markdown expert um but this sort of tells it how the site is laid out um so right now i can see that my home page is this index file and we need that index file in here i'm actually going to get rid of this other page and i'm just going to um make this be the about page so on that index page i'm going to you know eventually tell a little bit of information about myself maybe here i would do something like um shoot i haven't really thought about a description for my site yet but um maybe this will be um my sort of uh r ponderings i don't even know if that's a word but that's what i'm gonna write for now and i will change that later and i'm going to save that and i believe this also means that i can get rid of this about file kind of curious i guess i haven't really thought fully thought through what i'm doing and i don't think i tested this perhaps i'll need to delete some things but let's actually try to just build the website now and see what happens okay and i'm going to open it up in the browser again so now i have this about tab which um should be the same as my home tab it's just that index file so i could probably delete the about.rmd and about.html files um so maybe i'll do that just to clean this up so i'm going to delete this rmd file hopefully i won't regret that later and inside of site i'm going to delete the about.html file this is more just so i don't confuse myself later on by having a bunch of junk which i tend to be really good at having so i'm going to build the website one more time great and i'm going to open it in the browser excellent boring but excellent okay so um um i'm gonna add a photo um so just um by the way i guess one of my goals here is to sort of build a nice looking i don't want to make this too complicated um but i do want to make sort of a nice looking website um and one of my goals let's see here well i would like to sort of have it themed um so as much as i don't want to i'm going to open this photo of myself keep in mind i am not a photographer so um i have this wallpaper in my house you can see it in the background here that i really like and i really like all the colors that are in it um so i would love to sort of theme at my website using those colors um we'll see if i can do that um right now i'm just going to rename this photo real quick and i'm going to stick this photo i'm in let's see here i can't find where my files went okay there we go um so i am going to put these in my distill website um and i'm just gonna you know perhaps i'm gonna use this one later too um perhaps i should think harder maybe i should put these in an images folder or something i'm just going to leave them here for now um okay so let's see here oops okay so i'm going to just go i don't want to do too much editing i don't think this part is going to be terribly exciting but i would just like to do a couple quick things in here so i am going to go to that index folder um i don't know if i really need any of these um maybe for this description part i will write something like oh i guess i wrote that in the site.yaml didn't i um i'll have to pay more attention about where that shows up i didn't notice um i'm gonna write the same thing here and i should probably find out if ponderings is a word um and then down here i think i'm just going to um you know again i should probably think about like how exactly this is going to look but for now i'm gonna do this and um let's maybe make this i'm trying to think how big this is gonna be i don't know i'll try that um you know maybe i should have something like about me so i will write this part later and maybe i'll have my education on there oh bye i should probably spell education correctly um something like that that's sort of a good placeholder for now i think and i almost press the knit button but i don't need to do that this will be automatically knit when i build the website and it goes into that underscore site folder so i'm gonna let this do its thing and let's see how this looks oh my oh it did that thing where it makes my photo sideways okay well we're not gonna we're not gonna worry about that right now i will oh there oh that's okay right okay well that's a decent start i feel okay with that and truthfully this header um actually looks like a pretty nice colors kind of matches my my theme so i might end up just sticking with that um okay so now i'm seeing my name here lisa lenway my our ponderings shows up there okay so i might want to reorganize this but again decent start so now what do i want to do now i want to create a listing page for blog posts um so first um and by the way um i am absolutely following everything that um allison and desiree talked about in this video so again if you haven't watched that yet you should go watch theirs first because they do an excellent job um okay so i'm going to add a listing page for blog posts so i need a new rmd file with a yaml that just has a title and a listing and the listing is going to say posts i don't think it has to say posts but i'm not positive so i'm going to make it say posts so i'm going to create a new file a new our markdown file um i guess i'll do it this way although i'm going to delete everything here and i'm going to delete all this and i'm going to call the title i don't even know if this matters um and the listing is posts and i'm going to call this file oops i'm going to save this into the same uh lisa lenway underscore distilled directory and i'm going to call this file blog this will be in our markdown file okay and let's go back to my little cheat sheet here where did my window go oh sorry about that okay so all right now i have to model modify the underscore site dot yamo file to link the listing page so oops oh i still have it open over here so we need to tell it where to find this listing page so i am going to put a text oops sorry um okay i think that's right and i need an href and this is going to be the blog.html i think i did that right but i think i also left myself some notes so i'm going to check those notes so add a dash text and href yes okay and then i'm eventually going to add posts um using the create post so let's jump back here and first yes okay okay so um now that i have that here i'm going to build the website again um and i think now that i've done this there should be a blog oh what did i do wrong here oh okay i think it's looking for posts and i don't have any yet oops so it's looking for posts and there's nothing here called posts so um i did i sort of did this in the wrong order i should uh probably change that on my um these two should be in the opposite order so i guess as long as i'm in here i should do that so we are going to oops sorry those were fine i think i need to do this first the ad posts using create post okay so let's jump back to this file i'm going to create post oh maybe i don't have the turn out of the let me just make sure i have distill oops to still i start my computer so create post and i'm going to call this title um building a distill web site um i wonder what exactly that is going to do though i think this also creates an our markdown file let me just i'm going to look at this create post function i want to make sure oops okay let's make sure i have all of this right so author post author okay directory name okay so i think i'm gonna give it a slug um because i don't want it to use this title so i'll call that maybe i'll just call it building distill and hopefully i've done this right okay so apparently i couldn't use an underscore okay that's fine um so i'll change this description really quick and we'll just call this how i built this site using distill and maybe i don't need that because that's kind of in the title but i'll leave it there for now so i'm going to get rid of this and here's here's where i will talk about building this website right okay so now let's make sure that um i can build the website now that i actually so let me just show you that now i have a folder called posts and here's the first one i'm building distill that's the file i currently have open okay so let's build this site and i'm gonna let's i didn't okay so it built it there was some sort of message there in red um oh right and i need to change the size of that photo but we'll fix that later okay uh and i see that blog is in lower case so i think that was my fault um and i don't actually know if i want to call that blog but um so maybe for now i'll just let that be a placeholder um this is looking okay i feel satisfied with what i see um oops you can see i oh shoot this probably is not on the screen i'm sorry just realized this opened in a different screen that was not on the screen you were looking at i apologize so i noticed that blog is in lower case um but again this is just a placeholder for now i can fix those details later okay so i'm going to close this and check my list again so i think that i have the listing page oh and i wanted to add a preview i saw that on let's see here let's see if i can shh this is her website there we go this is the piping hot data website she also built her website using distill this is shannon's website and i really liked when she had her blog posts here that there was um like a little uh preview icon so i do want to see if i can do that part really quick um i think i have her code open to make sure i do that right um so let's see here so i want to add a preview to the yaml heading of the post okay so let's go back here okay so i think what i'm going to do oops sorry i keep losing my why this isn't opening in the right way so i think what i'm going to do is um sort of steal some of shannon's code here and oh am i looking at the see i'm looking at the wrong spot right now so i'm just gonna go into one of her posts and in this rmd file we will see that there's a whole bunch of stuff in here but the thing i wanted was this preview piece my file won't be called the same thing but um let's put that let's see i don't think it really matters where we put this um maybe i'll put it after this so instead of using this icon and i'm realizing something i something else i forgot to do and why i'm not actually seeing any blog posts is because i forgot to knit this rmd file so unlike those other files that are sort of in the main directory with your posts you have to knit each of them separately and that's purposeful so you don't have to so it doesn't keep rebuilding um these html files every time it creates your website um so let's see for my preview um let's see do i have i don't have it open anymore do i i was going to just put us a picture of the blog but um i don't think i have mine open anymore so you know what i mean this is sort of silly but i'm gonna take oops this is not the picture i will use in the end but just to have a picture here i am going to just take a screenshot and let's see here um i am going to save this to my desktop really quick okay so again sort of silly picture to have but let's see here i am going to put this on the right thing okay let me get to my desktop here okay and i am just going to wherever it put that looks like it put it here um i'll rename this this will be my okay great i have a picture there and i'm going to put this in let's see here um so this should go in my posts in that same folder and again i'm sure i could make like an images folder in there but right now i'm just not going to bother to do that so now if i go down here i should be able to see that file in here yep so blog just still photo dot png great okay so i'm going to save this and i'm going to knit this file and then hopefully when i build my site we can actually see this blog post which again right now is not going to be anything all that interesting um so if i go back to build i'm going to build the site again and hopefully i also need to remember to fix that photo of myself so it's a little bit smaller i'm going to open this in the browser and now it's opening in the right one again okay so now when i go to the blog see here there's this preview photo which again i'll change what this is and my title and description are here and i should be able to click on that and that brings me to the actual blog post awesome so this is a really really great start i think i'm really happy with how this is going um okay the last thing i'm going to do um before showing you how i'm going to deploy the website is um i'm going to modify the site.yaml file a little bit more um so i want to um i'm going to add a little logo and i'm going to add some links to my github page my linkedin page and my twitter page so let's um go back to this file and we'll close that for now oops wrong one go back here um so let me remind myself where i'm putting all of this stuff so right after nav bar i'm going to add and maybe i'll just copy this knowing that it might not copy all the spaces quite right so this will show up on the left side of the nav bar okay and then the other thing i'm going to do here actually i want to add i just want to capitalize that word so it matches the others and then i'm going to um add a bunch of these links oops okay so there should be a github linkedin and twitter and these icons are built in to distill so i don't really know a whole lot about those i just know that you can do this well hopefully i haven't actually tried it myself yet building the site again and it takes a little bit of time oops i forgot to shrink that photo again i'll do that later what happened okay i've clearly done something wrong because now i don't have any icons um i wonder what i did wrong okay um perhaps just this image thing okay let's try to figure this out i'm going to get rid of this image thing for a minute i'm going to try adding all those icons trying to figure out which one is causing an error i should also look at some point i feel like there's some message i'm getting over here oh okay okay so something in my icons is broken okay so let's try to figure out which thing is broken so i'm gonna get rid of these for now i wonder if it's something with how i copied and pasted and stuff i probably shouldn't copy and paste stuff in here it's probably not a good idea um or do these things do they maybe need to be in quotes it's possible i did this wrong let us go look at somebody else's stuff right um okay so that looks similar and let's go back to this one um okay hmm i wonder if there's something okay i'm gonna um i mean those seem to be what i'm seeing in other people's sites i'm going to try to get rid of this stuff for a second and then come back to it i could definitely see it being that i've copied and pasted something incorrectly so i'll see if i can get either of these things to work okay what have i done all right so clearly i um it's not either of these things what else did i change just that um what did i do um okay well i'm not quite sure what i've done here i did something wrong clearly somehow my nav bar is gone okay let's see if we can figure this out so we're going to undo everything i just did oops and try again okay so i've got my nav bar back um so i'm not sure what broke it um so let's try this stuff again um so i'm going to try to add these first and again maybe i shouldn't copy and paste this because you do know this section is picky um okay so now my navbar is still there that's good great and i do see these links to github linkedin and twitter awesome let's just make sure that they work because that would be sort of silly there's my twitter page and linkedin wonderful and github great okay so that is um good i don't actually need this little thing here um this is a fabicon favicon i don't actually know how to say that word um it's certainly not necessary so if this doesn't work we're just going to skip that actually maybe what i'll do is check i believe on uh yes oh i see the mistake i've made lovely wouldn't you know i think what i forgot to do here is indent this is what i love about the yamo section how picky it is oh i did indent did i not indent correctly maybe i didn't indent correctly let's see the logo the image is this supposed to be like one more in or something maybe that's it let's try it now see what happens if this doesn't work i'm just going to get rid of it and this is not necessary so um well i still have the look at that it's just that little ll thing again totally unnecessary but it's there so wonderful okay um i think what i want to do now is i want to um i should have been doing more of this as we went along but oh well um i am i think some people believe that like you shouldn't push this many things at the same time so i apologize to all of those people in advance um oh i don't think i need to push my art project i am going to push all of that i am going to commit that and we're going to call this the initial upload commit great push it and now what i'm going to do is as soon as this finishes is i'm going to jump over to netlify and maybe i'll jump over there while it's still doing that so maybe i should start by just going to the main netlify page and i already have an account i think it's easiest to do after you've created account but if you watch um allison and desiree's video you will see that you can actually create a website just by dragging and dropping the site folder into the netlify drop page but i think it's easiest if you create an account so um actually before we do this i am going to so i created this one deployed a website here um yesterday and i actually want to delete this site uh before moving on to this one so i'm going to delete this and the reason i want to delete this is because i want to use that name okay great so now i am going to click on this new site from git and i'm going to choose github and it's going to ask me to search my repos and this one is called lisa lenway underscore distill that one and we're gonna deploy the main branch and the publish directory this is where i'm going to put underscore site and i believe if you click on this button yeah this sort of gives you a hint of what you might want to do so this underscore site file has all the html files i need in order to deploy it on this site um so i usually do that click deploy and site once you do that it takes a little bit of time but you'll eventually get this auto-generated name so it's going to be you know a bunch of weird words dot netlife.app the first thing i always do is go to site settings and i change the site name and this is why i wanted to delete that old one because i want to use it here so i'm going to be lisa ledway.netlify.app i will save that and um i think that's all i need to do for now um if i click on here um i wasn't yeah so this is now uh up and running so i can pass along this website to anyone i might want to pass it along to and um yeah super easy every time i push out to github this netlify site will be updated so i find it to be quite simple i've made some other sites using much simpler sites but um where i have just pushed out uh just uh knitted our markdown files so html files um and then i have also made a this website is just like an our markdown website uh where i've essentially linked to a whole bunch of these standalone netlife sites so i have really grown to love netlify in the past like three or four months that i've been using it okay so i think um now that we have that piece done um the only other thing i wanted to do was create a theme and i'm just going to do sort of a um a baby version of that i guess um so i am going to go down here to the console and do create theme oops and um i know that a lot of people use just theme as the name but i'm going to call this lisa theme because why not okay and um something i just noticed in ellison's video today is that there are these lovely instructions on here which you should for sure pay attention to because i did not pay close enough attention the first time um so we now have this uh i think mine is not called theme.css mine is called lisa underscore theme.css but i think that's what's meant here and then um the really nice thing that allison has done and um oh i well maybe it's just her um is this they've sort of provided these nicely named things sort of like the most commonly uh used css things you might want to change so that you don't have to go out and search for css so don't make the same mistake i did and try to like start right away by using complicated css um no offense to css because this has a lot of the really nice things in it um so um what i wanted to do was just change a couple of things so um let's see here i think um i think one of the things i wanted to change were the distill site header um so let's see here if i remember correctly um i just want to make sure i'm getting this right so i have this lovely site i i don't know hex colors very well so i have this website open where i can put in a hex color and it converts it to other things and it gives me the color preview so i need that there because otherwise i i'm not good at envisioning what it looks like um okay so let's see here i did want to change this background color because i don't know i just want to look a little bit different um although i do think i need to be slightly careful when i start changing these colors so let's see here um let's make sure i don't actually remember if this is the right color or not so okay that's the color i want so let's go back here i'm going to change the background color to that um maybe i will change my title size maybe i want to make that a little bit bigger um well maybe i'll leave it for now um actually let me undo this i wanna okay so i'm gonna change the footer as well i would like those two things to match that seems reasonable um okay and then let's see what else do i want to change so um maybe i want to change some of these fonts later the title color i believe this is black um so perhaps one thing i want to do not that this matters a lot um but i'm trying to like have a nice color scheme here so maybe i'll use this dark red and part of me just wants to make sure that i'm doing these things correctly um one of the things that i wanted to do um in here was also to change the background color um so i think this is one where i actually needed to use the regular old css let's see if this will work so um we're gonna see if i can get this to work i think i wrote myself a note for how to do this as well so i wasn't quite sure if the command should be background dash color or just background so i know next to nothing about css um okay so i wanted that sort of light blue color um and i need this and then i need to end with a semicolon so i think i can do this so here's my theme the other thing i need to do is listen to the advice i'm given here and add a theme entry to my site article yaml okay oh site that hello that means site or article yaml i'm going to add mine to the site yamo file um so down i'm going to put this down at the bottom i'm going to do theme and then my theme is called lisa underscore theme.css save that and we will see which if any of those things work let's hope they all do let's build the website great so i see my color changed um i can't actually tell if the background color changed or not um so it is possible that i did that completely wrong but actually that default color is kind of nice so maybe i just won't worry about that um and i think i'll move on to what's probably the more important thing which is actually getting some content on these pages so i'm going to go work on that and i will at some point have my blog post ready to go so hopefully that helps some of you thanks for being here and bye

Channel: Lisa Lendway - Statistics & Data Science

Views: 1,729

Rating: 4.9200001 out of 5

Keywords:

Id: Fm3bsYCilEU

Length: 56min 57sec (3417 seconds)

Published: Tue Dec 15 2020