How to make a personal website using R and blogdown | Tidybiology June meetup

[Music] hello everybody and welcome to the June meetup series for our tidal biology ongoing learning and data science this month auction and I will be teaching you how to make a personal website using our our markdown and a useful package called blog down which will take your are files that you have and convert them into the public HTML that we all can read having that personal website is an important part of your online digital presence and given that everybody's staying at home we thought we would take a minute to go ahead and teach you all how to use our to make these files let's dive right in hi for this study biology mita we will show you how to make a website now using our studio we will show you how to make a static website as opposed to a dynamic one so a static website is just contains static HTML and it's great if you want to make for example lab website or personal website we will show you how to make a static website for 30 biology itself and we will be using the package called block down and despite its name it can be used to make more than just a site for blogs so alright let's go ahead so the first thing we want to do is go into our studio and you need to make sure that you have the lockdown package and blog down can be found on cran so if you just go to install packages and type in lockdown it's there I already have it so I won't install it and once you have logged down installed from within lockdown you want to install this thing called Hugo which is the static site generator and so I won't do this because I've already installed Hugo now we can make this website entirely in our studio without having to know anything about HTML or CSS well JavaScript once we've made a website we're happy with what we want to do is our actually before we even do that we want to have a github repo and once we make the contents of the website we're happy with we commit everything to I will get half repo and what we then do is we can use this service called notify to deploy our website and the advantage of having it's synced with our github repo which is what we do is that whenever we make a change within our studio and commit that change the your website will be automatically updated so let's first go to github this is uh this is my github page the first thing you want to do is create a new repository so we will call our repository teddybear vailable don't worry about giving the description set it to public and for now I won't initialize it readme so just create the repository right this is an empty we poke and what you want to then do is copy this link so just click this that's copied and you go into our studio and you create a new project click on version control to click on gift and place the link that you just copied I'm happy with the subdirectory it's worked out that the project directory name is steady bio which is great it's the same as the name is the same as the name of the repo and create the project and switch to the project you'll see you will now have a git pin on the top right-hand corner of the screen right now there's nothing in there so this is all good and never we want to do is we can make an example site and or a template site and once we do that we can make adjustments to that template site that's how we can build I was like so we won't be building from scratch which is good so to do that you can just type in in your console block down by a colon colon till say it and blog down comes with many themes the theme we'll be using today is lithium and lithium is the default theme that build on the site calls so we can just execute this function as is yeah oh I'm sure it is you say mill site is a very last function we run all right wonderful so you can see you already have all these contests for a fully functional website now blog town has a feature called live reload and so whenever you make changes to documents within that are used to make your website you can see what the what the website looks like so this is the folder structure right now so what was previously an empty directory now is filled with all of these trials at conflict amo and these various folders and index dot Rd and so on and these files and folders are used to build this website now we can view this default web site from within our studio itself has an about page to click on get help it'll take you to the github link and so on what we can also do is we can pop it out and it'll open up in your default browser and again it's a functional website so what we can do is we can make changes to this this website the first thing we want to do is so I should say I will be making a the instructions that I'll be giving obviously specific for this website that we have in mind but there's it's just scratching the surface of what you can do it block down if you want to learn everything there is to know there's this book called block down and it's by these three authors definitely butchering the same but each way she he is the creator or block down and amber Thomas and Alison Hill this is a great book so let's just call block down google it you can buy it you can buy a hard copy version or you can just follow this one it's free so the the thing that's most difficult to get used to at least for me with lockdown is understanding the folder structure so perhaps the most important file is this conflict conflict of t om l rhink t om l stands for Tom's obvious minimal language and so you can see it has contains a lot of information on the website one of the things we want so the title is a humor website we see that here but we can change that to a putty biology and like I said every time I every time you save a change it builds a new safe to spray we can leave all of these same and this contact animal has both absolute URLs so just a URL that will take you to the destination that's indicated here and also has relative URLs so and that's defined by the folder structure so this URL here for the about page this slash about slash what it does is it will take you to it point you to the content directory and the about MB so if you look at your this default website in the about does this this is a hello world example data if you click on the select our MD this is the same content this is a hello world example for so on so we can change that we can say about tidy by all the key is a news and something we can come back to the city even if you go back to your viewer pane you'll see an updated which is great so that's the about MD and then to the links we can so for the github link we can we can make it the link to the repo for this web for the website itself just simply this save it if you click on this github it makes you - though of the website and then the Twitter Teddy biology has its own Twitter page just called a biology it's I think it's a little case study biology and that should take you to the teddy bear which into the page um in the description again you can just say that's fine it's a website built through if you go and drop down now one thing we want to change immediate straightaway is [Music] this here this Li this leave I conjure its logo dot PNG and sit where things can get a little bit confusing that logo dot PNG can be found in the themes directory and within themes you have Hugo lithium then you really think me of static when it's static you have images and so that's where that cuboid LP and he comes from so there already exists a Teddy biology website called Teddy biology gg and that was made again in our studio and this is the the project for teddy bear each other aarrg so I'm just going to open that as a chichi and copy/paste some of the things that are within this project into our new Teddy biology website project so this is from the existing that ecology website so you can see there are some additional pictures so there's this picture that map made that I think would be nice the website so we can just copy that to you we will copy that to our Teddy Bible and set so let's get steady viral games Google Earth in static images save then you go back to the young at this project we see this it appears you know tell you biology on this four hex of PNG so we just replace this here save that you really write instead of that Lee thing you have pedagogy and what I like about this is if you go to your about page you will go back to your home pages click on that so I think that is it for the example I think that's it for the thermo-pile and still keep that there so you can see that there are these example posts now those can be found in the content folder and in the post folder within the content folder so you can see there are all of these so let's just go ahead and delete these yeah delete them my husband so sometimes when you do this when you delete it it doesn't detect that you've deleted a file it automatically detects when you've edited the file but sometimes not when you delete the file so if you can do is you can you can go to your add-ins you can go to atoms and then click on Southside I'm actually sorry that's not the case anyway it still achieved obliquely what I wanted to achieve so you can see that this is what your website looks like now because you don't have any posts and towards the end I'll show you how to add a post easily now what we can do is we can adjust some of the aesthetics and so to do that so if you go within the field into the themes directory we see all of these other directories and they contain CSS files JavaScript files HTML files things that you can do to that are needed to give the website its structure and shape and look now the blog down book recommends that you we don't make any changes to any of these folders so what we can do is if we want to make a change - if you want to make an aesthetic change we can do is we can copy this layouts folder for example we can copy it into our main directory which is just Teddy by so you know second if we go back up to Teddy bio will now see that there's a I'm sorry we should give it a name and also let's call it layout get enslaved let me just confirm the layout now within layouts you have these this partials folder and within partial so these all of these HTML files they dictate what your final website looks like so let's go into a couple of things I want to change one I'd like for there to be a background image and maybe even like a welcome message on the home page so to do that we go to the footer HTML you can open this in our editor yes I did lie initially when I said that we wouldn't have to be dealing with HTML or CSS it's a little bit of HTML unfortunately but not too much so one and in addition to having a nice homepage image and a message you also want to get rid of this RSS feed because we don't have that so to do that in this is the lines three to five correspond to the RSS feed so we can just get rid of we can comment those lines out on removing yes you so how you doing oh I see so this is lesser than say an exclamation mark - - is the HTML equivalent of ours bouncing - comments things out so we can see got rid of the RSS button great alright and now let us do a couple of things let's create an image put an image on the home page and come and write a little welcome message let's do that just to make sure that I'm getting it right I'm just going to copy it from my chichi save it welcome today biology nice and if I want to add an image sorry for moving back and forth I just want to make sure that I get this fight yeah [Music] that should hopefully work yeah see so it's starting to look like a real life website nice now we just pop this open again if you click on for example github I think should we get her face which is great but I don't like that if you want to go back to tell you go easy or you have to click the back button so I want to enable a feature that allows you to click on something and then it opens if the UM what have you clicked on it gets opened in a new page so to do that we can close this footage out HTML we can go to the nav dot HTML and again so I don't remember how they do actually remember this so on line 11 so that's the that's the command that tells that allows you to click on something and then by clicking on that thing you go to the corresponding location so if you in this case if you do they don't remember so I can go once again back to my cheat sheet third its target equals Plan C Oh all right now when we click on github if what I'm going to do is just delete all of this cuz clearly I made a mistake see if this works yes all right so now when we click on github it opens up github in a new pane we can go back to our website I think that is almost it did want to say if you want to add more links to your navigation pane here you can just go to config dot tamil so for example if you wanted to for example have a link to actually let me show you so for the existing data values your website I made a system really simple quiz and that quiz is hosted on shiny app start I own it's made using shiny which is something we've spoken about previously and Chinese a way of making dynamic or things that are it's a way of making applications apps so this code here copy this into this so to make a new item here on your menu bar you just go you type in so if you get a line 21 here you can see you have square brackets square brackets menu dummy in square bracket square back brackets you have to give it a name that'll be the name you see on the pane and then a URL so that when you click on the name you have it'll take you to that URL we save this nice and it's there oh wow if puts it in alphabetical order automatically that's clever and if I click on quiz it takes me to the shiny app I've made a few months ago so yeah so the shiny app is just as a few simple questions on so if you took the 30 biology bootcamp this data set chromosome will be familiar to you just clear it yeah so like for example there's a question what type of objects chromosome I think it's a list turns out it's not so you can you can use this you can basically use our from within the website so you class chromosome and just run that code just for the tip oh and a data frame so the right answer is take a printable wonderful crap all right a couple of two three other questions okay almost there Oh now reason well I guess one of the reasons is called lockdown is because it's easy to who post blog posts are you so to do that all you have to do is go to add-ins and click on new post and you get this table yourself so I can put my name date it's today's date and you can also define what subdirectory bugs interest in this case it's the default is post my title can be my truss and I can leave everything else the same so the default is our markdown so we can leave it as that done and we have a new our markdown file created now this it should be familiar and you can see that it puts this blog post on your home page but you can change that so we will just leave this as is answer this file this is familiar this should be familiar to everyone is in our markdown file so you can purchase plain text hello and you can also put in an hour chunk so any code that you enter here will be executed so something like this now don't knit this that's one difference between of plain our markdown file and I'm knocked down within lockdown anything happens lockdown takes care of that so all right so I've update I've posted my first blog post and I've made a few edits you can see what it looks like so you can see it automatically puts it here of my class back post at the title let's feed date click on it and this is the it's as though you you had knit the markdown file to an HTML file so you see I detected hello world and I printed hello world and it executed prince2 come on so that should be that should be it so okay this is a a website and reasonably happy with and so the next thing to do is just commit everything yes and you can commit message my dress I make this and then we push it because you use a name and think it did yes so now you have Reaper for your website now sofa we suggest this website is in public to make it publicly available that's why we use this thing called a cafe that I'd mentioned at the start of this stuff and it is a free service that allows you to deploy your website now one thing one way you can do it is so you set up a free account log into it and you can see that there are already a couple of websites that exists is the Teddy Biology website and there's one for Jim White's lab now previously what I did was I would made a mistake is actually not complete what we want to do is so we will it's pointed this out earlier a new folder was created for public and public is the folder that contains everything in the form it needs to be in to make a website so but you can clearly tell I had nothing to do with making this public folder it block down translates everything we've done so far into a form that that allows one to make a website now the last thing we want to do is so far we've just been serving the site we want to do is let me just close it actually we control is very values about org also and I'm just going to go ahead and reopen it this is another thing that's recommended that before you make your final website the one that you want to deploy you should restart your a studio session so this is probably overkill that I closed everything down anyway so now that we have our studio reopened for the projects and it's I'll tell you I'll open it and what we want to do is so we can either take this out or theirs so what I just typed up we've locked down Colin Colin builds out it's rendering content suits me doesn't look like anything's happened but it's made the files necessary for our website so in instead of typing that out which we do you just go to add-ins and they're like where you where we previously clicked sub-site a new post that should also be build site I guess not wrong anyway we can just type in build site like I did so now what we can do is that actually didn't make any changes so what I did previously when I pushed everything to get half before doing build site is bad practice so actually the conflict bomber has I shouldn't like that so hopefully the fact that I didn't do it the recommended way shouldn't shouldn't be to that that's the same thing commit give a commit message push and when you push it will prompt you for your username and password those nose and now we're ready to deploy our website so we go back into net click file and we click on this new site from get button and it allows unify allows you to sync with various get providers and get lab I know get lab whose favorite bite you let's get lab bitbucket we're using github so it's already been authorized these are all my loves I've given it access to all my repos so we will look for the one we just made today Kerry while that is click on that and it knows it knows which branch to deploy there's only one branch but it also knows which automatically detects the right directory to publish just the public directory so this is all really streamlined and easy to do and then all your videos click deploy side and you can see the top left hand corner and site deploying progress and this is random name generator so that's why our website is currently called stupefied Hamilton some numbers we can thankfully change that so cycle in progress all right so before we actually click on this link and go to domain settings and options edit site name we can call it pink daddy bio might be taken teddy file name but almost lucky enough taken yeah so you can see we have a new website called teddy bear website that notify the app on it website we made and if you look at listen you can see you can see the URL address it's HTTP colon slash slash sleeve familiar URL we all know and the bad fate works get harmful take you to the github page and so on the blog post my first blog post so it's website so if you click on this link and send it there friend they should be able to be with two so right now you can see that their name of the website is teddy bear website NASA Phi dot app enter Matt will talk about how to make custom domains so that you can have a teddy bio RG or carry Viacom that's it like I said this is this Hugh lithium is the simplest theme there are more sophisticated themes if you wanted to make for example an academic website there's a Hugo academic theme and again there's once you run the default website all you have to do is make edits at the necessary phases and then you have a website so you don't have to do really don't have to do anything in scratch the only times when you have to worry about HTML CSS is when you want to make a few custom changes but that shouldn't really be much of a concern especially when you're making your first website that's it thank you for watching and I hope you enjoyed thanks doctor the last step that we want to show you is how to now take a custom domain name and Link it to your net Liffe I - main so actually just showed you that in the notify app they give you a standard sort of dummy name just a placeholder that you can then change so if we look at this app now we can see here that I have a domain and what we call it here is just art ID biology org and this is actually the name that we want to link it to you can call this anything you want it doesn't matter so when you click on it you can see at the top here this is the dummy name that the net left eye app assigned to us just a unique name we actually don't need to change that at all when we click on domain settings here we can see that there's a couple of different domains by default if we look at this custom domain section your site is always accessible via the notify sub domain based on the site name however custom domains allow you to access your site from one or more nonmetals Ida mains so what you first need to do is to purchase the domain that you want now I've done this using Google domains it doesn't matter you can do this really using any sort of domain name purchasing company that you would like but in this case Google is quite simple so I bought this name toddy biology org and we can then over in this DNS settings we can find all of the domain name server settings for tidy biology - org now if you don't buy your domain through Google and you buy it through another company it will look a little bit different but there will always be some setting where you can change the domain name of servers so we don't need to worry about these two name servers you don't need to worry about any of these other things what we want to come down and do if we want to make what's called a custom resource record now this custom resource record has several different options of the types of records that you can add to it what we want is to add a cname record we want this WW to point to a different site the site that we want to point it to should look a little bit familiar now this is called jovial Basco ara and then a bunch of random numbers now if we go back to our net liffe eye we can see the default sub domain is jovial basket car so we want to now take this name here and we want to then you can see that this is going to also be our app but we want to take this and we want to redirect it to the the cname record so we go to our custom resource record and we're going to add aaww we type that in we then change this to see name where we're adding a cname record and then we type in the address here and this address is going to be the address that we get from our net Liffe i subdomain and we add that it'll take a little while sometimes up to an hour usually a little bit less but then this is going to say every time that somebody is going to look for ww your domain in this case is tidy biology it will then redirect this or it will tell it to point to the information that is at this subdomain and again this is going to be our our our net lafay subdomain that we have so this essentially is going to be the last step that you need to do in order to take your net low Phi sub domain and Link it to your custom domain name that you have already purchased now there's going to be plenty of resources to help you with this there are plenty of resources on the net without comms aight there's plenty of resources that are going to be available whichever registrar you purchased your custom domain through so don't feel overwhelmed it's really just um you need to connect these two places and so there's plenty again plenty of resources the thing that you want to look for is cname the letter C name and then this is going to be the the information that you need to connect these two resources so I hope that you've enjoyed this I hope that you will sort of venture off into developing your own online content and your online personal press presence and I hope that we've helped you so we'll see you next month [Music]

Channel: Data-Driven Hypothesis

Views: 1,899

Rating: 5 out of 5

Keywords: data science, tidybiology, website, blogdown

Id: IMI_JDTJcts

Length: 41min 12sec (2472 seconds)

Published: Mon Jun 29 2020