Test.
Sam White: How's it going,
Sam White: Fine.
Sam White: I can see but
Sam White: No can see me, which also me
Shelly A. Trigg: I shouldn't see you
Sam White: Where you can
Sam White: Yeah. Oh.
Sam White: Oh, okay. Cool. Nevermind.
Sam White: Works perfectly
Shelly A. Trigg: I thought you meant, you're gonna have to turn it off.
Sam White: Just technical issue resolved.
Success.
Sam White: How goes it
Shelly A. Trigg: Pretty good.
Shelly A. Trigg: Yeah yeah
Shelly A. Trigg: I'm excited for this.
Sam White: Yeah, how did you Finagle, the food allowance.
Shelly A. Trigg: And that's through Jesus says, like the GFS coordinators kind of figured that out.
Shelly A. Trigg: Yeah, so
Shelly A. Trigg: I hope I'm not taking credit for
Shelly A. Trigg: That it's pretty good. That's pretty good deal.
Sam White: Yeah $23
Sam White: Yeah, I know.
Sam White: abusing the system and getting everybody here.
Shelly A. Trigg: Yeah, so I was just gonna like
Shelly A. Trigg: Demo the entire like trying to just download the entire thing like go down through there.
Shelly A. Trigg: Read me list and yeah
Sam White: Yeah, I mean, I think that's the easiest
Sam White: Most report, we do it that way.
Shelly A. Trigg: And then, yeah.
Shelly A. Trigg: You or your money or whoever can just jump in, like,
Shelly A. Trigg: Whatever.
Shelly A. Trigg: Job any for anything. Yeah.
Sam White: Spend some time getting these Windows computer
Sam White: More
Sam White: To my liking.
Shelly A. Trigg: Or you just setting it up.
Sam White: Well, I mean I mess around on Friday. Last Friday, or whatever. Some things are set up.
Sam White: Do what I want, but just
Sam White: Like familiarity can hunt around for some stuff.
Shelly A. Trigg: Have you run into any
Shelly A. Trigg: Windows issues.
Sam White: No, I haven't used it since last Friday when we're all doing it together.
Sam White: No.
Shelly A. Trigg: downloading the GitHub Desktop or something. Yeah.
You
Sam White: Know, just
Sam White: Just that initial browser.
Sam White: I downloaded.
Sam White: Zoom.
Sam White: Software today not using Chrome
Sam White: Or using
Sam White: using Chrome. Chrome browser was feinstein
Sam White: knows where
Sam White: But I've also updated the Windows computer bunch. So when those
Sam White: Changes in there.
Yaamini Ranjani Venkataraman: I finished my leaky boot talk about Stevens virtual backgrounds are
Sam White: Presenting it
Yaamini Ranjani Venkataraman: Oh, no, no. Like I finished making
Yaamini Ranjani Venkataraman: A present
Yaamini Ranjani Venkataraman: Yeah I finish compiling the top
Yaamini Ranjani Venkataraman: Might be my best.
Sam White: My best results yet.
Yaamini Ranjani Venkataraman: Only in terms of how it's not just the PowerPoint.
Yaamini Ranjani Venkataraman: No time
Shelly A. Trigg: that's meant to be, though.
Yaamini Ranjani Venkataraman: Yeah, it's
Shelly A. Trigg: Gonna be great.
Yaamini Ranjani Venkataraman: Charlie are you in a different part of your house or
Shelly A. Trigg: I'm in a friend's house right now. Yeah, having some fun time for the next few days.
Yaamini Ranjani Venkataraman: Wait, is this the camping trip that you said you were going on.
Shelly A. Trigg: Or is that no, yeah, that's something different.
Shelly A. Trigg: Yeah.
Sam White: The campaign to condrey on a hike yesterday morning on to this.
Sam White: I don't know what the name of State Park is a lolly or something, but it's
Sam White: Twin Falls waterfalls. It's like a mile and a half. They're not mountain. In fact, I got there early relatively 915 and then
Sam White: I mean, on the way back there were so many people
Sam White: Like, I mean it's kind of stupid to go on a holiday.
Sam White: Because I didn't really think about the fact that kids would not have school
Sam White: That's hoping it was kind of chilly enough
Sam White: It far enough away from Seattle, it's not that hard to North Bend so you know it's been an hour.
Drive.
Sam White: And I was hoping, most, most people would go in the afternoon, but by the time we're coming back around 1030 just streams people's like no way to avoid them.
Sam White: You know,
Sam White: Some people wearing masks. Some people not, you know, like there's no real sense of like trail etiquette, you know, people dogs, dude.
Sam White: But
Sam White: Prior to that is pretty cool. Nice little easy hike.
Shelly A. Trigg: That's awesome. I have to check it out. I've never been there.
Shelly A. Trigg: Do you guys know if there's any tricks for like viewing all participants at once without having to like scroll over
Yaamini Ranjani Venkataraman: Oh, if you if it doesn't just fit on your screen with gallery view know
Yaamini Ranjani Venkataraman: You get a bigger screen.
Shelly A. Trigg: So far they keep getting smaller, like so. Maybe it will work. And maybe it will it will see
Alright.
Shelly A. Trigg: So there's three of us and there should be I think 15 people total. So I think that means few more.
Shelly A. Trigg: Yeah. We should have 18 total participants, so we can wait a little bit longer. I'm just going to share the
Shelly A. Trigg: website design repo.
Cool.
Shelly A. Trigg: Start because most of us are here and this I think is being recorded. Can everyone. Can anyone see that if this is being recorded. Yes. Great.
Shelly A. Trigg: So, um, yeah. So let's just get started. Um, I guess I'll like to introduce myself first I'm I'm Shelley trade. I'm a postdoc and Stephen Roberts lab.
Shelly A. Trigg: And
Shelly A. Trigg: I don't know if yummy. And Sam. If you want to introduce yourselves and people probably know might know you
Yaamini Ranjani Venkataraman: I mean, how many I'm also in the rabbit slab PhD students
Sam White: From a research scientist.
Shelly A. Trigg: Yeah, so we have been our lab has been using GitHub.
For
Shelly A. Trigg: A while. For like yeah a lot of different stuff but
Shelly A. Trigg: For our lab notebooks and
Shelly A. Trigg: More recently, we've started trying to create professional websites from it. So I'm just going to kind of, Oh, I guess I wanted to first start with checking in with everyone and seeing if anyone has not yet created a GitHub account.
Shelly A. Trigg: Has anyone not yet done that.
Shelly A. Trigg: If you haven't done it, you can do so now. Please do so now.
Shelly A. Trigg: And also we're going to use GitHub Desktop. So if you haven't downloaded that yet. You could do that now. Also, and then we're going to use the atom text editor for creating markdown files and viewing other
Shelly A. Trigg: text files.
Shelly A. Trigg: And then
Shelly A. Trigg: Yeah. So I'm going to just pop this in the chat. I mean, this was an email.
Shelly A. Trigg: Already
Shelly A. Trigg: But I just want to make sure everybody
Shelly A. Trigg: can also view this. This is our workshop repo and it has like an overview of the stuff we're going to talk about today, as well as these some resources to get you started with different
Shelly A. Trigg: Yeah website templates and markdown cheat sheet to know how to
Shelly A. Trigg: Format. The markdown files.
Shelly A. Trigg: And then one really important link here is this issues area. So I'm just going to click on that to show you
Shelly A. Trigg: For after this workshop or even I mean we can even post stuff during here. If there's stuff that really like might not get to do today.
Shelly A. Trigg: And what we do is just click new issue and then say, like, I know one thing that we're not going to get to today is the like if you wanted to include a blog on your website or a lab notebook, how you can do that, but we're going to do that in the Roberts lab I think November 20
Shelly A. Trigg: And
Shelly A. Trigg: That will be recorded and I can post that here and I can also do a little write up on how to do that. So I can just write like incorporate
Shelly A. Trigg: Notebook into website.
Shelly A. Trigg: And then just write like how can you do this.
Shelly A. Trigg: And I'll just like you can call
Shelly A. Trigg: Any GitHub user out like that and then it will like send me an email about it. So I can just submit an issue here. So if anybody wasn't familiar with how to do that. That's how we're going to kind of use this
Shelly A. Trigg: Issues for them to keep track of all these different questions and things that we come up with
Shelly A. Trigg: Okay.
Shelly A. Trigg: So some of the reasons I guess I wanted to start off with, like, why we're using
Shelly A. Trigg: GitHub to build the websites because there's a lot of other platforms that may be a little i don't know may seem a little easier to use, like
Shelly A. Trigg: What is it like Squarespace and different stuff like that. It works. But those I guess what's what's cool about get have is, it's free and it's very easy to customize it.
Shelly A. Trigg: And then there's this nice version control. So if you make a mistake, you can go back to an earlier version. And then you can back it up like on your local computer and on the web in case anything happens to it and then
Shelly A. Trigg: It's portable. So, meaning that like the like whatever, like your text files or markdown files you create like an about me section or something like that. You could use that same file for like any template.
Shelly A. Trigg: Not makes it nice and then I just wanted to take a second to kind of look at different examples. So we're going to use this beautiful jackal style.
Shelly A. Trigg: Website. And this is sort of the basic layout here. So where there's like this avatar thing that can be your picture and then a title, subtitle. And then you can put kind of like whatever
Shelly A. Trigg: Different sections here they have this like drop down menu. It's different sections and then have some like social media links down here.
Shelly A. Trigg: And that's kind of like the general overview of that website. And then I just wanted to show you a couple other examples that use the same template.
Shelly A. Trigg: I guess maybe before I do that,
Shelly A. Trigg: Just so I everyone can see like what I guess what I mean by a template. So like this beautiful jackal is like one website template. And so there's these other
Shelly A. Trigg: I'm
Not that one.
Shelly A. Trigg: Yeah. So there's a whole bunch of other free templates on GitHub, that you could choose so they just looks. They have slightly like different format, you know,
Shelly A. Trigg: So if you found one you know that you like better, you can easily like take what we do today and switch over to like a different format if you wanted to, or different template.
Shelly A. Trigg: And not. Yeah. So all that's linked here.
Shelly A. Trigg: And then if anyone has questions, please just like pop up because this is meant to be like a very interactive workshop and same with Sandy on the if I'm like messing something up, let me know. Or if you come up with a different idea. Um,
Shelly A. Trigg: Cool. So then, yeah, so now we're going to look at some examples of people that are using this beautiful jackal template.
Shelly A. Trigg: Just so you can get an idea that even with one template we can have these like different styles.
Shelly A. Trigg: So I guess it's kind of a similar style with this, you know, the drop down menu up here, but you can put different banners in the background that rotate
Shelly A. Trigg: And then you could also move your picture to the corner that just brings you to your main page and then he has these links to these other
Shelly A. Trigg: Sections.
Shelly A. Trigg: Okay. And then here's another example. So you can change the color.
Shelly A. Trigg: The color change the color, the links.
Shelly A. Trigg: And then
Shelly A. Trigg: Yeah, I guess you can, yeah, we can kind of make this, like, kind of, however, however you want, you could have all your information on one page. You could have
Shelly A. Trigg: Split it out on two different pages. You guys have seen websites before. So you've kind of you probably know, um, but something that's cool about this GitHub stuff is that
Shelly A. Trigg: You can like if you find someone's website that and you like what they've done like say I really like her yellow color. I want to see how to do that. Like, I can go to her.
Shelly A. Trigg: GitHub page. So if I just, I'll just go to get hub.
Shelly A. Trigg: And then I can search for her here.
Shelly A. Trigg: And it just pops up here I can see this is her because that's her username, you know, that's her username, because that's the
Shelly A. Trigg: The website that you make with the beautiful jackal thing.
Shelly A. Trigg: So we can just go to her.
Shelly A. Trigg: Sorry, I lost it here, go to her.
Shelly A. Trigg: So this is her website repo and then I can look and find her file her. So this is the config file, we're going to go through this
Shelly A. Trigg: How to customize all this stuff. But so if you know I want to see that yellow how she did that yellow color. I can look in here. And so every thing. These are all like customer customizations that she's made in here.
Shelly A. Trigg: And so you can kind of like figure out what she did to get her website to look like that by just kind of going through this and reading like okay
Shelly A. Trigg: These are how she made her links, like, all that kind of stuff. So that's something that's nice about the GitHub stuff is that everyone's website is going to have these different customizations. So it's just it makes it easy to kind of replicate if you found some style that you liked
Shelly A. Trigg: Cool.
Shelly A. Trigg: Alrighty, so let's I think
Shelly A. Trigg: That that all the intro stuff.
Shelly A. Trigg: I think that was all the intro stuff up to yummy or Sam Did you have anything else that you want to add to the intro
Shelly A. Trigg: Alrighty, so let's just get diving in then. So if everyone wants to go ahead and sign into their GitHub account on the website.
Shelly A. Trigg: And then also sign into our open your GitHub Desktop app. So with GitHub, there's two different ways that we can
Shelly A. Trigg: Sort of edit the files. Um, one way is directly through the website interface. So for instance, like if I want to
Shelly A. Trigg: Like edit this document, I can just click this
Shelly A. Trigg: Pencil here and then I can just start typing stuff. So this is a written in markdown so that's why we have like
Shelly A. Trigg: The hashtag, which makes it a big header.
Shelly A. Trigg: And that's why it looks like this in this format, but I can just type directly into here and then to save the changes. I'm like, if I made a change like just put this like test, then I can just hit commit changes.
Shelly A. Trigg: And update the page like that I'm
Shelly A. Trigg: So let's see. Yeah, I'll just leave that there, doesn't matter. Um, and then another way we can edit stuff is through
Shelly A. Trigg: Um, to get hub.
Shelly A. Trigg: desktop app.
Shelly A. Trigg: So I guess maybe before I do this. Let's get let's fork the beautiful jackal repo. If you haven't already done that and I'm going to demonstrate how to do that right now because that might take some time. So, um, let's see.
Shelly A. Trigg: So what I'm going to do to do that is just go to the beautiful jackal.
Shelly A. Trigg: Repo
Shelly A. Trigg: And then I'm going to fork, which is up in this upper right corner.
Shelly A. Trigg: And I'm going to fork it to my
Shelly A. Trigg: Account.
Shelly A. Trigg: And then it should just be doing this thing. So now while that's happening.
Shelly A. Trigg: Um,
Shelly A. Trigg: I just wanted to kind of show everybody had to make
Shelly A. Trigg: edits to
Shelly A. Trigg: Files in your repository through the desktop. Um, and I guess so.
Shelly A. Trigg: I guess let's see, once the repos forked. So now it looks like this. Like, it has my username and then has beautiful jackal here and then I can
Shelly A. Trigg: I guess, first I wanted to do this one thing
Shelly A. Trigg: So if you already have a
Shelly A. Trigg: github.io site, um,
Yaamini Ranjani Venkataraman: Does anyone have a github.io site before we go into something
Yaamini Ranjani Venkataraman: Potentially complicated
Shelly A. Trigg: So some people. Yeah.
Marta Gomez-Buckley: Can you explain what that is.
Marta Gomez-Buckley: Yeah yeah
Shelly A. Trigg: Yeah, so, um, this it
Shelly A. Trigg: Would be
Shelly A. Trigg: A repository that is called
Shelly A. Trigg: Like your username.github.io
Shelly A. Trigg: So if you have that, um,
Shelly A. Trigg: Because I guess. Okay, so I will go over making changes to files and using the GitHub Desktop. A little later, because we can just do that like when we're actually making these markdown files but for now we can just kind of like follow the instructions in the beautiful jackal.
Shelly A. Trigg: setups. So I'm just going to go
Okay.
Shelly A. Trigg: So get started.
Shelly A. Trigg: Yeah, so what what we're going to do is kind of just go right through these steps that we just did this fork the project part and then the next step is to rename the project to your username.github.io and how we do that is
Shelly A. Trigg: So you just pull up your beautiful jackal repository that you just forked and then
Shelly A. Trigg: There should be a settings.
Shelly A. Trigg: Tab. If your screen is wider. I think you can
Shelly A. Trigg: Yeah, actually have the icon thing up there. Um, so then you can just change it right in here. So,
Shelly A. Trigg: You would put your username.github.io right in this section. I'm just going to read this one called beautiful jackal and mine since I already have
Shelly A. Trigg: A website or a repository with my username get hooked. I owe some renaming this. I don't know if they actually have to click
Shelly A. Trigg: OK. And then, so if you do have
Shelly A. Trigg: The username github.io repo already existing
Shelly A. Trigg: Then what you're going to do is from the beautiful jackal repo. I mean, you can name it whatever you want. You can name it test website or whatever and then
Shelly A. Trigg: But you will you should not name it the same thing as your other repository, because then I think that creates a conflict in the in GitHub.
Shelly A. Trigg: Did that make sense.
Maybe
Shelly A. Trigg: So, so then if so if you do have that username github.io Vivo already existing and you're going to scroll down to this GitHub Pages part and instead of non select master.
Shelly A. Trigg: And then
Shelly A. Trigg: I think, yeah, you just leave it on
Shelly A. Trigg: Route, and then you click
Save.
Shelly A. Trigg: And so what that's going to do is nested, I think. So if we scroll down to that pages area. Again, it's going to see it, say your website is ready to be published at
Shelly A. Trigg: So your username github.io slash
Shelly A. Trigg: Test beautiful jackal or whatever you named this repo. So if, if you did not have
Shelly A. Trigg: That github.io website before you should just see
Shelly A. Trigg: The link should just say HTTPS slash your username dot GitHub IO. Does everyone see that here in the pages section.
Shelly A. Trigg: Cool. And this section is also
Shelly A. Trigg: Really useful Yani pointed out that like when you make changes.
Shelly A. Trigg: It sometimes takes a second to actually publish on the site. So like, yeah, so this one already updated. But like if it wasn't up to date.
Shelly A. Trigg: It says, like, I think your site is ready to be published and then it might say like your site is published.
Shelly A. Trigg: Kind of thing. So when we make changes and if they if you don't see them right away, then you can just click Refresh. So now it says your site is published at here and that's how we know the changes have been implemented, we should see them in
Shelly A. Trigg: On the website.
Shelly A. Trigg: Cool. So this is like the
Yaamini Ranjani Venkataraman: Basically you have a few comments, um,
Shelly A. Trigg: Oh, awesome.
Shelly A. Trigg: Yeah. So yeah.
Yaamini Ranjani Venkataraman: Yeah, I can. Yeah. So to when you're on your
Yaamini Ranjani Venkataraman: Duty to do. Sorry, I'm trying to find all my browser windows. Okay, so when you go to see forks. Your repo and your repo has a page with like code and like settings and whatever. So to be able to get to the actual pages portion Shelly, can I
Shelly A. Trigg: Yeah, I'll share my screen. Yep.
Okay.
You can wake up.
Yaamini Ranjani Venkataraman: Sorry Peters deciding to not do anything right now. Okay, there we go.
Yaamini Ranjani Venkataraman: So,
Yaamini Ranjani Venkataraman: You've got your repo and your repo settings if you oh ok will reload the settings. Definitely clicked it if you scroll to the bottom.
Yaamini Ranjani Venkataraman: There's this part called GitHub pages. And so if you already have like a GitHub username.github.io web page and you want to rename your website so you have it like a different website and does it get messed up.
Yaamini Ranjani Venkataraman: And you're going to rename it up at the top to whatever you want. So I've renamed mine test repo.
Yaamini Ranjani Venkataraman: And then you want to make sure you're selecting the master as your source and then state that so like this is how you get to GitHub pages. It's through the
Yaamini Ranjani Venkataraman: Repo there's a goal Settings button and then there's GitHub pages and it's like
Yaamini Ranjani Venkataraman: And whether they want to point out is like under this I GitHub Pages part, there's this like danger zone.
Yaamini Ranjani Venkataraman: So like these are all the things that, like if you like mess with this like you might be in a little trouble. So like, don't touch the danger zone and life like you really want to like
Yaamini Ranjani Venkataraman: Archive your repo not really make it available anymore. Or like delete your repo and deleting your repo. So one thing that you can't do would get up, so be careful.
Shelly A. Trigg: Awesome. Are there any other questions. Did, did people were there some other parts that we could go through again to clarify anything
Kerry Accola: I have a question. I'm so curious like I have a username right I'm to login
Kerry Accola: The website part like the my username.
Shelly A. Trigg: Okay, yeah. Did you fork the beautiful jackal. Awesome.
Kerry Accola: Did I have it under my username.
Shelly A. Trigg: Okay, so if if you click in the settings.
Shelly A. Trigg: Section, can you can you see like, hear me. Maybe I can share
Shelly A. Trigg: Show. Let's see. So it should look like.
Shelly A. Trigg: Open this up there should be like a little settings thing. Like if you click on the beautiful jackal thing. So then you click on that and then what you're going to do is delete the thing that says beautiful jackal and just put in your username.github.io
Shelly A. Trigg: So like that would be like if you don't already have a repository called this then you would just rename the beautiful Jacko one this
Kerry Accola: Okay, so I renamed the test beautiful gentle but you're saying I should just rename it my name and that creates the website.
Kerry Accola: I'm sorry I'm yes
Kerry Accola: Yes. Okay.
Yaamini Ranjani Venkataraman: Exactly. If you don't already have a website with your username.github.io and you want to name it your username doc github.io so it like
Yaamini Ranjani Venkataraman: Netflix basically every GitHub user gets one of those pages like. And so if you already have one. You're going to need to nest.
Yaamini Ranjani Venkataraman: Some of your stuff. But if you don't already have one. You want to name it that so you can get the actual website. Yes. And if you're
Yaamini Ranjani Venkataraman: Like if you're creating your website for the first time and like it could take like five to 10 minutes for it to like fully compile and be like visible on the actual web, but you'll still be able to mess around with it in like GitHub and make changes. Yeah.
Shelly A. Trigg: It may be quicker. Sometimes it's happening quicker kind of depends on how many users are are using the platform. I think I'm
Kerry Accola: Okay, so now I sorry to take up more time. So now I have my username slash and then my username github.io and that's
Kerry Accola: Guess that okay
Shelly A. Trigg: That sounds right. Yeah.
Kerry Accola: It's because if it seems like my website is nested within my username.
Shelly A. Trigg: Yep, I think, I think that's that should be correct.
Shelly A. Trigg: So again, yeah, no problem. Does that, does everyone
Shelly A. Trigg: Does anyone else have any questions about the
Setup part
Jenny Stern: I have a quick question. Um, I did not have one of those sites but I decided to rename my site and you a
Jenny Stern: Maybe as a mistake. Does that mean that I don't get that original one, a gal money you're saying that you should use that one. If you don't have another one. All right. I'm just trying to figure out if I messed up. And if I need to, like, go back
Oh, sorry. Go ahead. Yeah. Many
Shelly A. Trigg: Okay. Um, I think if you don't have one. If you don't have a repo. That's called your username.github.io, then you should name the beautiful jackal one that
Shelly A. Trigg: Okay, yeah. Because I think if you don't, it may not generate a website, I think you need that github.io
Shelly A. Trigg: A repo to create
Shelly A. Trigg: The website, I think, um,
Jenny Stern: It did create a website, but this seems maybe like a personal problem. So I'll hold it for a little bit.
Shelly A. Trigg: Okay, yeah. I mean, we can go back to it will know if it's if things aren't
Shelly A. Trigg: Whatever for not able to view the website, um,
Shelly A. Trigg: Okay. So once that's renamed then we can start customizing it. And, um, I think I guess maybe there's something that we can do to check. So from your
Shelly A. Trigg: Either your beautiful jackal or your test, whatever, if you read it test repo, or if it's your username.github.io you should see, oh, I'm not sharing my screen right now. I'm sorry, guys.
Shelly A. Trigg: You should see near the top this like where it says about there should be a link that is either going to say your username github.io or
Shelly A. Trigg: Like they'll it will be the link to the website. So when you click on that you should see what the website looks like. Um, so I'm going to go. Go back to the one that I
Shelly A. Trigg: Yeah.
Shelly A. Trigg: The one that I fort.
Shelly A. Trigg: Which is now here. Okay, so if I click this test repo, then I can. The link is right here to the
Shelly A. Trigg: To the website.
Shelly A. Trigg: Okay, so if you that's kind of like how you know if you have a website.
Shelly A. Trigg: And that's how. Yeah. So can everybody see that on, there's
Shelly A. Trigg: No.
corinneklohmann1: Yes. But mine is still taking me to like the beautiful jackal.com. It's not my website.
Shelly A. Trigg: Yeah, okay.
Stephanie Thurner: Okay, yeah.
corinneklohmann1: I think
Shelly A. Trigg: I think that will change like as we edit that might change as we edit stuff.
Shelly A. Trigg: So we're just going to go ahead and start customizing. So like I said, there's two different ways we can do this and one is directly through the web.
Shelly A. Trigg: So we're going to just
Close just go back to that.
Shelly A. Trigg: I'm just going to go back to the instructions. So we can just
Shelly A. Trigg: All see them together. So the next step after we rename the repo is customizing so we're going to edit this confidant why ML file. And I guess kind of look at the structure of this really quick. So there are different folders and
Shelly A. Trigg: Yeah. So there's different things that we're going to develop there's different folders and then there's these different files that we can make changes to
Shelly A. Trigg: So this is the config why ML file. We're going to edit to do the first customization so
Shelly A. Trigg: Yes, you can either edit this directly on the website by clicking edit this file, or if you you can use your GitHub.
Shelly A. Trigg: desktop app and
Shelly A. Trigg: I think you can just like
Shelly A. Trigg: We do this new repository, I think, or there's a way to like it. I can go here.
Shelly A. Trigg: And click code and click open with GitHub Desktop.
Shelly A. Trigg: Okay, and it's going to clone this to my computer. So it's going to add this onto my
Shelly A. Trigg: Local computer. So then I can edit files like from my computer, instead of through the website and that's good. In case like you know you, then you have a backup it's, it can be in two different places. So now, like I can I clone this onto my computer.
Shelly A. Trigg: And
Shelly A. Trigg: So I should be able to find it in here now. And here it is. So it cloned it showed me where I'm sorry I kind of went through that a little fast.
Shelly A. Trigg: But when I clicked clone it saves it saves it in on my computer documents slash GitHub and then the repo. So I can find all those files that were just looking at on the web. Here in this folder on my computer. And so we're going to edit this config file.
Shelly A. Trigg: And I'm going to go, oh yeah, go ahead.
Stephanie Thurner: When I cloned it to my desktop. It asks if I want to contribute to the current project or for my own purposes, do I click for my own
Purposes.
Stephanie Thurner: I don't want to mess it up next.
Shelly A. Trigg: Yeah, no problem.
Shelly A. Trigg: I think no matter what, like you're going to get asked, like it will probably ask you, like, even if you wanted to contribute to somebody else's project. I don't think it lets you immediately do that unless you're
Shelly A. Trigg: Marked as like a collaborator on it. So like you wouldn't be able to like mess up someone else's thing i don't i don't think it's easy.
Shelly A. Trigg: To do that, um,
Shelly A. Trigg: So then, yeah, so I'm going to open this conflict file with the atom. Whoops.
Marta Gomez-Buckley: ask one more question.
Marta Gomez-Buckley: Yes, we are you going to use
Marta Gomez-Buckley: The African after with with Steph. Ask it asked, open the repository in your external editor like open item. It says, or view the file on your story explorer or open the repository on GitHub.
Marta Gomez-Buckley: So should I view it on GitHub. Then there's like three options there. I don't know if I'm the only one that is seen that
Marta Gomez-Buckley: Yeah. After, after what is that ask
Shelly A. Trigg: Yeah, you could try. I'm not really sure. So I would just experiment. See
Shelly A. Trigg: What it looks like and
Shelly A. Trigg: You can try it. Yeah, try viewing it, it sounds like it can
Marta Gomez-Buckley: You can view it on. Yeah.
Shelly A. Trigg: Yeah.
Marta Gomez-Buckley: Okay, sorry.
Shelly A. Trigg: You're saying that you're seeing that from the GitHub Desktop those options came up
Marta Gomez-Buckley: Yes. When I tried to, I mean, the decline in and then went to the second option that instead with asking, and then I it comes with these other three options. So this one out.
Marta Gomez-Buckley: There, make sure
Yeah.
Shelly A. Trigg: Yeah, you could do that. And I don't know if that's just going to like bring you back to the website and then if if you want to work on it on the files on your local computer then yeah, you may want to try opening with
Shelly A. Trigg: The atom.
Shelly A. Trigg: And just see what happens. Yeah.
Shelly A. Trigg: That's most of the time when I'm what I do is just like play around. You know, I don't know. So I just
Shelly A. Trigg: Try different things and see
Marta Gomez-Buckley: Great things chillin okay
Shelly A. Trigg: Yeah. Okay. Can everyone see my desktop or you just see the browser.
Stephanie Thurner: Just the browser.
Shelly A. Trigg: I'm going to show the full
Sam White: There we go. Okay.
Shelly A. Trigg: So, um, I open the config file through
Shelly A. Trigg: Adam and I'm just going to close these other windows.
Shelly A. Trigg: So then you can see
Shelly A. Trigg: These are sort of like the general
Shelly A. Trigg: Things in the layout. So what you can do is just kind of like, look at this. With side by side with
Shelly A. Trigg: The actual website.
Shelly A. Trigg: So,
Shelly A. Trigg: Again, another way to go to your actual
Shelly A. Trigg: Website is to go back go into settings. Sorry. Go like in your repo gone to settings and then scroll down to GitHub pages and then click
Shelly A. Trigg: That link.
Shelly A. Trigg: So,
Shelly A. Trigg: That link is
Shelly A. Trigg: What this config file corresponds to
Shelly A. Trigg: So where it says my website is
Shelly A. Trigg: Think. Oh, sorry. Actually, this part is going to the title is actually going to be what appears here. So you might want to put like your name.
Shelly A. Trigg: And then author. I don't think the author part I think maybe that's
Shelly A. Trigg: It might be, oh yeah, some person. So that's right here.
Shelly A. Trigg: So you can also write like your name again.
Shelly A. Trigg: And then it says there's some now far links. So we can just, I think.
Shelly A. Trigg: Yeah. So these are the links that up here in this
Shelly A. Trigg: drop down menu.
Shelly A. Trigg: So there's an about me section.
Shelly A. Trigg: This read text corresponds to what these links say and then
Shelly A. Trigg: Where these links go is
Shelly A. Trigg: A file name called about me. So this is sort of not a super intuitive thing and we were talking about this.
Shelly A. Trigg: Last Friday when we're sort of going through this together in our lab.
Shelly A. Trigg: So you can see in the
Shelly A. Trigg: Repo
Shelly A. Trigg: In the main repo. There is a markdown file called about me and we can take a look at that, um,
Shelly A. Trigg: Well, I guess we're going to take a look at that yet, but so I guess I just wanted to say that, like, what's in these quotes is the name of the file so that when I click on the about me, it's going to show me what is in this file.
Shelly A. Trigg: Whoops. Let me open it on Adam
Shelly A. Trigg: Yeah, please let me know if I'm going too fast or if me, if anything, if I should repeat anything because I really want to make sure everybody can
Shelly A. Trigg: Get started with this.
Michaela Lowe: Shelly. Did you download that folder. I'm just thinking, I don't know that I downloaded the repo, did I miss that step.
Shelly A. Trigg: Um, I'm so when you. So did you fork the repo.
Michaela Lowe: Yeah. I forgot it.
Michaela Lowe: And I'm good. OK.
Michaela Lowe: Now you have like the file, you know, from yours.
Michaela Lowe: Yes, you're looking through. And that's how you found the about me part
Shelly A. Trigg: Yes.
Michaela Lowe: Someone that I have that
Shelly A. Trigg: So in your GitHub Desktop. Can you see the repo, the beautiful jackal one or the if you renamed it
Shelly A. Trigg: It should look like.
Shelly A. Trigg: Your username not github.io. Do you see that in your GitHub Desktop.
Michaela Lowe: It's he
Shelly A. Trigg: Wait. If you want you can share your screen.
Michaela Lowe: Maybe I'm sure I'll share my screen.
Michaela Lowe: Okay, here's my
Michaela Lowe: Desktop.
Shelly A. Trigg: Yep. Okay.
Michaela Lowe: Thinking like if I want to be in my repo. I'm here but like
Michaela Lowe: Okay. All that like Deja
Shelly A. Trigg: vu. Yeah.
Shelly A. Trigg: Yeah, so this is going to just show us changes that we make to this repo. So this is not the from the GitHub Desktop. That's not going to show us the folder so you can find the folders. If you go to like if you have a Mac, it will be your finder, you know, like where you can browse files.
Michaela Lowe: Yeah, I'm
Shelly A. Trigg: So Windows i think i think
Shelly A. Trigg: It should be actually Sam, maybe you can. I don't even know how to view files. Is it like
Shelly A. Trigg: All files or something like that. You click LIKE THE WINDOWS icon and then navigate to your
Stephanie Thurner: It's just like normal File Explorer Michaela the yellow manila folder thing.
Michaela Lowe: Yeah, but then I like download a folder that
Sam White: Way. Yeah. So Michaela Shelly. Can you go back to the cloning step.
Michaela Lowe: Yeah.
And explore
Michaela Lowe: Sorry.
Sam White: I was gonna say we should start from when the repo was initially cloned. Would that help you do that stuff.
Shelly A. Trigg: Or wait
Shelly A. Trigg: What does that say right there, view the files of your repository and explorer. So just click that show and explorer.
Michaela Lowe: Haha. There you go. Thanks, Shelley.
Shelly A. Trigg: Awesome. So now you can see. Can you see all the files in the folders.
Shelly A. Trigg: Yeah, awesome.
Michaela Lowe: Okay, thanks.
Cool.
Shelly A. Trigg: That's awesome. Now I feel like it's so helpful just to see like, I don't know the other
Shelly A. Trigg: You know how others people's setups is going because I feel like that helps other you know other people that are having similar
Shelly A. Trigg: Things going on. So then, yeah, so like we were saying that about me stuff is all in this about me um markdown file. And so we can edit that by opening it in Adam.
Shelly A. Trigg: If you wanted to
Shelly A. Trigg: Go ahead.
Sam White: I was thinking maybe since we've already went through the change of changing the name config file. Maybe we can show how that change actually
Shelly A. Trigg: Is reflected on. Oh, good call. Yeah, let's do that first just to the
Sam White: GitHub Desktop.
Shelly A. Trigg: Store. Perfect.
Shelly A. Trigg: Yeah. Thanks, Sam.
Shelly A. Trigg: So yeah, let's just, we can for this part. What we're going to do. So we made these changes, we added our name.
Shelly A. Trigg: In the title and the author. So to just check what those changes look like I'm just going to go ahead and hit save and then. So if you're editing this directly on the website. It's a little like
Shelly A. Trigg: I mean, you just hit like commit commit your changes and you can view them and here so now
Shelly A. Trigg: I can see on my GitHub Desktop. It says, Okay, I changed it uses a my website and I changed it to my name and then I changed some person part to my name. Those are the change. So I'm going to add my name.
Shelly A. Trigg: I just for like all these changes I make I just put a little comments about what it is. So then if you ever wanted to go back to whatever
Shelly A. Trigg: If I ever wanted to like go back and see what changes I made during that time, I can just click or like store it. I'm all the changes I've made by like
Shelly A. Trigg: Whatever subject I put still like that sounded rambling but I hope that made sense.
Sam White: Yeah, yeah. Sorry for
Sam White: Just quickly, for people who aren't really familiar with, get up, get up, get is something called the version control software. So it allows you to follow changes that you've made to your files over time.
Sam White: And then also allows you to potentially go back to different versions of the file over time it negates the need to have, say,
Sam White: Dissertation underscore bond, you know, version one dissertation underscore version 1.2 and
Sam White: Accumulate, you know, dozens of different files to track your changes this instead tracks them internally.
Sam White: And you don't have to accumulate massive quantities of files, the changes are stored by get and then GitHub is a web based search tracker for these changes that allow you to access your files remotely.
Sam White: So that's what's going on here. And that's what I was referring to when she's saying, oh, you can go back and get rid of those changes, something of that nature.
Shelly A. Trigg: That's what we're doing with the good stuff. Yeah. And we can kind of look at that as we make changes. So you guys, so everyone can see
Shelly A. Trigg: So I'm gonna hit after I put my little comments and I'm going to hit commit to master.
Shelly A. Trigg: And then push. So it's like a two step process. I'm on the GitHub Desktop. I think it's only one step process. If you just use the interface the web interface. So I click push. And now once this goes through. So that means my changes are now like on here so I think
Shelly A. Trigg: Let's just try going back to this.
Shelly A. Trigg: Trick parts of remember if you are in your, your website repo and you go to settings and then scroll down to GitHub pages. I'm going to hit refresh.
Shelly A. Trigg: Okay, it says it's published. So now I should see my changes. Oops.
Shelly A. Trigg: Yep, so I hit refresh. Again, I had to hit refresh again. So now I can see the changes that I made to that config file on the website. I can see it here, right, those two name changes.
corinneklohmann1: So that I'm saying
corinneklohmann1: I'm able to push commits to this branch because they're commits on the remote that are not present on your local branch such these new commits before pushing in order to reconcile them with your local commits
Katie Nicole McElroy: I am having that issue.
Shelly A. Trigg: So if you you might need to
Shelly A. Trigg: Is it because you might need to pull. It's possible that like you. What is this
Yaamini Ranjani Venkataraman: Yeah, so I think what's happening is
Yaamini Ranjani Venkataraman: With GitHub pages, kind of like what we, I think we've been like hinting at this is like if you're making changes on your desktop.
Yaamini Ranjani Venkataraman: They may not automatically reflect on your browser and vice versa, if you're making changes on your browser, but they may not automatically reflect on your desktop. So what this is like. So what you need to do is basically like
Yaamini Ranjani Venkataraman: In your GitHub Desktop. You want to fetch your like previous comments are like pulled down. So I think like there's like at the very here.
Shelly A. Trigg: Can I show you, I can tell. Yeah.
Michaela Lowe: Yeah, yeah. Okay.
Yaamini Ranjani Venkataraman: So he usually on GitHub Desktop. What you want to do is like fetch origin. So if you like click this button. What that basically does is it pulls if you're making changes in the browser. Any changes that you've made get pulled down to your desktop. So your desktop version remains
Yaamini Ranjani Venkataraman: Kind of in sync with your web version. And then what happens with Shelley went over, like if you make changes to files on your desktop, those kind of show up in your GitHub Desktop and then you're going to commit
Yaamini Ranjani Venkataraman: And push this button will change, it will say, push. So basically you're going to take any changes that happened in your get
Yaamini Ranjani Venkataraman: A little on your local machine and push them to the web.
Yaamini Ranjani Venkataraman: And it's usually like best practice when you're dealing with GitHub you before you do anything, just like fetch your origin. Make sure there's no changes anywhere commit often and push often
Yaamini Ranjani Venkataraman: Right things break down when they're those like different version differences between your web interface and your desktop.
Yaamini Ranjani Venkataraman: Interview just may often commit early push often pull off like always pull the for you push
corinneklohmann1: Yeah, do that. And then, thank you.
Yaamini Ranjani Venkataraman: Yeah.
Katie Nicole McElroy: So if you didn't do that. And now you're having errors between the two things I have a merge does that then force those two to reconcile. Mm hmm. Okay. So I do want to commit. Oh, I'm merge instead of importing it. Yes.
Yaamini Ranjani Venkataraman: Another thing.
Yaamini Ranjani Venkataraman: You could do too is with GitHub Desktop, you can undo commits until you get back to whatever version is in sync with your web pull stuff down and then move forward.
Yaamini Ranjani Venkataraman: But if you're just making text edits and like they don't conflict with each other like you didn't sound like you, you change the color hex code somewhere on your website and then you changed it again on your desktop and
Yaamini Ranjani Venkataraman: Those commits might be a little trickier to merge. But if it's just like you're changing one line of a file and a different line of a file. They have like no relation to each other like you'd be able to merge those commits easily
Yaamini Ranjani Venkataraman: Don't know if that made things more confusing. I just met early commit often always pull before you push
Jenny Stern: Question.
Shelly A. Trigg: Oh yeah, go ahead, Tony.
Jenny Stern: And when you say so. I'm getting it to push and commit, but I don't see any button to pull, but everything does seem to be working is pulling an actual action that do
Yaamini Ranjani Venkataraman: Yeah, so it's that at the very top, I showed you that like fetch origin button.
Jenny Stern: Oh, okay, yeah. So
Yaamini Ranjani Venkataraman: Yeah.
Yaamini Ranjani Venkataraman: So basically fetch fetch fetch origin button and it goes. Did you do do do on the website and sees if there's any changes that need to be brought down to your desktop.
Yaamini Ranjani Venkataraman: And if there are no changes and there's nothing in theory to pull. If there are changes, then it goes, I guess, pulled to your desktop version, then you can pull it down.
Jenny Stern: Great. Thanks. Sorry, I just got
Shelly A. Trigg: Alrighty, so let's
Sorry.
Shelly A. Trigg: Somehow my computer entered full screen. Okay. Um, let's go through kind of like the next steps. So, so now I mean, what we do is keep going through this config file and making changes.
Shelly A. Trigg: I'm making the changes that we want. So I'm
Shelly A. Trigg: Yeah. So if we want to change the nav bar links like say I want to add a publications page or publications like so, right, like in here. I want there to be a section that's called publications
Shelly A. Trigg: And then I'm going to make a markdown file called publications
Shelly A. Trigg: So if I go to
Shelly A. Trigg: I mean, you'll have to make this now we can just write it in here. But I'll just, I'll just show you. I'm going to do new file.
Shelly A. Trigg: This is going to just be called like publications
Shelly A. Trigg: And then remember I'm formatting in markdown so this just means it's going to be like a big bold header address going to save just this for now.
Shelly A. Trigg: Publications, and I'm going to save this in
Here, let's just go ahead and open this
Shelly A. Trigg: Okay, here.
Shelly A. Trigg: So I'm just going to call this, it's actually going to be lowercase. Remember, because I have to match.
Shelly A. Trigg: What I just wrote in the config file. So this is going to be called publications.md save
Shelly A. Trigg: Cool.
Shelly A. Trigg: So now I'm going to go back here. So now I should have a tab that says publication.
Stephanie Thurner: Yes. All right.
Stephanie Thurner: In the folder, like in the driver you saving that publications just right under the your test beautiful jackal or is it in one of the sub folders.
Shelly A. Trigg: It's just in a test beautiful jackal. If you wanted to you could create another folder. That's called like I'm now blinks or something and then
Shelly A. Trigg: I think you might just have to do like now. Like, say if I saved it. And I would create a new folder, call it now links that I would just have to add that in front of your file name, I believe you.
Stephanie Thurner: Thank you.
Mm hmm.
Shelly A. Trigg: But you can also just save them in right in your main
Shelly A. Trigg: Repository directory
Shelly A. Trigg: What was the question. Sorry.
Kerry Accola: Can you quick go back to the publication's file you just created. I just wanted to see it really quick. Oh yeah, that's all you did.
Shelly A. Trigg: Yep, mm hmm. Yeah. And then like you could just start like listing stuff like whatever trigger at all.
Shelly A. Trigg: And then there's ways to like make stuff italics like so say yes science. No, I don't know, but just say like, okay.
Shelly A. Trigg: Right, that's how you make something that's how you make the text italic um if you go to our workshop repo. There's that markdown cheat sheet and you can see all these different
Shelly A. Trigg: Like ways to format the texts like if you want to make it bold. Um, it can just do. It's like
Shelly A. Trigg: Whatever is in between the double Asterix becomes bold.
Shelly A. Trigg: But let's just, I'm just going to do that for now I will save this and then I'm just going to go ahead and
Shelly A. Trigg: push these changes, so we can see what they look like. So
Shelly A. Trigg: First, I gotta save my config file because I can see here that I haven't saved it yet because it doesn't say that I made any changes to it. So I'm going to go here. I'm going to do.
Shelly A. Trigg: Save and then that should show up here. So now I can see. Yep. I added publications and here's the publications markdown file I created that is going to
Shelly A. Trigg: That that
Shelly A. Trigg: Now bar link is going to link to so add publicly just right now for link and empty okay commit
Shelly A. Trigg: Push. So I'm just doing commit push because I know I haven't made any changes on the web interface. But if you're kind of playing with both like we said before, you just want to click that fetch first and then go through what I yeah what I just did. So now I'll go back to
Shelly A. Trigg: This part. And again, I'll go back to the settings are and see. Okay. It says your site is ready to be published.
Shelly A. Trigg: So I can look and it may not show the changes. Yeah, the changes have not taken place yet they can hit refresh again, up here. They are publications
Shelly A. Trigg: And now when I click here, I can see cool my publications like you know you can just add your publications. You can put your deal eyes and link to your papers.
Shelly A. Trigg: And they're cool.
Shelly A. Trigg: So then, yeah, you can just continue adding like whatever other sections you want to add like
Shelly A. Trigg: You could add an outreach.
Shelly A. Trigg: Like if you do a lot of outreach and have made all these different, um, yeah, or like curriculum or something like that that you want to showcase, you can add those also
Shelly A. Trigg: Um, and there's ways to like insert pictures like in these markdown files. So say in my about me file. Um, if I want to edit that.
Shelly A. Trigg: I'm
Shelly A. Trigg: Like if I want to link to a picture here. Um, the way that you do that is just by
Shelly A. Trigg: Putting an exclamation point. The two brackets and then
Shelly A. Trigg: Parentheses, that's also in the mark down cheat sheet.
Shelly A. Trigg: Kind of insert pictures. And then if I wanted to make that a link. I'll show you that in a second. But first, to do this.
Shelly A. Trigg: I'm going to put a like
Shelly A. Trigg: First, I'll make a new folder in the website repo. I'm going to call it img because then I'll just put all the pictures. I want to use in here. So I think there may be some
Shelly A. Trigg: Pictures. We can't remember if there's pictures in here already somewhere.
In this
Shelly A. Trigg: Assets. Cool. Thanks. Yes. So I'm just gonna like copy one of these pictures for like if you had like whatever a picture from an outreach event or whatever picture from field work that you want to put in there.
Shelly A. Trigg: You're just going to put it into your image folder.
Shelly A. Trigg: And then
Shelly A. Trigg: So now I'm going to go back here is, first I'm going to, like, all right, it's a cool plan. So I'm going to write like add about me.
Shelly A. Trigg: Or whatever. I'll just write, add new image.
Okay push
Shelly A. Trigg: Alrighty, so now
Shelly A. Trigg: What I'm going to do is find
Shelly A. Trigg: The link to that picture. So first, I gotta go to my repo.
Shelly A. Trigg: Image
Shelly A. Trigg: So here's the image in my repo. I'm going to click Download and I'm going to click the reason I do that is because I want it to be just this full picture and then copy this. So it should say HTTPS raw whatever
Shelly A. Trigg: Then the address of that and that link is what I'm going to paste into the parentheses here.
Shelly A. Trigg: Okay, so this link and like with this formatting is going to make the image on my about in my about me section. So I'm just gonna hit control. I'm just gonna save this file.
Shelly A. Trigg: And then I'm gonna add image to about me.
Shelly A. Trigg: Commit push
Shelly A. Trigg: For
Mark Sorel: A while, use that approach, instead of just having it like on your desktop and maybe run through how to do that one more time, really quick.
Shelly A. Trigg: Yeah, the whole the whole thing, or what do you why when you approach.
Mark Sorel: Like putting the downloading the picture to the GitHub and then putting in the URL.
Shelly A. Trigg: Huh, yeah. It's so that like
Shelly A. Trigg: I think so that like when so that your website always has access to the image because your website. I think it's not always going to be communicating with your
Shelly A. Trigg: Desktop. Does that make sense. I don't know. Sam, do you have a good answer for that.
Sam White: I should, but I don't
Sam White: Marks. Question is, is great.
Sam White: I i've had difficulty. So basically, you should be able to deal with a relative half two files and images so that you should be able to have exactly the situation that you described, however.
Sam White: Sometimes it works, sometimes it doesn't. Haven't played around with enough but I mean that's something we should try
Sam White: I'll try it out and see what happens.
Shelly A. Trigg: Yeah, I feel like it's because the internet like the internet or whatever your website may not always be able to like access your local can look like what's on your local computer I'm versus like when you tell it.
Sam White: Sorry, sorry, sorry. I mean, but it wouldn't be
Sam White: Local right i mean you're pushing it to get up so the image will be on GitHub on the internet so
Shelly A. Trigg: Ryan right
Sam White: So you should be able to reference where the image sits in the repo.
Sam White: And get up should be able to recognize where that images and then
Shelly A. Trigg: Mm hmm.
Shelly A. Trigg: But I think yeah it, you have to have like the way that I clicked.
Shelly A. Trigg: I'll just go back to it. So this is where this image is stored. Now I'm in the repo and I click the download. I click Download and that's where I get the link that I need to use for the image. Like if you don't click download, then it may not render the image.
Sam White: Yeah, Mark. And this really gets into more of the backend stuff about what these websites are built on its platform called Jekyll and run some other programming language called liquid
Sam White: And so you can put these relative links in but it gets very complicated very quickly. This is a much more straightforward way that everyone can follow and mark mark down as much easier language.
Sam White: For everyone to read and understand, especially for everyone if this is their first time messing around with it. This is going to be the best approach. So we'll stick with that.
Shelly A. Trigg: And remember this is getting recorded, so if you can always go back and watch this again and see. Yeah, we can see these instructions replay them as many times as you want.
Yaamini Ranjani Venkataraman: I will also say that when you're adding photos and markdown so there's like the three parts. Right. There's the exclamation point that's like, hey, this is a photo.
Yaamini Ranjani Venkataraman: There's stuff in square brackets, and then there's like the hyperlink to your photo in the circle brackets. The stuff that's in the square brackets ends up being the alt text that shows up when you hover over the image.
Yaamini Ranjani Venkataraman: And so if you want to make your website more accessible to like people using screen readers, etc. Make sure you have like you can have like an actual like image description in that alt text section and just
Shelly A. Trigg: Try that. I didn't know that. So,
Text.
Sam White: And in addition to, you know, improving accessibility, that sort of thing. It's also a great place for notes for yourself to remember what the actual
Shelly A. Trigg: Images that you're
Sam White: Thinking
Shelly A. Trigg: If it's an
Sam White: Image dash one on one, and you have, you know, dozens or hundreds of images. You may not remember exactly what image one on one is anymore. So if you put a descriptor in those between those square brackets will help you as well.
Shelly A. Trigg: And then say if you wanted to make this a link, an actual link instead of just an image because you can see right now. Like, I can't click on this plan and make it bigger.
Shelly A. Trigg: Or anything like that. But if I wanted to make it a link or have it be have the picture, be a link that takes you somewhere else say to like a YouTube or like a YouTube video or something like that, um,
Shelly A. Trigg: You just put this whole
Shelly A. Trigg: Text in between square brackets.
Shelly A. Trigg: And then you put the website here. So I'll show you right now I'm just going to link it back to this picture.
Shelly A. Trigg: So,
Shelly A. Trigg: I'm going to save that. So now you can see
Shelly A. Trigg: The image text is between the square brackets and then the actual link is in the parentheses after that. So I hit save and I'm going to go back here.
Shelly A. Trigg: Okay, so
Shelly A. Trigg: Or make image a link
Shelly A. Trigg: Commit push
Shelly A. Trigg: Cool. So now,
Shelly A. Trigg: Let's see, we can see if that hover text.
Shelly A. Trigg: I don't know if the hover tanks work good but make
Shelly A. Trigg: It just may not be updated updated yet.
Shelly A. Trigg: You Shelly. Um, yeah.
Yaamini Ranjani Venkataraman: With the time that's left. Do you want to go over the PDF CV stuff.
Shelly A. Trigg: Oh yeah, sure. That's a great idea.
Shelly A. Trigg: Um, so like if
Shelly A. Trigg: Do you wanna do you want us to go through and actually
Shelly A. Trigg: If you
Shelly A. Trigg: Are yeah okay yeah
Yaamini Ranjani Venkataraman: Yeah, I could do it. Um,
Hang on.
Okay.
Yaamini Ranjani Venkataraman: So, like, one of the things that you'll probably want to do with your website is add your CV to it.
Yaamini Ranjani Venkataraman: So this is my website that I'm messing around with. And these are all like my nav bar links at the top. And so what I've actually ended up doing is I added a little CV nav bar link. So when you like click on it.
Yaamini Ranjani Venkataraman: Do eventually your CV shows up. Yay. Okay, so we're gonna go over how to do that. So, can't remember what exactly I'm sharing. Hang on, let me make sure I'm actually sharing what I need to share
Yaamini Ranjani Venkataraman: To do to do to do to do
Yaamini Ranjani Venkataraman: Alright, so there's a couple steps to do that first. Like, the first thing you want to do is
Yaamini Ranjani Venkataraman: To and you want to create a folder for your CV, so we don't know why, but like Jacko gets really mad if your CV is like
Yaamini Ranjani Venkataraman: In like any of these like other folders that has been included right like so you can put your CV in your assets folder, if you wanted to. I created a separate
Yaamini Ranjani Venkataraman: folder called CV and put my CV and they're just as long as your CV and this isn't like a separate folder probably assets would work.
Yaamini Ranjani Venkataraman: It doesn't work if you keep it in the docs folder. Don't put it in the doc folder won't work. And so you want to create a little location for your CV and then
Yaamini Ranjani Venkataraman: What you're going to do is actually find my Adam window. I'm in your config file, you have all your nav bar links so you can add a CV nav bar link or whatever you want to call it.
Yaamini Ranjani Venkataraman: And then in quotes. You want to add the path of like where your CV is so my CV. Right. It's in my test repo my like CV folder and then there's my CV. So, in quotes, I have this like backslash my CV folder and then the file name just just make a drama and CD.
Yaamini Ranjani Venkataraman: So,
Yaamini Ranjani Venkataraman: When you get mean I can't tell based off with my share screen if this makes sense to anyone or not, but you're going to, you have your CV make little folder for your CV, put your CV in that folder and then specify where your CV is in a nav bar link.
Yaamini Ranjani Venkataraman: Um, so you're going to make that change.
Yaamini Ranjani Venkataraman: And then you're going to commit it GitHub. I haven't made any changes.
Yaamini Ranjani Venkataraman: But that's when you do that when that renders that's what, that's how you get your CV to like render as like a full PDF in your website as opposed to like having a link to your CV that then like downloads on someone else's machine but yeah
Shelly A. Trigg: Sweet. Does anyone have questions about that because I can. I could go through the whole process if if anyone's interested
Shelly A. Trigg: Cool. It sounds like everyone gets it. Um, then I guess maybe. Oh, one thing I definitely wanted to remember to do is change. So, like, say you there's a link to something that is either broken or something and you get this like message I'm
Shelly A. Trigg: On or in this website template, the forum for a message has like a South Park cop comes up.
Shelly A. Trigg: I'm so I'm thinking that people probably don't want that, since it's a professional website. Um, so I just wanted to show you how you can change that error message. I'm wondering if there's like a way like I can force.
Shelly A. Trigg: For something to come up, maybe in the about me. Like if I put
Shelly A. Trigg: I'm just going to like create a
Like
Shelly A. Trigg: Test link and then I'll put like a bad link.
Sam White: Or Shelly even
Sam White: Even faster, a few
Sam White: If you go to your website and let's say you're on the about me page change about me to pizza or something. So here in your URL.
Shelly A. Trigg: Like, I'm sorry, I'm
Shelly A. Trigg: File.
No.
Shelly A. Trigg: Yeah. Oh, here. Yeah.
Sam White: put anything pizza. The word anything
Sam White: Gotcha.
Shelly A. Trigg: So like, see this is the message that comes
Sam White: Out if there is
Shelly A. Trigg: Right, you probably don't want this so
Shelly A. Trigg: The way that we edit this is
Shelly A. Trigg: I think in here. So this is the 404 message. And I think this is the only file. They that you need to edit so you can open this and Adam
Shelly A. Trigg: Yep. And this is an HTML.
Shelly A. Trigg: I think you can save this and Markdown, is that correct them. And then just can edit it, or you can just leave it in
Shelly A. Trigg: HTML. So what you would want to do, like, say, if you want to put a different picture in here or if you just want to remove this picture.
Shelly A. Trigg: If you want to put a different picture in here, you would just change this part to like wherever your image is in your repo. So like if it's just in your images folder.
Shelly A. Trigg: Like if I wanted to use that plant picture.
Shelly A. Trigg: It's here. So I would just do some dot PNG some dot PNG that would make the plant picture come up in this error message.
Shelly A. Trigg: Um, but if I don't want to include an image at all.
Shelly A. Trigg: I think I can just
Shelly A. Trigg: Delete this whole line.
Shelly A. Trigg: Keep this I think you have to keep this di V part because that's the closing from this. So you just delete just delete this image line here and I'm going to click Save.
Shelly A. Trigg: Or and then I'm gonna
Shelly A. Trigg: Get back here. So I'm going to write remove South Park cop.
Shelly A. Trigg: Committed push
Shelly A. Trigg: So once that once those changes take effect. He that guy should be gone.
Shelly A. Trigg: But remember, it takes sometimes it takes a little, little while for the changes to take effect.
Shelly A. Trigg: Yeah, so now that image is gone.
Shelly A. Trigg: And you could even change this text in that same for a four dot html file. If you wanted to say something else.
Shelly A. Trigg: Awesome. So I guess I'm going to go back to our
Shelly A. Trigg: Website. Let's see. Yeah, good.
Shelly A. Trigg: I just want to go back to the
Shelly A. Trigg: Our website design.
Shelly A. Trigg: Repo to see if there's other things. So we did this part. Oh, there's other some other parts of the config file that
Shelly A. Trigg: We can just look through so we figured out these different nav links and how you can
Shelly A. Trigg: Go to different markdown files.
Shelly A. Trigg: Or that you create.
Shelly A. Trigg: And then you can nest.
Shelly A. Trigg: A
Shelly A. Trigg: Links in your nav bar menu. Um, and then the avatar, which is that little round this thing. If we want to, um, whoops. If we want to change that.
Shelly A. Trigg: You can just add your like a headshot or whatever, you know, if you want to put a different picture in there.
Shelly A. Trigg: So I'm just going to do that plant one. Again, I'm not PNG save
Shelly A. Trigg: Gonna be update avatar.
Shelly A. Trigg: Push.
Shelly A. Trigg: Cool.
Shelly A. Trigg: So then, eventually, this is should update to the plan.
Shelly A. Trigg: And then let's see whether other things. Yeah. By default it's round if you want it to be.
Shelly A. Trigg: Not round. Yeah, you can just
Shelly A. Trigg: Change this to false.
Shelly A. Trigg: And then there's all these other options that you can play around with that are in these comments.
Shelly A. Trigg: And then like if you want to add your social media links you just change this like to whatever you're
Already I know what mine is
Shelly A. Trigg: Something like that.
Shelly A. Trigg: I don't remember. It's one of those um
Shelly A. Trigg: Yeah.
Shelly A. Trigg: And then if I don't want to use this one I can think of just common thought out.
Shelly A. Trigg: And then if the spacing or something got weird when you were editing this um and you save that which happened to someone in our lab and she just ended up like reverting it. Um, so maybe I can do that. I'll just mess with this make the mistake. So this is like add social media links.
Shelly A. Trigg: Commit push
Shelly A. Trigg: Also the plan change there. So I think I should have just changed change these so they should link back to mine, but it's probably going to take a second. Yeah.
Shelly A. Trigg: Okay.
Shelly A. Trigg: So say
Shelly A. Trigg: I guess, while those changes are being made. Actually, maybe I'm gonna
Shelly A. Trigg: I guess I wanted to show you guys how to do this first. So, like, say, if I wanted to, like, say, made a mistake when I added these like had some weird I added an extra space or whatever. So then if I wanted to.
Shelly A. Trigg: Undo that
Shelly A. Trigg: I think I can just
Shelly A. Trigg: Do revert this several right Sam.
Shelly A. Trigg: They can just click revert
Shelly A. Trigg: And then I think
Shelly A. Trigg: Yeah revert so that is gonna on. Do I believe that will undo the changes that I just made here so I push
Shelly A. Trigg: And then
Shelly A. Trigg: I can go back here.
Shelly A. Trigg: And I think. Yeah. So now it's reverted. So remember I had changed this to my
Shelly A. Trigg: usernames and emails and now it's reverted back to what it was before.
Shelly A. Trigg: Cool. Yeah. So there's all these different things that you can you can add or take away just by putting the
Shelly A. Trigg: Hashtag in front of it.
Shelly A. Trigg: And then
Shelly A. Trigg: There's some other stuff. So there's this like description.
Shelly A. Trigg: I'm not sure where that is.
Shelly A. Trigg: Yeah, I don't, I don't remember where that some of this stuff. You might have to play around with. I'm not sure where this actually comes up. What is if you wanted to show a link within the footer. Okay.
Shelly A. Trigg: Remove the following line. Yeah. So there's some other other customizations that you can just read through and make however you want. Um,
Shelly A. Trigg: And what else. So here's a way like this is how you would change the
Michaela Lowe: Colors and stuff.
Shelly A. Trigg: Um, so if you right now. It's like got a gray.
Shelly A. Trigg: Header in a gray footer and white background. So if you wanted to change those colors. Um, it's all this is all hex code. So we put a link in here too. I'm
Is it this color.
Shelly A. Trigg: It may not be this one.
Shelly A. Trigg: Because there's no link. Um, but this is like, I think. Yeah. Many put this one and this is like a whoops a bad link.
Shelly A. Trigg: Maybe, um, where you can pick different
Shelly A. Trigg: Colored like you can get different color palettes to get these schemes and that are visually pleasing or you can just pick whatever colors you want and if you're trying to figure out different hex codes. I think you can just like
Shelly A. Trigg: Google it. I can add a link to this in the read me, but I think you can just
Shelly A. Trigg: I was at this one. I can't remember there's one that you can like
Shoot.
Shelly A. Trigg: This one not finding right one, sorry.
Shelly A. Trigg: Okay, so like say something like this. Now, it tells you. I just like click on if I want to do blue, here's the code for the blue right I think are like if you open your are I think there's also some our packages that you can do.
Shelly A. Trigg: That you can also use to do this, but it's kind of
Shelly A. Trigg: Pre yeah so you can pick anything on the spectrum, right, and get the hex code for it and then you can change so you can change these to whatever color you wanted
Yaamini Ranjani Venkataraman: That mean just to kind of like recap, like what you've done. It's like
Yaamini Ranjani Venkataraman: There's like all these different like GitHub website templates and we picked the beautiful Jekyll one because we like the way it looks, but within the class repo. There are all these other templates. So if there's
Yaamini Ranjani Venkataraman: One that you feel like best suits your what your vision is for your professional website like you could do the same thing that we did today and like fork that repo rename it and then just like play around with like the config file and
Yaamini Ranjani Venkataraman: To customize your website. So right now, you're at this place where like you have a skeleton website. And basically, you just need to like play around with it at the content that you want.
Yaamini Ranjani Venkataraman: You can add markdown files for like publication information. You can edit your like config file to get like color schemes working or like change the nav bar information, you can change. What is that like that like index file to check change.
Yaamini Ranjani Venkataraman: The first page of your website. And so right as you're going about making these changes, right, like you can
Yaamini Ranjani Venkataraman: Like fiddle with website make the changes or you can
Yaamini Ranjani Venkataraman: Look at people who have like already put together GitHub website and just copy what they did. And I think that's like, that's one of the best parts of the GitHub website is like you can figure out what other people did. And if you like it, you just take it. You do it yourself and
Yaamini Ranjani Venkataraman: Then so
Sam White: then additionally, you know the code. This markdown stuff is essentially plain English mean there's some minor formatting stuff with
Sam White: Using hashtags and whatnot. But it's nothing like what we saw with that very brief snippet of HTML that Shelley showed us we're trying to remove the South Park cop. I mean,
Sam White: Post that image and that text that South Park pop was, you know, four or five different lines with, you know, greater than, less than symbols and div slash and did a
Sam White: Bunch of stuff with the markdown stuff we see that you know it was a single line. The link to something and you know it's just much more readable and easier to follow for humans, and people that are, you know, new to modify websites.
Shelly A. Trigg: Well yeah, I guess, in the last 10 minutes. Did anyone have any questions or anything specific that they're looking to include in their website that might be tricky, or some ideas or anything like that.
Shelly A. Trigg: Well, if there's something that you are really interested in or something that you get caught up in
Shelly A. Trigg: Or keep getting errors about or something like that. Remember, we can you can post it on the website design issues area and just, you can even link to the file that you're trying to change or whatever.
Shelly A. Trigg: So that we can all kind of help each other.
Shelly A. Trigg: Put, put our websites together.
Shelly A. Trigg: Because I feel like there's some sometimes there's some really cool things that, like, yeah, you may see some other user having their website and
Shelly A. Trigg: Yeah, I feel like that's always nice to especially even if you're just, you know, posting stuff like, Hey, I found this cool way to do this, but something that's kind of nice to share
Shelly A. Trigg: If you feel like, yeah.
Kerry Accola: I guess I have a quick question. If no one else does. I'm trying, I'm getting an error, trying to upload an image. So it's exclamation point square brackets and then within this circular brackets. It's the raw
Shelly A. Trigg: abuser.
Kerry Accola: Okay, yeah, something is not working, but
Kerry Accola: I just share what i'm sure
Kerry Accola: So this is it. Okay.
Shelly A. Trigg: And like when you go to can you, like, go to that website if you type that in your browser.
Kerry Accola: Oh,
Sam White: Sorry, can you just show us. So what's the, what's the problem at the moment.
Kerry Accola: Okay, so here is the error if you can see it. Sorry.
Kerry Accola: I'm
Kerry Accola: Sorry, what's your atoms screen.
Kerry Accola: Okay.
Kerry Accola: It did not show error and Adam I saved it. And then in
Kerry Accola: The top I pushed it I committed master pushed it then when I go to
Kerry Accola: Sorry here.
Kerry Accola: I have an airline
Kerry Accola: Airline 35 I'm
Sam White: We can only see your conflict file and had him.
Sam White: On the air. It's okay.
Shelly A. Trigg: May have to like stop share and then share again and just share your whole desktop or something.
Kerry Accola: About that.
Shelly A. Trigg: That's okay, my computer was doing that I was doing that earlier.
Kerry Accola: Okay, I've way too much open right now.
Shelly A. Trigg: I feel like that to my computer's
Shelly A. Trigg: You could. You could try like test. I don't know if there's something that's like in the formatting in the atom like in your text file or if it's like the URL that's the problem.
Kerry Accola: I'm only showing one, but the air.
Kerry Accola: Sorry, I feel like I'm taking everyone's time. So I'll try to figure it out, and I will post. If I can't
Shelly A. Trigg: That's okay. I mean,
Shelly A. Trigg: There's still five minutes left, so don't we have some time.
Sam White: Well, this, this could be
Sam White: A good time to try out using the revert function on the GitHub Desktop that
Kerry Accola: I did do that. And it cleared. I tried another one like I think their little circular Avatar and that worked. And then I tried again to add edge and then there was another error.
Shelly A. Trigg: So did you push the image to the image already
Kerry Accola: On the GitHub Desktop. Yeah, or they get desktop. Yes.
Shelly A. Trigg: Okay, so can you can you actually like go to that. Like if you copy and paste that URL into your browser. Is it a functional link like
Kerry Accola: Okay, I'll try that.
Yeah.
Kerry Accola: No it is not.
Shelly A. Trigg: So let's push that push that image for maybe try
Shelly A. Trigg: Like if you see
Kerry Accola: Oh wait, I'm sorry. I didn't grab the whole link. Let me just try one more time. Okay.
Kerry Accola: Yes, it is.
Kerry Accola: Okay, yeah.
Shelly A. Trigg: So that's not the problem. So then the problem is
Shelly A. Trigg: Is maybe in the
Shelly A. Trigg: I guess. Could it be in the formatting.
Shelly A. Trigg: In. So where were you, adding this image.
Kerry Accola: It was an add on, and right below where you said where the comments say if you want to add have an image logo and then I did X here I'll share this
Shelly A. Trigg: Yeah, I'll share my screen again.
Kerry Accola: So I have the x
Shelly A. Trigg: config file. Okay, I see, I see. Uh huh.
And then
Shelly A. Trigg: It just, Oh, I see. And so if you scroll back over to the. Yep. If you see how it's commented out where it says title dash and inch colon. So I think what you're going to do is delete that hash that passionate thing and just hit Enter.
Shelly A. Trigg: And then I think from your exclamation point online 35, you're just going to delete. Actually, this just says, put it to the path to your image. So if you go, I think we're yours would be assets slash
Shelly A. Trigg: Image, maybe. So instead of
Kerry Accola: Oh, so I'm here, I would
Shelly A. Trigg: Yeah.
Kerry Accola: Okay, so
Shelly A. Trigg: Oh, sorry. That wasn't that's not exactly straightforward but yeah and that's what
Shelly A. Trigg: What you need to change. Yes.
Shelly A. Trigg: Yep.
Kerry Accola: And then
Shelly A. Trigg: Then what so
If you
Kerry Accola: Okay, then I get that, but the name of the image. Okay.
Shelly A. Trigg: Yep, exactly that part. Mm hmm. And then you can delete that line 35
Kerry Accola: Oh, okay, yeah. So, so you don't actually need the exclamation point and hard brackets.
Shelly A. Trigg: So you do in a markdown file. This is a why ML file. So I'm like that formatting and line 35 is specific for markdown so like if this was your about me empty file.
Shelly A. Trigg: That's where you would use that, um,
Shelly A. Trigg: But this one has special formatting because it's the dot y AMP L.
Kerry Accola: So then I am doing this correctly, like image commit to master.
Shelly A. Trigg: Yep.
Yeah.
Shelly A. Trigg: Yeah. Oh, this is cool. This will be cool to see what this looks like.
Kerry Accola: Which one is it now.
Kerry Accola: So then
Kerry Accola: Do I refresh.
Shelly A. Trigg: Yeah, you can try just clicking refresh, or if you want to see you could go to your website repo settings and then scroll
Shelly A. Trigg: To the GitHub page and then see if it's is published.
Kerry Accola: Okay, it didn't. The website. Sorry, I realized I'm not sharing my whole desktop, it didn't work. So there's a little icon in the upper left. That is that image.
Shelly A. Trigg: Cool. That's awesome.
Kerry Accola: Thank you, sir. Thank you so much.
Shelly A. Trigg: Yeah. That's awesome.
Shelly A. Trigg: Cool. Did anyone have any last questions or anything.
Kerry Accola: Any other comments or
Shelly A. Trigg: Anything else
Jessica Lindsay: It's just might be browsing around looking at different templates. But I'm just curious if off the top of your head if you know if there's an option to do like a photo gallery, if you have like a bunch of fieldwork images or something.
Shelly A. Trigg: It's oh yeah okay if that's like
Jessica Lindsay: Something I need to look into myself.
Shelly A. Trigg: Yeah, there's definitely different options for that. So one thing you could do is you could create a markdown file that is a photo gallery by
Shelly A. Trigg: Just, it would be a markdown file and then you could have like a caption, which would just be like your regular text and then like
Shelly A. Trigg: Either put your image above or below it and the image formatting is just what Carrie was showing us initially. That was an exclamation point square brackets and the curly brackets with the image link.
Shelly A. Trigg: So that's one way to do it as a markdown page and then there's also other options. Um,
Shelly A. Trigg: So like here, I can just quickly share and
Shelly A. Trigg: Show you. Um, so if you go to
Shelly A. Trigg: In the examples.
Shelly A. Trigg: Beautiful jackal examples. There's one, this one, Derek.
Shelly A. Trigg: Vogel so he has this like kind of like a rotating images here. And I believe that's like if you wanted to see how to do that.
Shelly A. Trigg: Here's his
Shelly A. Trigg: GitHub. So here's his website repo and then this is actually in his index markdown file. So this is like what's telling his website.
Shelly A. Trigg: I think to do this so
Shelly A. Trigg: This is a render what we're looking at here is a rendered markdown the actual markdown file. If we click raw looks like this. So you could make something that looks like. Or you could just like copy this and make an index.md if you do that you just wanna
Shelly A. Trigg: I think you can remove the index one that's in your website repo now and replace it with this because I think you can only have you might only be able to have one index.
Shelly A. Trigg: File in the main website repository. But what he did was just so all of these are different images that he added to a folder called img and then yeah, he has another folder probably just for these
Shelly A. Trigg: What are they called like panel.
Shelly A. Trigg: Whatever.
Shelly A. Trigg: Panel images. So then you could put like all your different pictures here and then this is like that his captions for them. Um, so that's like another way to showcase a lot of pictures.
Shelly A. Trigg: And I'm sure there's like a whole bunch of other
Shelly A. Trigg: Other ways to do it. And yeah, you can just sort of search through other people's websites.
Shelly A. Trigg: To get different ideas and you could, you know, if you want to just get a discussion going about this. We could start one in
Shelly A. Trigg: Our website design repo issues section that hopefully that you know could get you started. And you can play around with different things and see what were your liking.
Shelly A. Trigg: Yeah.
Shelly A. Trigg: Alrighty. Everyone I think everyone's kind of dropping off and we're at time. So I hope this was
Shelly A. Trigg: Helpful and
Shelly A. Trigg: Yeah, I'm excited to keep working on these websites and see what you guys come up with
Kerry Accola: Thanks so much.
Awesome.
Marta Gomez-Buckley: Thank you, everybody.
Shelly A. Trigg: Really, I hope this
Shelly A. Trigg: Is it still recording. I'm like, it's so hard to tell. Like, I think.
Shelly A. Trigg: Sweet, awesome. Thanks so much them.