Introduce yourself online using blogdown and Hugo Apèro

two hours with us we are now being recorded um so uh i will be walking you through how to create a new uh blog down website made um with a hugo theme that i've been developing called hugo apparel uh and in the process we'll be using a lot of different services so part of the pre-work was to get you set up with those uh but we're gonna go kind of slow and my hope is that you'll be working along with us i actually don't have any slides i'm going to do mainly live coding and do it along with you and we may take some breaks to give you some time to fill in some content but my working assumption is that you'll fill in the content later but what i'd like for you all to leave with is a site that works um a site that deploys to netlify so you have a link that you can share and a site where you can edit things locally and have those propagate to your online website easily and i'm assuming that you'll come back in with your content and fill it in later so i wouldn't necessarily approach today as a time to develop your website and all the content in it i'm hoping it'll spark some creativity for you and give you a chance to realize all the the kind of strings and glue that hold it all together and figure out how to edit it on your own so i'm gonna start sharing my screen and that is all i'm going to do for prep let's see can everybody see my whole screen yeah someone give me a thumbs up i see jonelle is one of my top people channel can you can you see my screen okay thank you all right i'm gonna minimize my uh my zoom i'm on a very small little laptop screen okay uh so the pre-work that we shared with you all was close up my tabs was from uh an a workshop that i did for our studio global which was this past january and we did it for the our studio global diversity scholars and so it was a two-day workshop this is a lot less time but i'm hoping that we'll be able to get you pretty far to be able to work on your own if you didn't set up our studio cloud that's okay that's sort of a fail-safe for if nothing else works for you but i'm hoping that what you did was follow the instructions to set up github locally which was following the instructions from the book happy get with r by jenny bryan i had a few opinionated recommendations as well that i think are kind of best practices going forward with some new changes to how github works and then signing up for netlify so uh going online to netlify.com and creating an account hopefully if you click log in you have an account there um you can see that i use netlify a lot if i go to sites i don't even know if it luckily it doesn't tell me account but i've got more than one page of sites um so uh hopefully you can log into a netlify site and you will have one shortly so those are really the two main prerequisites uh what i would love for everyone to do i'm gonna provide a link in the chat quickly getting to the github all right so i've created a repository for us to work from and i would love for you all to visit this link now put it in a chat so when you click on that link you should see the same page that i'm showing on my screen now so this is to a github repository and this is a starter repo for our workshop today so hopefully while you all get there um you can see that there's a readme and the readme is what we're actually going to follow today instead of using slides because i think it's a little bit easier when you're working with a website you have a lot of deploys going back and forth um looking at a screen of slides versus what's on your local machine can be confusing so i tried to keep it pretty basic and at first i'm just going to show you what this site looks like so this site all of the files that you're seeing here this is a hugo website and it's built with a specific theme the theme hugo apparel and the hugo apparel theme files live in this themes folder so they live in themes hugo apparel and you can see that there's all these folders there are archetypes assets an example site layouts and static and this is really the guts of the theme so this is actually the work that i've put in already to make your site look nice um so you know if you think about like someone has to write the html and the css and the javascript to make a website look really good so i've done that all for you and i've used hugo to do that so that is the the themes folder and all you really need to know about it and i really recommend leaving it as a read-only folder um so don't don't touch it leave that alone but know that that's what's there and that's what's powering your site everything else we're going to touch and fill in the main place where all your website content will be is content so i'm going to show you uh what the site looks like now and kind of lead you through a little bit so if you click on this silly babbage link that's the random link that netlify provided me so if you open that up that's a live website this is using the hugo apparel theme so this is what we're going to be making today you can see that it's kind of made for personal websites so we have the name we have maybe a role that you might have or a title that you want people to associate with you uh we have links to social accounts here which are nice you have a little place to put a little blurb or biography of yourself and a picture because i think that's a nice way to land on a web page uh there's a little photo here that gives you some information about the hugo theme itself and we have a license a contact form and then this top nav bar which takes you to the about page a blog section projects and talks now if you click on this read more button you go straight to the about page in this website and you can see that i have kind of a little a little bit more intro of the person that this website is about and i happened to make this site when i was watching a very bad tv show that i do not recommend really i don't like that i liked it but i really kind of enjoyed it i think it was called like emily in paris on netflix um so i don't necessarily recommend it but that's who emily cooper is and i created this uh site with some some peter content from her so cultures clash as i adjust to the challenges of life in paris while juggling my career new friendships and love life here's how to catch up with me lately uh so then when you kind of scroll down you can see that the um what was above sort of disappears but then this sidebar over here kind of stays um and gives you know people kind of like a little bookmark of your picture a roll icons i've also built in uh how to say my name function so if you have a name that might be hard to pronounce this is a way for you to be able to put it out there so that people can click on it really quickly i saw that on a few different people's personal websites and i thought that was a really nice touch my maiden name before i got married i'm alice in hell now which is super easy but um my maiden name was presmanus and i can tell you that it was never said correctly on the first try so if you have a name that might be difficult to pronounce um i think that's kind of a nice feature uh then you have some a place to kind of put bookmarks i see people using this to link out to places that they are elsewhere if they have roles in other organizations and they have other websites that you know tell a little bit more of their story in different places this is a place to put them um but emily uses it to tell you about her interests so paris pastries and people and then on the left you can see i designed this to be a little bit more of what we call um lately a now page um so the idea being that your cv or your resume might be a little bit out of date but this is a really quick way for people to see what you're up to lately uh so you can populate it with some text here and then it auto populates from the rest of your site here so i'll show you how to do all of that and i think that's kind of one of the nicest features of this theme i designed it so that it has an actual proper about page so people can get to know you better and that's part of the naming of the theme in general the hugo apparel theme uh apparel is sort of a unique um get-together and french culture that my french friends told me who was a time when you could kind of casually get to know one another um you know have sort of like small appetizers and drinks uh and it's not very formal but it's uh really kind of just a time to hang out and i thought that that was kind of nice because that's sort of what i'd like your website to be for you um a place where you like hanging out because you're gonna need to maintain it and you're gonna need to add content to it and you're going to want to update it as your life updates but then also a place where you'd like to invite other people to it and feel pretty proud about it so that's the about page next up is a blog we'll talk about how to populate that as well and there's lots of different configuration options for that you do not have to have a blog though for this to be a useful website theme because i also built in a place to add projects and they're designed for people who are our stats users so if you happen to get a hex sticker and be one of the lucky ones you can put them here and the image sizes will automatically show the hexes and not crop them off and also talks so if you give talks or if you have other events that you'd like to showcase you can put them here you can see that there's a little bit different metadata here on the talks page so you get a date um and you also get some little buttons that allow you to link out to things so we're going to be going through this site and you're going to make one right now so that was my mini tour of the hugo apparel theme if you go back to this github repository that i linked to earlier i'd like for everybody to scroll down to the readme.md you should see the name hugo apparel and then you should see this little button that says deploy to netlify and if you're following along i want you to just click on that right now and i'm going to do it as well so you should see this page welcome to netlify so it says step one connect to github connect netlify to your github account to create this new repositor excuse me repository um i'm going to select connect to github because i want it to do that now i've already authorized it you might get an authorization queue at this point and it's safe to authorize nutlify netlify to access your github i'm going to wait a second and let people kind of walk through that in case you did get an extra notification maybe if you're following along i'm going to look at the um the list of participants if you all could give me uh and zoom i don't know if you've seen this i think there's a reactions or did it change it's usually a way to do like a little thumbs up but i don't have it here maybe just throw it in the chat if you're um to the point where you've authorized authorized github okay looks like oh some people figured out the reactions i don't have the reactions anymore and i just used this like yesterday um maybe it's because i'm a co-host all right so welcome to netlify get your site in one minute i have authorized github and so now if you read this little fine print maybe i'll make mine bigger it doesn't seem to scale when i oh there we go there we go all right so uh you can see it has a repository name now you can change that if you don't want the default so iyo for me stands for introduce yourself online for this workshop but um maybe i'll change it to emily cooper it doesn't matter what you name it but this is going to be the name of your new repository in your github so what it's actually doing under the hood is pretty amazing it's going to deploy your site to netlify it's going to fork my repository and plop it in your github so you'll have your own set of files now that are the exact same copy as my starting template it'll be in a repository in your github account and it'll already be deployed to netlify so all of the wiring and the linkages there will be all set up for you with this one click which is why i love starting here so go ahead and give it a meaningful repository name i wouldn't use spaces uh i would try maybe not to use camel case unless that's like your style and you can remember that make it something meaningful but it doesn't have to be your name it doesn't have to be anything special a lot of people put you know website or blog down or anything like that it's up to you whatever you put here but it needs to be a unique repository name in your github so it says we'll create a repository in your github account with this name so i'm gonna go for it and i'm gonna save and deploy so you can see that was step two now it's going to step three your site is live just push your changes to github okay so now this is the exciting bit so i've been forwarded to netlify and you can see that it's doing something it's a site deploy in progress okay um and then if i scroll down from there i can see production deploys and then it just changed so it's actually already published my site but i want to take you first to a little orientation of what this looks like in netlify so first of all zealous kepler 669 f8c that's my random name that netlify gives my site right so we just gave it a a github repository name but netlify doesn't use that to name my site it uses zealous kepler66958c and that's what it actually uses to generate a random url but this is a url that is alive right now so if you right-click i'm going to open mine in a new tab you can see that's my new site so i just deployed this brand new it looks exactly like silly babbage which i'll close now so it's less confusing but right now i'm looking at zealous kepler 669 f8c and i can share it with you all so what i would love for people to do in the chat is to i see some people enjoying their um enjoying their random name generators um go ahead and uh put your link in there um everybody should have the exact same looking site looks like people are getting it it looks like some people um there's no connect to github tab uh chamillis i'm sorry i'm not sure that um i've seen that happen before um so uh might have to do some troubleshooting in a moment reverend wing i like that joey mclean so i always feel like these um these netlify random name generators are like a little bit of a fortune cookie like sometimes when i've got like bad mojo going on with a site i'll get like one that seems a little bit more negative but these all are these are all are giving me giving me hope i see uh i see admiring arabiata um oh and then somebody already got ahead of me and changed it okay so you're looking at this random url and i'm actually going to show you how to change this a little bit later because i want you all to feel free to edit things and this is a great way to keep the work that you're doing on your website sort of under wraps you don't have to worry that anyone's going to stumble upon this url right like they're not uh anticipating that your personal website is zealous kepler uh 669 fhc uh but that is your website and from now on when you work from your site locally and you push to github this website is going to update um and that is kind of one of the great benefits of using netlify is it's called continuous deployment so anytime your source changes and you push it up to github now because we made that connection and that wiring now netlify is going to detect those changes in your github repository and it will redeploy your site and there will be no blips on the user end nothing goes down it's just completely seamless so after a few minutes you might see the build finish and then when you refresh your site in the browser it updates so i'm going to go back to the nutlify tab so this is a really useful tab to know what it looks like and to orient you a little bit so i just want to share a little bit more about um how to look at this tab so first of all your link is right here and as i mentioned we can change that so that it's something you'll remember but right now i'm going to keep it as the random generated url there's also this thing that says deploys from github now you can hover over that and see that github is a link right now you can open that link in a new tab and it takes you right to the github repository that that button made for you so you can see now i'm in my apres hill emily cooper repository so this is a nice way to be able to find immediately that repository that we just created so you can see that you should have the exact same repository that i have here you can see that um you know i made the last updates i had made for 33 minutes ago and there's 21 commits in there you also have the read me which is what we're going to be walking through today and we're going to next step get this going locally so that you can push and pull from your rstudio uh local installation so keep that tab open that's your github repository keep your url open so that you can see what changes happen and then go back to this netlify tab real quick i want you to click on if you kind of scroll down you'll see this production deploys and it says production main add head published so it's telling you the branch so i set mine up to be main as the default which was in my um sort of opinionated pre-work instructions how to do that and how to make sure that that's your default branch going forward github has now kind of first class support for having a main branch instead of a master which was kind of the labeling that used to be the default so if you click on this here this is actually a link and this takes me to the publish deploy and you will get a link for every time that you commit and push to your github repository there will be a page like this so this happened to be my first one but you will have one for every time you commit and push so if you scroll down here you can see some nice you know buttons here you can preview the deploy uh so that again takes you to the deployed um link you can actually uh click this little download button that will download all the files for you which is nice if you run into an error you can always retry the deploy so a lot of times if i run into problems on the netlify side i clear cache and deploy site and you can also lock publishing to this deploy so this is good for me to tell you now because if you break your site um and you can traverse back to a deploy that actually worked in netlify you can say okay walk it back i want to lock publishing to this deploy now i wouldn't recommend that as a long-term strategy what we'd like to do is have your source files that are in your github repository that are the most up-to-date be the ones that you're seeing when you deploy but that's an option for you if you break things and need to make sure that your site stays up for a little while but if you scroll down that's the that's the good stuff and usually when i'm troubleshooting um anything uh with new learners and new users i want to take them to the deploy log so i want you to not be scared of seeing this so this is doing all the stuff that i told it to do i sort of taught netlify how to build your site for you uh without you doing anything so you don't need to understand all of this but it does look good so that's the main thing that i want you to understand from looking at this so things are happening that are very good um one thing that's happening on line 22 is that it installed hugo version 0.80.0 and i want you to go to your repository right now and if you look in the netlify.tomo file that's the file where i'm communicating to nutlify for you so i wrote this file for you to make sure that netlife knew exactly how to build your site and you can see that what it's doing is it's telling netlify from your actual source code in your github repository how to build your site so it's using huco which is the static site generator that we're using it's publishing from the public directory so it's building your site putting it all in a single folder called public that you don't see because netlify is doing that building for you and it's using hugo version 0.80.0 so that's one thing to to know is that it's installing hugo on this virtual machine in the clouds on the server in the clouds for you and then it's doing this nutlify build and so this is all good everything's green which is usually encouraging not red so that's a good heuristic to look for when you're looking at this and then it says it's following the build command from your netlify.tomol which is good i wrote that for you and i made sure that it worked before we started here and then you can see that it's going to start building your site this is output that we're actually going to see in the console when we use the rstudio ide and blog down so getting familiar with how it looks is a good thing so it's just a nice little table that tells you how many pages it um it built and a few other things like processed images static files things like that um and you can see that it happened in 389 milliseconds build command completed in 446 milliseconds uh then it moves on to deploying your site starting to deploy site from public i told it to do that uh site deploy was successfully initiated netlife build complete and then it does some post processing some cleanup of cash and dependencies and then what you're really excited to see is this little line on 108 maybe for you site is live with the little sparkles emoji so that's pretty exciting uh and then you can see that it's pushing to this repository so you can tell that that's where it thinks my my source files are so this is a successful deploy log and hopefully we'll see more of these in our future if you go up to the top and go back to deploys that's kind of where we started from and these will rack up over time so you'll see a lot of different deploys there as you push to github let me show you a different site that i have and here's my own personal website so you can see that i have a lot of deploys here if i click over here you can see that there's quite a few i also have a few different fancy things set up but i use this very often when i'm going through and seeing seeing what happened seeing what changed that kind of thing so so i'm hoping that everybody has now the github repository open that is in your github this one mine is named emily cooper and i'm publishing to zealous kepler and i'm going to go back to this so we have three tabs open right now okay we've got netlify we've got github and we've got our actual production site so what we'd like to do is be able to start editing files in our studio and start adding content and kind of massaging our site out so i'm going to do the way i clone a project um from github but you might have a different way of doing it so i'm hoping that you've already worked through that in the pre-work i use ssh um currently i know that was not the recommended way that i told you to do it i told you to do https but this works for me currently and i'm not going to break things in github while i'm doing a live demo so i am going to go to the green code button and then click on the clipboard um i recommend it if you haven't done this before to stick with https which you kind of click around by tabbing over those and seeing which one is highlighted pink is the one that you're on and then clicking the clipboard icon so i'm doing ssh but you need to do what you have practiced and works for you and then i'm going to open up our studio now i just want to make sure because i can't see a yellow normally i can see a yellow box around what i'm sharing ken jonel can you give me a thumbs up if you can see my r studio right now you can okay great okay so i am running lost library book hopefully you can see this i'll make it a little bit bigger okay so i'm in a current site right now but i'm not going to worry about that i'm going to go to file new project in our studio and i want to pick a version control project so file new project i'm going to start over file new project version control and then i'm going to choose get because i'm trying to get a github repository and then i'm going to paste in what's on my clipboard into that repository url and it automatically populates that project directory name for me so my github repository is named emily cooper and my project directory name is emily dash cooper and then you want to be pretty intentional about where you create this project as a subdirectory of on your computer because you want to be able to find out later so i happen to have a pretty intricate setup for things so i'm going to browse and i'm going to find i have an r sites folder one of the benefits of working at our studio is everything i use basically starts with r i have our books our sites our talks i'm going to put in my our sites folder there's no magic to this it's just where you will look for it later and i will click open in new session i recommend you do that so i'm going to pause here for a second and i hope that people can give me some thumbs up emojis when you've gotten this far if you want me to go start from our studio again at the beginning will you give me a maybe a thumbs down i hate to ask for thumbs downs but if you give me a thumbs down i'll start from the beginning of this okay i see thumbs ups which is good okay thumbs up okay okay let me check the chat okay waiting still okay okay some people are saying no okay so thank you no that's a good one okay so i'm gonna close this out and for those of you who made it there you can take a water break i'm gonna go to in our studio file new project and then you have these choices new directory existing directory version control and we want to do version control because we're starting from a github project so all of our files are up on github.com we want to pull them down version control and i'm going to click on get to clone a project from a git repository so it's going to clone it locally so it's going to just copy all the files that are sitting in that github repository right now we know they already work we know they're already published on netlify so all we need to do is pull them from github and make sure that github knows where they should go to when we push and pull so get and then i'm going to paste in my repository url that i copied from the github repository from that clipboard copy to clipboard icon and it populates my project directory name i'm going to put my project as a subdirectory of one of my folders locally so i can find it again check box open in new session let me check the chat great people seem like they're getting there okay perfect so i'm gonna hold my breath and gonna go ahead and hit my button so create project boom and it should be doing it okay now i'm going to close out the the project i started in because i don't need that anymore but now i'm looking at an rstudio project an r project in our studio uh that corresponds to emily dash cooper okay so it populated in the place that i told it to so it's in my r sites folder the name of the project is called emily cooper and you can see it looks pretty similar over here in the file pane let me make this mecca big there we go over here in the file pane this looks pretty similar it's actually identical to what's in our github repository so i'm actually going to make this i don't want to totally make it disappear because i always have trouble with this small screen um i want to show this side by side here so you can see so in my github repository things are sorted a little bit differently um but we have content we have a data folder um we have a layouts folder we have a static folder we have that themes folder so that themes folder that i initially showed you which is where all of the the meat of the hugo apparel theme lives that's again a do not touch a read only file but this is all there and you can see that you have a copy of the readme.md file and that's again what we're going to start following right now you have the netliphytomol file this is how we teach netlify how to build your site uh we have this our proj folder here so mine is still called iyo apparel yours might be as well so you might want to change the project name to match your um your actual project i'm going to check the box here and click rename and make it match my my folder change that so that was checking the box and then clicking the rename button at the top we have this index.rmd file which i didn't show you earlier this one is one it's another no touch you don't need to touch it it's only got a little yaml in there that tells the rstudio ide essentially how to build your site so it lets the our studio ide know that you're building a blog down site which is what we'll be using the our package that we'll be using to be able to build this and we have a lot of other files that we're going to hopefully get to but i just want you to see that these are the exact same files that you had before so if you did change your our project name you could go ahead and use that as kind of your first commit it shouldn't change anything in your actual um deployed site but if you checked both those boxes you can see that i'm replacing you know one file with another if i click on diff i'm going to say um change my our garage name i'm going to commit and when i push you can see that it pushed to main and then if i go over to github you should be able to see yeah so now i've got emily dash cooper.rproj there so the good news is that i know that my github is talking to my rstudio um and now i know that these files that i'm seeing in my rstudio ide are ones that if i change them and i push to github those will automatically be what nutlify sees so what we're looking at is the actual source files for our website we were able to go ahead and publish it on netlify so it looks like this out in the real world so how do we create that site in our studio so i'm going to make this really big there we go and i'm going to start using the blog down package so if you were unable to access the pre-work ahead of time the block down package is installed by install packages and quotes log down you would run that and make it bigger and once you're in there you can do a few different things with blog downloaded so if you have the blog down package already installed you should be able to do library blog down and not see anything print um one thing you can do is you can type hugo version uh open and close parentheses and then you can check the local hugo version that blogdon is using to build your site and if you remember right i i taught netlified to build your site with hugo version 0.80 and you can see it that's actually what i'm using to build the site locally also so this is really good news i'll show you how to check those more formally later but that's just a quick check to make sure that you have the blog down package installed and loaded um so i'm going to check the chat real quick okay do other people have two are proj files oh good question so when you do change the name of it sometimes what you need to do is over here in the r studio ide file pane sometimes you have to click that little uh arrow button that recycle button up at the top to refresh the file listing so if you renamed it and you're seeing two are proj files now you might want to do a little refresh and if you look in your get pane you should be able to see that you um you can also refresh that get pane too so you can see that okay so i'm hoping that everybody has the block down package installed uh anytime i open a new block down project the first thing i do is i go up to the rstudio add-ins which you may not have used a package before that has add-ins but atoms are just ways to kind of run a function there's also usually a way to do it in the console as well but i'm going to use this blog down add-in so if you have the blog down package installed this add-in should be there for you i'm gonna use this serv site add-in and that's the thing that's going to run hugo for me and build my site locally so i'm going to click serve site and you can see that it does print something to my console so i could have run blog down serv underscore site and built it as well and it prints out some gobbledygook here this is all stuff to tell you that it's building your site and serving it with a local server so this is one that nobody else can see but you if you make any changes to this and you're previewing it locally this is just your way of smell testing what you're working on iterating on it and seeing what it will look like when you publish it but this is not a published site this is a site that you're previewing in the ide now you can see that it populated for me over here in this viewer pane um and you know you can kind of scroll down now i really caution you to ever use this viewer pane um other than for um just a quick cursory look because it's a little bit of an out of date um web browser and so sometimes things can look a little bit different in the viewer pane and you might think that they look wrong um so i really encourage people when they're working on a blog down site to click on this little icon so you should see in the viewer pane up here and your viewer pane might be in a different place on your in your ide but look for look for a viewer and there's this x that says remove current viewer item don't do that there's uh broom clear all viewer items don't do that what you want is this one over here when i hover over it let's see it says show a new window it's got that little error on arrow on it i'm going to click on that and then you can see that what it does is it sends that website up to my my normal browser my default browser happens to be firefox um so oops sorry i'm trying to keep trying to move my zoom around where it's not in my way um there we go so now what i'm seeing is i'm seeing the exact same site that netlify is showing me as deployed but this is my local preview so you can see here this is my telltale sign localhost 4321 this is just a local version but it's the local version of the same site which is great and you can click around on it it's a fully functional website it should work the exact same way that your site works when you deploy it so click around make sure for yourself that you're seeing things images look like they're populating all of the different sections are there so we should at this point have a fully functioning website that you're looking at and from here i'm going to start working through the readme that's in the github repository so if you go back to your github repository you can see that i have a little bit of information about the apparel theme we've already created it now where i want to start is with a little bit of um site configuration so we're going to open up one of the files and this is a file that i would generally only touch when i'm first setting up my site or making kind of larger changes it's not one where every time you're going to edit it but we're going to start configuring the site i'm going to go back to my actual website and at this point usually when i'm working on block down i um i kind of ignore that viewer pane all together and i'm going to make my our studio a little smaller i'm going to kind of move some windows around here there we go because i want you to be able to see things as i'm changing them so what i'd like for you to do is in your rstudio to open up a file called config.tomo file and this is what's called the site configuration file so if you open up that file it's a pretty long file if you scroll to the bottom about 159 lines um it's written in tomal which is tom's obvious markup language which i don't know why they all have to be named something that sounds sort of condescending because it's not totally obvious but it's similar to yaml so if you're familiar with our markdown and you've worked with yaml before it's another way of specifying key and value pairs and so this is my way of giving you variables that i'm listening to when i designed the hugo apparel theme so there's a couple of these in here that are specific to hugo in general so we can control how hugo works through these variables and then but in some of these are variables that i've made up that i added here because i wanted to give you a way to change something in the theme so i said okay i'm going to add a key here maybe give it a default value and then you can change things as you go so maybe the first thing you could do is give your site a title so um you can say you know personal website of emily cooper i'm going to leave that because i'm keeping mine as emily cooper but you could change that the title doesn't show up on anywhere so when we save this it's not going to change anything that you're viewing yet this is actually populating some of the metadata that goes into your website so google search engines or when you share it for example these things are important so don't leave them blank and don't leave them with the default values so change the title and the author um i'll come back to some of these other ones later but know that these are all set up to just work for you they should be good to go i'm going to scroll down to where it says params and params for me is on line 30 it should be line dirty for you as well this is actually where you know you're starting to talk to me so this is the variables that i have given you everything else is um hugo but params is something where i've given you specific variables for the theme that i've developed so you can see that it has an org name our studio emily looked worked at savoir i think um or glocal i'm gonna do paris uh description um that ends up going into the meta tags as well but you can change that there's a way to change the favicon which is the little bitty icon and your tab browser i'll talk to a little bit about that later um you can change some simple things like you can make nav all caps right now you can see that about blog projects those are all all caps right now i could change that to false for example there and you can see that that's changed in the browser there's a knob for putting your social links in the header versus in the footer i have it false in the header but if you change that to true and hit save you'll see that it gets kind of sandwiched in there over to the right i don't love that but it's there for people who want it there i'll turn that to false i do have social and footer it'll look a little bit different on the main on the home page versus on the other pages but it's right there for you um twitter username you can do that what i'd like to focus on first though is line 51. so this is a built-in color theme so this is the thing that's going to make your site immediately different from anybody else's site using the same hugo theme so i had one of my past interns and now a data science educator at our studio desiree de leon helped me make some built-in color themes that look just nice and meet minimum accessibility requirements for color contrast so that you can use these and feel confident that you're not going to stumble into a place where your text is not visible um and maybe you forgot to check uh that maybe the link text was going to meet color contrast guidelines so these are some built-in color themes that you can really quickly use and change so i started you off here with violet but you can try out any of these see how they look here's forest i liked this one a lot this was desiree's green moment so you can see that everything changes text colors background colors um the background of the site sidebar colors everything updates so that's forest uh grayscale is nice if you're trying to go for less colorful just white and black pretty simple but it looks nice you can see that everything updates immediately uh peach is actually one of my favorites i almost use peach for my own site it's kind of fun you click around it's a little bit like kind of rusty colored and i like it uh plum it's kind of a little bit cooler toned there's a little bit of green in there if you click around you can see things changing oh i'll go to the contact page see that everything updates poppy is our orange moment so that's nice as well skye oops this guy is kind of a blue okay i already showed you violet that was the one we started with and water water's kind of a teal one so play around with themes while you're at it um and uh and while you're playing around with those locally i want to tell you a little bit more about what is actually happening under the hood when you do this so what's happening under the hood is that we've used the serbsite add-in with the block down package and so what it's doing is it's creating a server locally for you and it's listening to any changes that you make in your actual files and so you can see launching the server via the command serving the directory and it's going basically in the background the whole time and so anytime that you make changes like what we're doing right now they'll propagate immediately to your um to your local site and this also includes changes to content but changes to things visual like the theme are also easy to see with this as well now if i wanted to i could push this to github and change my deployed site in not too long so i'm actually going to do that right now to get you used to making some changes here another thing that you can do really quickly oh sorry um like my content is not changing in the uh like you know when i change colors or my author name it doesn't get reflected okay let's try going i'm gonna stop my server okay so now i don't have a local server started so i go to blog down serve site and i push it into a browser window are you able to get that far yeah but you're looking at the local host site i'm sorry i just want to confirm it before i move on if you could just confirm for me that you're looking at localhost in your browser locally yeah yeah okay cool and so then when you change things in your config tomo file nothing's updating no are you hitting save yeah so you're doing something like this and hitting save is it updating in your studio viewer no it's not is anything printing to your console no did you see this print when you hit the servsite add-in yes okay um i don't have a great idea for why this is happening it looked like there was other people who might be not seeing changes as well i think that a few other things like um two other people are you all experiencing the same thing where when you serve site um and then you make changes and save it nothing's happening so listen i guess i figured out something i forgot to install the uh you know uh hero version i'm sorry sorry my daughter just screamed what mine is sleeping right now yes sorry i just heard mom so i i couldn't hear what did you say you forgot i'm saying that uh i because i did not install the uh hugo version uh in in the block down and that was the reason i was not able to do it but now oh okay so so checking the hugo version is pretty important right now so yeah so good question so because i did it the way i did it you may not have had hugo installed so thank you very much for pointing that out so you don't have hugo installed so install hugo um you can do version equals question mark 0.8.0 it looks like the defaults are what we want so do install hugo for those of you who are not seeing this so um uh i will file an issue for us to not print the we're launching the server via the command if you don't have hugo installed install hugo version uh so this was part of the um the setup instructions too for those of you who um who might be feeling uh you don't have that so here is the install hugo instructions so i'll put these in the chat for those of you who missed that part all right please would you show us the version the version 0.8 0.0 can you see my screen right now it's at the very bottom okay all right so now if you do that you should be able to change the theme and you should be able to serve your site and see the things change uh if you scroll down for those of you who are able to get this working there's also a custom text font family and custom heading font family i'm sorry for the screaming if you can hear that we're having lunch troubles uh so you can change uh fonts to any of these options that are available on this in this list here so i'm going to really quickly change mine to bitter that's one of the options and i'm going to do bitter for both you can see that my site changed if i go over to my local site you can see that everything changes as well so i'm going to go forth i've only made these few changes but i am going to commit these so i'm going to say update my site configuration i'm going to commit and i'm going to push it remove my zoom controls and now i'm going to go back to sort of like my dashboard of browser windows if i go back to netlify and if i refresh that page there you can see that it detected that change it detected my rpg name change and published that but that didn't change anything about the site oops and you can see that uh it's saying processing uh and it tags it with my um my commit message that i just sent to github so update my site configuration if i click on that you can see that it did all the same good stuff that it did before all the green messages are there and my site is live so uh it says it's finishing the processing the build request it should all be there though and now if i go back to my browser window the actual one where my real site is that is live and shareable if i click the refresh button it should be forest colored and with a different font so you can see if i click around now it looks just like my live preview so it didn't take that long to um to build an update let's see it says deploy site completed in 1.3 seconds and the build completed in 596 milliseconds okay so i'm going to take a break right here it's 11 59. i'd like to take a 10 minute uh water bathroom break um and if you're interested in to keep toying with this you can keep playing with your site push push to github and then watch it populate to netlify and we'll be back in uh 10 minutes to start editing our site and i'll start responding to the chat questions i'll make one more change and then commit it to get for those who are telling me they don't like it that's okay i don't love it either but it works all right okay so i'm going to go scroll down and change a social icon so i'm going to i happen to know font awesome so i don't need to look it up but i provided the documentation here for you to find other icons um i know that i can provide a uh a youtube um link i know that that works and then i'm just going to i do that and i go back to my local preview site you should see that little player icon there and uh it'll automatically take you to the link that i provided okay so i just made a silly little change just to test things out i'm going to do git commit close that out check the box you can see that i just made a silly change just to change one icon change one icon that's my commit message i hit commit push and it goes then i go back to netlify building i watch it build it's going i can also go back to github i can hit refresh you can see that the latest changes that change one icon in the netlify tab it's working it's working it's working site is live let's go over here and what i should see is that that github icon is replaced by a youtube icon so let's hit refresh there we go okay i'm gonna go take a restroom break and get fill up my water and i'll be back at 12 10. all right hello everyone i'm back uh it sounds like for some of you all this is a crash course in github too so i apologize for that that's never pleasant to do um but maybe it's good to kind of rip the band-aid off now um if you want to have a functioning website that um that you can update and maintain i really recommend uh using git and github for that and in a lot of ways i actually think that making a blog down site and making a site that you deploy on netflie is a really great way to start getting used to git and github so i'm going to do i did it twice before so i'm going to do or i've done three pushes now i'm going to do it one more time just to make sure that we're all caught up in the same place and as a refresh the links that i have open are my netlify and a landing page my github repository so you can see that i've made a few commits while we've been together i changed my our project name i updated my site configuration and i changed one icon and what we've seen so far is that it propagated to this website that netlify is currently publishing for me and this is my local version of the same site so i'm going to change my theme real quick locally so that it's a little bit easier when i flip back forth we cannot see your screen oh my gosh thank you sorry i turned it off briefly while i was texting my husband thank you all right so here was my commit messages so i changed one icon updated my site configuration and changed my our project name and now i'm going to go to my live preview and i'm going to change the theme real quick just so you can see um the difference when i go back and forth i'll choose water because it's a little bit different okay so now you'll see that my live preview is going to be the water theme whereas my deployed is using forest so uh so there's a lot more knobs to turn in this configuration file the config.tomo file um it controls your social icons and there's a blog post about that it's linked to in your readme about how to change those we changed one of them quickly but that's definitely one of the personalization elements that you can do um it does also affect the menu so this is the place starting at line 102 for me where i can start to affect what goes on in the top nav bar there so you can see that i have uh about is the first one and that's what the weight stands for there's blog projects talks and if you don't want to blog if that's not a thing that you want to do you simply can remove that menu header from here you can just take that block out of this and add it back in later if you wanted it and then we've got projects and talks there's also a footer so that's where i have currently my license and my contact form and then the stuff that's below um i really recommend uh if you if you care about privacy and you want to make sure that you're following best practices uh you can look at this link about hugo and the gdpr and i've tried to populate um this sample repo with all the things that you would probably want to do um i have kept google analytics but it does anonymize the ip and respects do not track but you can turn it off completely if you like so um i put that there mainly as a placeholder to let you know that these are all things that you can tweak if you really want to dig into it and there's some pretty good documentation about how to do so so i've tried to set you up with some basic privacy here but know that those are all options that you can change and those are things that hugo provides for you so hugo had a pretty big push of features to respect gdpr and make it easier for hugo theme authors to respect gdpr so i'm going to move on from the site configuration i'm going to go back to the readme and point out that we changed the the fonts we changed a little bit of the color themes you learned how to do that you can read full docs um about both of these they're linked to from the readme so there's a full doc on fonts if you want to really get into your font choices i've built in some nice ones for you i think but you can also read up about how to customize those further and i've given you a few different options actually the themes is just one of them but there's a few different options for picking color themes and there's a blog post that i wrote about that as well on the doc site so lots of different ways you can go to make a totally different looking site and then social icons i barely touched on just now but there is a blog post on it in the docs so you can read the full docs here that was in the configuration tomo file so in the rest of our time together what i'd love to get you oriented to is pages uh and sections here so that's really the meat of your of your site and it's a lot of what hugo really offers and makes um and makes it really powerful but also possibly um kind of confusing at first so let me check the chat real quick see colors allison you're not sharing anymore i got it okay can we change the icon uh you can um that's in the configuration tomo file that's um i think it's logo and so you can change that um okay it looks like people are getting used to pushing and pulling and so that's great um if you haven't uh read through happy get with r i really recommend um walking through it that was in the i tried to pick out some very helpful things to do in the pre-work but really the whole book is magical so if you're new to get in github it gives you some good exercises and things to get practice um so if you're not familiar with how to do this stuff and it's not um it's not jiving with how you think or work about um with things then um i really recommend kind of trying to get your feet wet there but also remember that it's not a big deal if you book your site with git or github at this point you're just working with a template site you can recreate this anytime you want and get back to a working functioning site all right so i'm going to close out config tomo and i'm going to focus on i'm trying to move my browser windows around i am going to start looking at content so the content folder is where everything lives and that's the main place where when you're maintaining your site and adding new content that's where you're going to go um so there's a few different sections here i'm going to start with blog because it's one of the simpler ones and when you click on blog you go into a file structure where you see this markdown file underscore index.md and then you see some folders here and this is exactly um what you would expect to see in a hugo site because in hugo the motto is everything is a page and so everything that you see in your built site is actually a page uh it's actually a markdown page and so we use yaml in maybe a different way than you're used to if you're used to working with our markdown in the sense that your yaml is your way of providing variables to hugo um and that's your way of changing the words that you see on the screen and hugo is taking care of plopping them in the right layout file so you can think of hugo as providing a template and pulling from the information you're providing in your markdown files and in your yaml and plopping it in there and so for the most part when you're trying to change how things look or work you're steering around by changing things in your yaml now the name of the file actually matters here so don't ever change this one it's underscore dot or underscore index md and that one happens to be a section configuration so that one will always be at the root of a new section and it's your way of configuring how that section looks so you can see that i have a title a description an author all of these things are maybe expectable but you might not necessarily think of them as being for a section but this is how i can populate what you end up seeing on this page when i go to blog um so you can see that i'm showing the post thumbnail for example true i'm showing the author byline here true i'm showing the post date true um and i have a specific layout here i've given you three choices you can choose list list sidebar or list grid i'm going to change this to list right now and show you what changes so what changes in my live preview is that it shows you kind of a little bit of a simpler list without that sidebar and you can take away those thumbnails too you can set the post thumbnail to false and i think it still looks pretty nice i'll bring the thumbnails back hit true so this is a list you can also do a grid oops gerd that will not work grid now you can see all of my posts show up in a grid and then i'm going to go back to the sidebar which is where i started with okay bring it back into the screen so you have those three layouts to work with for setting up your listing page for your blog and why is it called a listing page it's called a listing page because it's listing all of the pages in that section so it's giving the structure and it's looking nice and it's pulling a nice image it's pulling the title a little snippet the author name and the date um and it's giving you basically this little preview of each individual page that's in this section so if you look in here i've i used a an interesting lorem ipsum generator based on simpson's episode star wars and arrested development um so if you click on any of those folders within blog those would be where you'd put your posts and so this first one is a dot our markdown post and you can see that it looks a little bit more like a normal our markdown document for you in the sense that it has yaml at the top and then it has stuff inside right so you're used to probably writing like this and working in documents like this and this is a typical post that you would knit and share with other people i'm gonna check the chat real quick because i see six so i hope that there's not an emergency that everybody is oh somebody got their first ever push to get via our studio wow what a journey all right so that definitely weren't celebration um all right so uh so this is a listing page and when i click on lorem simpson for example that takes you to an actual individual page um so these are single pages and in hugo it's useful to realize that we have separate templates for a listing page so a page where you can see everything it's sort of like a menu and then you have single pages as well um so the next feature i'm going to show you about hugo apparel is actually meant just for teaching it's not meant for publishing at all but it's this little thing that i've called the hair bot cat and this was my way of trying to teach this hugo directory structure a little bit easier i've put it in every single page of content in this example site that i've given you and so what happens is if you click on the little here bot cat you see it says use me to find your way in your website so it says here i am so you can see that it's telling you that the source of what you're looking at is in content blog then it's inside this folder and then the file that you're looking at is index.markdown and then it says here's my our markdown source file so it actually knows that you and knitted this file and so the actual source file is index.rmarkdown and then it tells you you'll want to edit this file then re-knit to see the changes take effect in your site preview to remove this little hereby cat you can remove this piece of text there here and then it also tells you some metadata some information it says my content section is blog my layout is single and then it also tells you what images are in this page bundle so you can see that it's found a featured.jpg image and the featured one is kind of a um a a secret not really a secret but it's a way that hugo themes used to uh populate that nice little thumbnail image so if you name that image with the keyword featured in it it will show up as the thumbnail image and the listing page so i'd like for everybody to take a few minutes and look through the posts that i've given you every single one of them has a hereby cat and i would love it if you could try to remove this code the here code from maybe one or two posts see if you can find the post and see if you can change it i'm gonna do it live so you can watch my screen if you'd like but my idea is really that i want you to just kind of be able to find the file that is populating the thing that you're looking at in your local browser and if you wanted to make more changes you can change any of the text you can delete all of this you can make a different plot you can try out different things and realizing the file that you're looking at in your live preview versus the file that you edit i think is one of the most useful things to learn about hugo and blog down because it's usually um a good starting point if you're seeing something unexpected to try to find out where the source is for that file so i'm going to go in i'm in lorem arrested development and i'm previewing lauren arrested development uh so you can see that uh it's previewing the index.markdown file but the actual source is in our markdown file so i'm actually knitting it and taking it from an r markdown to a markdown file and then that's what you're previewing so if i make any changes here if i don't knit if i just delete that here code and i save nothing should change and you see nothing changes and that's because i have not knit yet now if i click that nip button you should see my little hereby cat disappear takes a second it's processing and then you can see that the preview updated and it took that away i'm going to try to add something else here am i where i think i am now again if i hit save nothing's happening and that's because i've set up your site to do that if i knit you can see that it populates am i where i think i am okay um and this happens to be in our markdown file so that means that i can actually use r in here as well so i'm going to use a package that you may not have installed i'm going to use palmer penguins and let's do a glimpse of penguins and again if i hit save nothing's going to happen because i'm actually previewing the markdown file i have to knit to be able to create that oh and i forgot the plier and this that was actually a really good simulation of why i've made it so that it does not automatically knit your files whenever you save because i find it's really helpful to be able to work on uh posts that have r code and have this have the knitting be intentional so i made hugo apparel so that people could edit it more easily and i made the site for you so that you could edit things more easily and change things in your site um and not have um not have errors when it's it's difficult to debug sometimes when you can't tell if it's an error in your post or in your hugo site or something else so i like to be able to knit with intention so keep in mind that whenever you're working in a dot our markdown file or a dot rmd file that's the thing that block down is actually giving you is the ability to do that but you need to knit intentionally in this site so you can see that now it's loading the palmer penguins data set and it's showing me um uh the output there from deep wire glimpse so i can change this file i'd love for you to play around and see if you can change anything else you're also welcome to try playing around with that underscore index.md file you can change the layout for example um since i'm in the list sidebar layout i could change this you know a sidebar for emily cooper's thoughts maybe emily cooper's thoughts maybe i'll change this i have a lot of thoughts and then maybe i'll make this emily cooper so this is in the underscore index.md file so predicting where that's going to change things if i go back to the blog listing page if i change anything in this underscore index.md file it should populate there so a sidebar for emily cooper's thoughts and i don't have to knit here because this is just an md file this is a markdown file so everything i do there is automatically integrated and there's more documentation in the in the read me about some of these things um so that is um a preview of how to use the blog section now all sections kind of work similarly in the sense that every section gets configured by that underscore index.md file and then every section has pages associated with it the single pages those are all in folders called page bundles where there's a markdown file and then maybe image files or even a data file any local files that you would need to be able to depend on uh you put those in the same page bundle as well okay i see 12 chats so i'm going to check real quick and make sure is there a difference between a dot rmd and a dot our markdown file yes there is martine that is a really good question um dot rmd files it's a little bit in the weeds but dot rmd files will knit to html by default um and i prefer to knit to mark down um so i have configured your site so that you don't have that option because hugo apparel as a theme was built to make mark down a first class citizen and that's because hugo um works better with markdown input in my opinion so i've made it a little bit opinionated and um and made it so that if you're working with our markdown you can knit to markdown uh but if you work with dot rmd also it will work um to mark down as well and the reason for that there's a blog post that i have on this um about doing your r profile um i have you in this r profile and your project root i have you in full markdown mode so blog down method equals markdown for me this allows me as a hugo theme author to take advantage of some of the things that i think hugo does really well um and that includes automatic detection of table of contents and um syntax highlighting and a few other things that i like to be able to depend on as a hugo theme author so i've made it that way for you you can change that to html if you'd like in my experience i've had a blog down site now for three years i have very rarely needed the pandoc features that come with the html output usually my content might be more not as advanced as other people so i don't really depend on that that much okay so uh we talked about listing layouts and there's also a way to configure that list sidebar we changed mine a little bit so i made it a sidebar for emily cooper's thoughts and then we edited some single pages um and there's a little bit more documentation in this as well um and you can change any single page the way it looks let me open up one of my lorem ipsum site um uh let's see let's do lorem ipsum star wars um i'm going to change that to single sidebar and let's go to lorem star wars and watch it happen i'm also going to remove the here and then because i'm dealing with a dot md file if i just hit save it's going to automatically populate so when i hit save you can see that things changed and it gave me a little sidebar on the right there um and this is there's no r code in this that's why i'm just working with a markdown file you can include markdown posts our markdown posts you can mix and match those you don't always need to do our markdown if you're not going to be using r if you're mainly using it to write down some thoughts and put together um maybe some resources for yourself and links then you don't need uh to necessarily always work in a dot rmz or our markdown file uh those are for if you want to have code also okay so uh another thing that's kind of nice about this theme i think is that i've built in the ability to have um external resources uh related to any page like a slide deck youtube video or a github repository things like that i'll show you that in action on the actual um on my preview site so if you go to projects so up at the top nav bar we were in blog before if you go over to projects and if you click on palmer penguins you can see an example of those little buttons there um so this is my way of kind of keeping track of all the links and all the bookmarks that i often can have when i'm working on something a project or a talk or a blog post a lot of times you want to centralize the link somewhere and in somewhere that's very conspicuous for the reader and kind of call it out a little bit um and that's that's for functionality for yourself or for other people so here with the palmer penguins i'm linking to the package down website i'm linking to the source code for the package and i'm linking to a blog post um about the palmer penguins getting on crayon which was a really exciting moment for us now if you wanted to change this um you can use my hairbot cat and so click on him and you can see that here i am i'm in content project penguins index.md and to remove me delete that line inside this file my content section is project my layout is single sidebar which we can see there and you can see the images in the page bundle um that it's finding so it's finding a featured image but it's finding a hex image um and there's some notes about what it's doing there uh so let's change that let's maybe add a link change a link so what i would do is i would go over to the file that it tells me i need to edit to change it so content project penguins i'm going to go to index.md and here you can see the links how it's formatted so it says links and then these are the same links that um the same icons and icon packs are available that you used for your social links so again i have these memorized because i use them a lot you'll need to look at the documentation to figure out which links um or which icons you want to use for different things um but let's say i wanted to change this one to twitter so i happen to know that in the the font awesome brand icon pack there's a twitter icon so uh and then i happen to know right think allison horst's twitter handle is is that and so if i click save you should see my previous code button change into a twitter icon oh and i didn't change the name of it tweet at allison horst there now let's see if i guessed her right nope that is not allison horst let's see ah it's underscore okay that poor person probably gets tagged a lot in palmer penguins related excitement okay all right so there's allison horst uh so you can do this for any type of content i've enabled it um because i find this really useful it's one of my favorite features of uh different themes that i've used in the past um so uh adding links to things should be relatively easy i'm gonna remove the hereby cat there you go uh and there's some instructions here for how to pick your icon and your icon pack and then there's also a larger blog post that was linked up in the social links area where i talked about how to do that as well uh and then you can also customize that page sidebar content so if you do choose that single sidebar like what we're looking at here you can customize everything that you see there and that's through a few different mechanisms i'm not going to get too much in the weeds of that the main thing to realize is that everything is populating from your yaml in your markdown files so whether you're working with um a section like an underscore index.md file or you're looking at an individual page all of the yaml is your way of communicating with the hugo apparel theme and making uh different words show up different links different things show up on the pages that you see so we have about 20 minutes left i want to make sure that we get to the home page and the about page because those are things that are really high payoff now that you hopefully have a little bit of an understanding of the structure of those other sections the blog projects and talks works the same way we can go back and look at some weird ones so the weird sections are the home page and the about page so those are ones where they're not necessarily going to work like the other sections in the site but they're ones that you probably won't be touching as often and adding new content necessarily so i'm going to head over to the home page so the home page is populated by content underscore index.md so let me go back to content and find that underscore dot uh md underscore index.md so you can see that i have a title a subtitle um this is my personal website you can see that i have an image linked here so you can add different images now where those images go is in your static folder in the root so i've populated static for you with the image folder already and you can see that that's where revoir.jpg is okay so let's say we wanted to change that um let's change it to unicorn megaphone and then remember that the extension has changed as well it's dot png and then i'm also going to make the image on the left false so that means it's going to be on the right but it had to be a boolean uh and let me go back to the preview i want you to see it as it changes okay so you're gonna see a unicorn with the megaphone you're gonna see the image is gonna be on the right um text align left let's make that true um we're showing the social links i'll keep those we'll show the action link so this read more is the action link um it's going to the about page um which i like and the action label is read more and then this is the html for assemble the little arrow symbol that you're seeing there um it's a text right now there's also the option to have a button let's see if i do button how it looks and if i hit save everything should update so let's see there we go so now we have a unicorn with a megaphone uh we changed the description i made this little read more a button instead of just text um but everything else is pretty much the same so that is how you would uh customize your home page in the hugo apparel theme so i've given you a few knobs to be able to change things i personally like being able to have a home page that's a little bit simple and streamlined with not a lot of stuff going on and then be able to dig deeper into getting to know someone with dedicated sections like the about page and blog and projects and talk um and for me the the labeling of these menu items um i think it's nice to kind of have a little bit of a standard and not to get too creative not to get too long with them um but to give people a taste of um you know what you're working on and the things that you the thing the types of projects and things that you work on and think about and so i like keeping this to less than five up in the top nav bar um and i like about being a first one i think i remember one of my friends when i first taught um blog down and using the hugo academic theme called it the scroll of death because the demo site is just so long for the hugo academic theme and that ends up being the home page it's intended to be one where you could have a single page but i did not design apparel that way so it will never be a single page um i really wanted a simple landing page that isn't overwhelming and it lets you put an image on there and then allows you to kind of dive deeper so the actual homepage is not very complicated that's what it looks like i'm going to check on the chat real quick about i switched from blog down to distill because it just seemed easier you go a pair of scenes either um so enrico that's a really good question i love distill um i'm obviously an author on distill and we made the theming a lot easier so hopefully you could use a theming system with distill to uh to customize it i'll i'll put the um the site up here for those of you who aren't familiar with this doll this is a distill site but there's a lot of things you can do with it and let's see if i go to the reference page we have our new package downside if you go to examples there i'll throw these in the um in the chat because this is helpful to see these are kind of different uh people's ways of using distill so these are all the kinds of different examples so like you know um this person michael clark gosh he amazes me this is a distilled site still but it looks totally different right so you can do all of this now with the custom themer he did it the the hard way before we made the easy way but you can make sites like that so um i think if you're used to working with distill and you like it and it gives you the layouts that you want um the main restriction for distill is that you're going to have to write your own html for any other additional types of content so this is miles mcbain's site for example his distill site and he has talks this is just a simple list that he's done and that's great i like it a lot it's very clear uh he has you know oops i think that might be taking me to a different place uh he has an about page i did add um in the distilled package we added the ability to have a postcards page because i really wanted people to be able to have an about page in their um in their distill sites so you now have a proper about page i don't believe miles miles has this um about page here but uh let's see if i go to my blog post on this um you can add postcards now as a um as an about page and distill so i think that gets you pretty pretty far if you do distill you do a themer and you do um a postcards uh having said that if you had already kind of climbed the blog downhill which is understanding hugo and um uh getting used to how blog down works then um i i'm happy to continue using blog down because for me it gives me more flexibility in the kinds of content that i can share and um and i obviously made my own theme to make it the way that i want it to i also tried to make it useful for other people so i tried to incorporate a lot of the features that people seem to really enjoy in other themes but it definitely does give you a little bit more flexibility in terms of the layouts and the kinds of things you can add so this is my own apparel site which i finally merged in this week in an effort to have camaraderie with you all it's a work in progress but um i really love it and uh i think it just um i think blog down and hugo underneath it uh it gives you a lot of flexibility so it really kind of just depends on what you want to maintain um and uh and and what you feel like learning but i feel like if you've already learned blog down in hugo then you're you've got a lot of the hard part down um so so that's where i would fall on that spectrum um so we've changed the home page um let's tackle the about page the about page actually uh takes a little bit of work uh there is uh there's a blog post about how to tackle the homepage as well on the huco paradox site which i linked to so customizing your home page there's a little walkthrough for how to do that and then if you scroll down in the readme i have the about page as well now the about page is actually a little bit unique because it populates from the yaml front matter in four markdown files so there's one that you've become familiar with now that's the section configuration file but then there's also individual index.md files within a header folder a main folder and a sidebar folder and i did that to make it more clear when you're editing things um what you're editing so if i go to this about tab this is the header this upper part here and you can choose to not have that as well you don't have to have that this is main and then this is the sidebar so those are the files that we're going to edit right now and there's also a blog post again about um changing the about page more so i'm really quickly though going to commit and push to github to show that workflow one more time so i'm gonna go to get well first i'm going to show you the get pain i changed a lot of stuff so i've changed um i added a a plot that's what you're seeing here that png file i edited my penguins uh index.md i edited edited the star wars file um and i re-knitted a file so i edited the r markdown file in the markdown file and then i've changed a bunch of other things as well the configuration tomo file the r profile file so i am going to try to really quickly do um do some informative commit messages here and i'm going to show you a bunch of pushes all at once so this is sort of like the uh the i'm comfortable with get now and i i want to um do piecemeal pushes now one caution is that when you push i would wait to push until the end after you do all these commits because netlify is going to build every time you push um so every change that it detects in your source file so you may just want to do a bunch of commits and then push so you don't always have to do commit and then push you can commit a few times and then push everything all at once so add note about html method mode commit so it just kind of goes away but it's staged it's not being it hasn't been sent up to github.com yet um changing your site config options that's the config tomo file commit um oh here's my home page home page with unicorn megaphone commit here is customizing my blog sidebar or listing sidebar uh these file changes i also okay so i oh rm here and add penguins peak okay we're getting there penguins i changed one of my icons and button links to project page and then finally oh star wars is now single sidebar layout rm here i think i rmd here yep it did okay so i have all these commits there okay but if i go to github right now you shouldn't see any of those i should still be at 24 commits okay so let's go back to my rstudio and i'm going to click on that little get thing and i'm going to push my branch so i'm going to push all of those commits that i just did up to github so let's watch what happens so i push that's when it actually talks to github it has sent them up to main let's click here how many more did i do oh now i'm at 31 commits when i refresh you can see that all of those commits populated here here's change one icons that's where i started from and then i added the note up to star wars is not a single sidebar layout and then let's go over to netlify let's click refresh so you can see that the last production deploy that netlify had was the change one icon commit and now um it is going off of my latest batch of commits so when i pushed it triggered netlify and netlify said oh wait now i hear i hear some action going on in that get up repository let's fire up this hugo engine and rebuild the site for her and of course nothing blipped out on my actual site um it looks fine to the average user if i hit refresh you should see unicorn megaphone everything changes um so we now have 10 minutes left let's tackle the about page so if i go back to the project root content is where we're living in the about folder underscore index.md is my is my section configuration for this not much is actually going to change when i do this but you can change your title and description nothing is going to change in the actual preview because these are populating sort of more metadata let me go back here i'm going to change my theme real quick again so you can see and keep track of where i'm at i'm gonna go back to where we started with violet okay so my local preview now is violet uh so if i made any changes into this underscore index.md file it could be this sidebar left maybe we'll do it true maybe i'll show you what the header looks like when i set it to false if i click save there you go so you can see now my sidebar is on the left and then that header goes away and you can see the sidebar just kind of stays there i'm going to bring back that header because i kind of like it show header true there we go and that's really all i'm going to change in the um the about page is i'm moving my sidebar over to one side i'll go ahead and commit that but i won't push it yet new theme violet and sidebar left for about okay not going to commit those yet um we're not going to push those yet i just committed okay so inside about again if i go into header that's actually going to be my place for changing uh this bit right here that you just saw disappear and reappear so it says hi my name is emily cooper nice to meet you i'm a driven 20-something american from chicago who moved to paris for an unexpected job opportunity you can see all of that here in this index.md file so content about header index.md uh so here's the headline um you can show the title as headline if you wanted to um so that would be the title from the previous from the section itself uh so let's see if i do true it changes to about because that's the title of it um so let's use our headline instead there we go uh and text align right is false let's make it true just to show you something different um i'm sorry it keeps changing to a new there we go so now it's all on the right um we'll make this true i'm a 40 something uh american from uh let's see the pacific northwest um back to about there we go so you can see that it's changing um it's actually also using um a built-in hugo support for emojis so you can insert emojis there um so that's how it's getting that little french flag icon so that's the the header it's meant to be simple but it's also meant to just kind of be a short blip that you sh that people see right away when they come to your site header okay so if we go back to my about folder we can go to main next main is going to be the wider column here so at the top of this it says configure page content and the wide columns you can see that it has this title of what i'm up to lately uh it's showing the number of featured um uh for sections of this let's make it well if i make it i don't think i actually have more than one of the um of projects but let's see so now it's showing two of a blog oh and it's showing two projects and two talks um so you can control that you can also have a little intro here and so uh so that you don't just kind of dump people into your blog and project and talks um so cultures clash as i adjust to the challenges of life so you can see that that shows up right there and then it also has this little outro at the end and this was something that i saw a lot of people using in their blog down sites um to be able to have a little place to say like you know if my blog has helped you you can buy me a cup of coffee a lot of people do that um or um you know provide a way to link up with them elsewhere so you have a little place for an outro as well if you wanted to have that so that's at the bottom there so that's the main section and again there's a um a blog post linked to in your readme let's see i can't get back to okay i scroll down to we're almost at the end where the about page is yes so about page so there's the full docs here so there is a full um full docs about how to do the about page with the about pages uh the last thing i'll tackle is the sidebar because i think this is kind of a nice feature as well so let me go back to my live preview so this is how you control this little kind of book marketing over here um you have your name your author your role um some of this might be repetitive from the home page but i wanted to give people the ability to to customize you can change the avatar shape here so let's do circle let's get back to about so it kind of does that smartly um and how it's doing that uh how it's finding the file is you have to put a a file that's an image called avatar in the same folder and so it automatically looks for avatar and fills that in for you it's also showing the audio link and it's giving you a place to say what the audio link label is so whatever you want to put as an audio file it will find it if you call the file audio m4a is what it's looking for there and then we have a little link list where we have pastries people paris and so you can make this be anything that you wanted to so let's do paris france um cinnamon pastries maybe to be more specific maybe nice people i don't know why it keeps going back to the home page but that should update there we go all right and so it's pulling those social links um from what you already set up in your config tomo file so when we say social show social links that's true you could make it false just to not show those icons at all if you wanted to um and they're also at the bottom as well so if you felt like you're socialed out you could do that as well okay so i've got a lot of commits here a lot of things to push i've got three minutes left let's go out in the blaze of glory and make sure that i can still commit um about maine um edit about main number featured and change about sidebar look okay so i have a bunch of commits i don't know how many i'm gonna push them all up let's hope that nothing is broken i am good to go and then i'm going to go back to how i've been going before so if i'm back in my github repository if i click refresh i was at 31 now i'm at 36 commits so i had five commits in there let's go back to netlify there you can see that it has said i'm listening i'm building and it's already starting to build so the build is actually already completed now it's working to deploy my site site is live let's go over to zela's kepler and it should be also a different theme because i changed it to violet so you could see what i was locally previewing and let's go to the about page and you can see that all the changes have populated and it's taking a bit to get all the images in there so we're at 12 58 and this has been a whirlwind tour of um how to customize a hugo apparel site but my hope is that at the end of this now you have everything working locally for you and you can always recreate the site if you want to you can always go back and do the exact same thing that you did before name the repository something different at that step when you deployed to netlify and you can make a copy of all the files again and make sure that they're um they're working for you and so if you if you kind of want to just use this as a testing ground you definitely can it should work going forward with new versions of blog down it looks like there's a question about any final tips on potential debugging um we are updating the blog down book right now and i'm hoping that all of my tips will will end up in there we've got a few um different outlines going for that and then somebody asked can you put some reference for this and also how to build a custom hugo theme um i'm happy to offer advice and there's a lot of resources out there for how to build custom hugo themes um i believe i have a blog post about it let me see um i do have a couple in my spoonful of hugo series so i have a couple about hugo there's one for troubleshooting your build um by and large i've tried to make changes actually to the blog down package to make it so that you don't need all those tips that i have on my blog those are a little bit out of date um the last tips that i would give you is to use the new blog down checking functions so i'll run those right now for the rest of the people who are still here and i made it so that your um your site passes all the checks but oh there we go okay so um we have the blog down package installed here so i'm gonna do a final uh check site um this is sort of like the kitchen sync approach so this is going to check everything in our site there's a lot of different checking functions so if you do check underscore you can see all the different block down checking functions there's checking your config tomo file checking your content checking your git ignore checking hugo and checking netlify so those are all the various moving pieces that we've talked about during this workshop um but check site does all of those all at once for you so um i tend to like to check individual ones oh sorry i'm not sharing my screen yeah thank you there we go okay so check underscore um this is how you can see check underscore you can see all the checking functions there check config check content check get ignored check you go check network check site we're going to do check site that's the kitchen sink approach and these are all of my best tips for debugging all in one place so you can kind of try to think of checkside as like us holding your hand and trying to help you do the right thing so it's running a series of automated checks for your blogged on website project it gives you a little key to tell you what a successful check looks like a to do and then it tells you what it's going to do it checks your configuration file first it will tell you to update your base url and you should do that when you're ready to publish that's in your config tomo file as it tells you ignore files looks good everything else looks good in your configuration total file your git ignore file looks good you can see that we have all success messages here checking hugo now i have a lot of hugo versions installed we are using hugo 0.8 0.0 here and it's actually doing the same thing on netlify and using the blog down um uh the blog down version in your our profile as well so blog down is using that version to build your site locally checking netlifytomol files so that's how we check to make sure that everything is in sync between your netlify and local hugo versions and it says it's a match those are using the same hugo version and they're using the same publish directory so you're good to go there and then it also checks your content files so it checks all your yaml metadata it checks for future publish dates which won't be actually published when you hit publish they will be seen in your live preview but you won't see them so this can commonly happen especially if you've got talks for example in the future that you want to use found zero files marked as drafts checking all your armor done content so it actually checks whether you've knitted your files so it will flag you if you haven't knitted it correctly or if you forgot to knit for example and it looks like all markdown output files are up to date with their source files so that's my best advice for troubleshooting is to run that and run it pretty frequently i usually run it when i'm leaving my session always to make sure that i haven't messed anything up by the time i get back um let's see any other questions yes we have another question yes um it's uh do you need to go for each check separately or with only one comment uh it's up to you when i'm teaching usually if i have a lot of time i go one by one as we're changing things so um as i change things um as i work i usually like if i'm editing the config tomo file then when i'm done i usually run check config to make sure because i don't need all the other stuff i just need what i want and what i know i changed um if i've been messing with content i'll do check underscore content um if i'm trying to debug something i'll i'll start running other checks so it's up to you and your workflow a lot of people really prefer the check underscore site because it's all one thing and you don't have to remember it um i tend to like to go piecemeal when i'm running into an actual error because i like to be able to scope out and try to rule out things one at a time so um so it's up to you either one they're gonna be the exact same output just one is one function and the other is going one at a time also we have another question is can we directly deploy a x serangon slide slides in hugo yeah i do that all the time um so where you should do that is if you go back to your project root in your static folder you could do slides there i'll go in here i'll create a new uh our markdown file let's do from template let's find sure engine i'll install leaflet i guess um i'll save this in my slides folder let's do call it ninja it's still installing leaflet um that's a big install okay um so it's done that now i'll hit save and then um you would need to knit this okay so you can see that it kind of took over my viewer um but what will actually happen let's see do i still have a live preview going i think i closed it let's do serve site instead so if we go to serve site now um anything that goes in your static folder ends up in the root of your um uh of your actual site when it's built uh but you don't put static in the file um path so here i would do slides ninja.html and you can see that my stringent slides are there so the relative link if you're linking from within a blog post would be this part right here slides ninja.html so let's add it to a blog post real quick we'll go to blog star wars make sense right oh no that's not a yeah that's good we can do that okay and some slides here um and i'm just going to link um i'm going to create a simple link there i think that should work but this is sort of a moment of live previewing hugo relative links okay let's go to blog i added it to star wars and then i added a link to slides does it work yeah that works okay perfect um we could also add it if you remember i had links there was like icon maybe is it image [Music] icon pack i think it's f8 solid name slides does that work no that didn't work let's see how i did it before i went to project penguins oh it needs to be a map okay i won't be able to do that live i'll have to figure out what i did wrong there i can maybe i'll just try this first i thought i added it to blog posts but it might not be actually enabled for blog posts so i'll add that to my to-do list it's not there currently so it looks like links don't work in the blog posts so that'll be on my to-do list for the the theme itself so i'm going to add let's see i'm going to select all and let's add see it added a bunch of stuff because there's a lot of dependencies for that default um slide deck so add a string and slide deck and then link to it okay so that should show up and not too long in my star wars in my star wars so we'll see uh see how long that life takes um any other questions uh i think there is no more question right now there is a question for us we'll be getting this recording yes we will share with you the recording it will be shared in the youtube channel of our ladies unis i will share with you the link as well and yes i did see a comment that um uh you know is there anything special we need to do basically to um to publish this website is that link public for everyone and it is you can see um you can see that my link is public um uh maybe in one second here before we leave i'll show you how to change that name so that you're not stuck with zealous kepler uh if you go to your site settings let me make this a little bit bigger make sure i'm still sharing my screen since i keep doing that all right um and so in your in your project this is what your landing page sort of might look like you want to go over to site settings and then if you scroll down you'll see the site information and you can actually change your site name so i'm going to change this this means that all my zealous kepler links are going to be broken but um uh let's see if emily cooper is taken oh man i got emily cooper that's exciting so no one's taken that yet okay so um so now that means zealous kepler's not going to work for me anymore but um that's how you would change it and then i do have instructions for how to um uh how to change that and get a custom r bind uh io uh address uh which is what i use so for my own personal site i'm allison.rbind.io and we have some instructions about how to do that in the blog down book as well so if you'd like to get a custom domain like that you can do that and you still use netlify and have the whole workflow that we went over today um have that just work yes um so i think there are no more question okay so if there is a no more question um i think the workshop is ending decision is ending but um also i want uh to invite all of you to our next session next session next meet up it's with dr lisa lindwei she will present to us github for collaboration there is the link to subscribe in the chat so feel free if you want to join us to subscribe also uh we have uh alison horse for the part two of uh tide universe uh the the meet up is shared already in meetup you can find more details in our meetup and for the recording uh please follow us and we will find it in our youtube channel we will share it soon and also it will be shared also with all the participants via their emails so finally i will thank alison for this great workshop i learned a lot from you and thank you for very much for this life coding session it was really amazing okay excellent well i'm happy to stay for a few more minutes to troubleshoot for people who are struggling too so if you wanted to if you can leave it open i know there was a few questions that were lingering about get github and stuff so um if you want to leave it open i can stay for about 20 more minutes yeah so i can leave it open if if someone i have so i think also i have more three minutes to be because of zoom it's only okay yeah the zoom is only two hour uh two hours okay in a minute okay but i think uh they they can uh send you an email or they can send us an email to our email uh join us at our ladies.org and we will share it with you yeah and and for me maybe the um i'll send you um the link to the uh the github repository too people could um could file issues there if you have any questions i can help with that as i can see in the in the chat people are very satisfied satisfied for i have a question uh that's not github related uh oh yeah and i thought it was easier than typing i started typing three times and i'm like that's too long um so i let me turn on the camera so i was wondering is it possible to have like those buttons on the top that they changed the theme so for dark to light because sometimes it's it's late and you're still reading a blog and but you don't want to keep like a light theme and you just want to switch to another thing or things like that yeah i haven't built that in um that would be a an additional javascript thing um uh to be able to have that like little toggle button sort of for like dark and light mode um yeah that would definitely be a feature request that i would love help on from someone who uh knows javascript really well but yeah i haven't built that in yet okay thank you so maybe you're in the corona and we will invite alison to tunis i would love that i'm sorry i can't stop myself it's doing over here but uh thank you so very much listen for this because uh i mean i i hate get because i've never used it don't blame you yeah this this was like throwing you in the deep end right away so i'm sorry but but i but i really love uh you know making websites and doing that creative work and you can think of it it's already 2 a.m right now i started off you know two hours before i it has been like that but then i mean thank you so very much for this and i guess my wordpress is going to move to netly for now it's it's i'm a happy customer yeah but i'm i'm very glad that we were all here and present for your your first success with git and github in our studio i know how that feels that's like a big a trophy moment so i'm glad you were able to work through it so you can also share with that with us our websites once is done we will be happy to share it in our social media accounts yeah definitely tag me as well i'd love to see yeah uh give visibility and more voices in the rstats community yes feel free to tag our ladies jones and alison when publishing your website definitely more than happy to do so if you have one minute um allison and i noticed you didn't talk too much about the license i know that one can select but is there more material we can read about it or how do you determine which license to use yeah that's a really good question um i i think for personal websites i think that's really just your choice really um i tend to do because i i want people to be able to take my materials and do whatever they want with them i tend to use a pretty open license but um but i think for your own site you can choose to do whatever license you please um i think there are some good guidance resources like um there's i think it's which license um i'm doing a quick google search real quick um choose a license uh dot com uh so uh let me put that in the chat here um uh that one is probably my best recommendation for that but um but there's definitely some some people who have kind of um better takes on it than i do and and i realize that i'm kind of in a different situation where i i just want i want to put stuff out there and let people use it however they want but certainly i don't think anyone would ever blame you for having a more restrictive license on your on your content especially if you're posting things that are related to your work or some of your creative um uh contributions that you know you might charge money for like if you were doing consulting or things like that so um different people use different licenses for teaching and for their own personal uh sites so i i think um generally uh you know it's your site um you own it and you know make it what you're you're comfortable with right okay thank you well shall we adjourn i'm not able to find out how do i actually go ahead and get it done i am with on making websites with r dot r prime dot io development uh let me see i'm not i'm not certain um that i know that part but uh how it works um how are we doing on time can i share my screen again or are you needing to cancel the zoom room uh i don't know i think you can share your screen okay all right um so uh here is our bind support um so this is where i would go i'm gonna put it in the chat [Music] um uh and then what you do is you file a github issue um and if you just go to this repository and you click on new issue it actually gives you a nice template that can help kind of hold your hand as you do it um so it says please use this template for new our bind dot io subdomain request a volunteer will help you create this subdomain later um we don't really have enough human resources here so please be serious about your site so so you know kind of we want to make sure that you know you're you're actually going to use it don't just use it as a way to experiment necessarily um and so what you provide is your netify website address so you know you have one now like mine is emily cooper emily dashcooper.netify.app so i'd provide that and then what your preferred are bind io subdomain is so it will be you know it could be emily cooper.rbine and then you need to click on this agreement i promise i'll write at least one blog post or create one webpage on my website after i get the r buying dio um subdomain uh and then you submit your new issue once they confirm that you've got that url and the only thing you need to do on your site is go back to your config tomo file and at the very top where i have base url as a forward slash you'd you'd put in your new rbind.io address so um let's see i think emily cooper is my current site hold on um so right now with my emily cooper.netlify i would just go ahead and put that as my base url um if you wanted to use that but if you updated to an rbind.io then you would change that again so you just keep changing the base url and then sending that up to get a hub and nutlify to make sure that it propagates basically it is it is a duplicate website of network um can you say that again something it is it is a duplicate website for netlify yeah exactly exactly so your netlify url will still um will still work because it's not taking anything away um but it would basically be like a redirect essentially um so it's a rewrite redirect in the sense that the user will never see your netlify address um so for me from my site uh everything that you click on shows allison.rbind.io but technically under the hood um i have a file it is a netlife i have a netlify.app um and i oh it's a press hell that's what it is so i was trying to remember what it was apresville.netlife.app if you go to that that's my same website okay and i don't have to make any changes in terms of the url which i am putting in uh for for the our markdown oh you do need to change the base url and you're configuring the base only only so when i made this theme i was very intentional about this every single call to a url is using a hugo relative url function so i made sure that nothing will break when you change that base url my 15 year old html is coming back now yeah that can often be a source of pain when you change your base url and have things break um but this this site should work i've tested it in a number of different places and with different kinds of um base urls and subdirectories and on cloud or studio cloud so i believe that i've made it so that this works um so uh and it certainly works for me um uh with my site and um with a couple of other sites that i've made using the same theme so yeah just make sure you update that base url the main thing that that's going to do is um you know populate um some important things that matter for um for sharing metadata things like that seo but i mean nobody knows this apres hill.netlife.app um i like it yeah it's nice and simple and you might be able to get like your first name like it's not that exclusive yet so you know assume it you might be able to get your first name like i oh yeah i initially got a press hill and then um eway messaged me and was like you should just be allison there's no other allison's with one l and i was like oh i didn't even think of doing that so i claimed it i staked my claim early so you know um most a lot of names are available still so um you can give it a shot and they'll tell you what you know if if you need to edit yours and how much is the web space and the bandwidth which we are looking for in our mind or is there any upper limit for that uh i believe that's more of a netflix concern so netlify does have a free tier but um netlify charges based on build minutes and hugo is pretty fast but that is why i wouldn't necessarily push all the time um so every time you're making changes maybe kind of do them in batches because um netlify will eventually get you into a paid tier the only time i've ever even gotten close to the paid tier was when i was actually working on this theme and i was i was doing a lot of um uh pushes uh to github and trying to i was trying to activate more deploy previews so i was um i was really using up burning up my build minutes there um but yeah actually 300 minutes in a month yeah yeah yeah rgb is web space and 300 minutes in a month so like you can see here yeah i've got 76 used up out of 300 for this um until june 1st so um so i'm doing okay for now i guess that would be all let me let me go ahead and start making something this is i'm sorry the links won't work without that like hopefully i'll be able to make it better and in netflix this one this is this is an atrocity over here in wordpress i was just trying it i'm 15 years old thing and then i'm just trying it back again because you know one one requires a portfolio you know a website or a portfolio to showcase and linkedin is is outdated now at the moment hopefully this will work out and yes i think we can close now because it's already 9 pm in tunes it's a little bit late well good night everyone good night everyone thank you so much thank you thank you it was really wonderful and follow us we will have other meet up who are very interesting thank you very much and thank you alison for the million times thank you guys this was really fun i really appreciate it thank you everyone bye bye good night

Channel: R-Ladies Tunis

Views: 1,480

Keywords:

Id: RksaNh5Ywbo

Length: 136min 42sec (8202 seconds)

Published: Mon May 31 2021