GitHub Pages

[00:00:00]
>> Jerome Hardaway: For those of you who don't know what GitHub Pages is, it is also a special repository for GitHub. What you do to build your GitHub Page, is you create a repository that says your username.github.io. That is how you create the repository that populates this. Now, for those who have never been exposed to it, what it does is it populates and builds an entire website for you.

[00:00:33]
You could do plain HTML, CSS JavaScript, or you can use Jekyll as a build tool if you wanna use it for blogging and things of that nature. In my github.io, in my GitHub Pages page I have everything that I want to, like the sections that I have, my deployment and how I use it, where to navigate.

[00:00:57]
How to contact me, either via Twitter or on LinkedIn, preferably LinkedIn, and I have the link right here to go into my portfolio based on this. Now, I still follow rules, some rules that I follow. I believe in white space, had a profile pic, I chose a nice color, I prefer color blue.

[00:01:18]
I added an API, I literally pick the easiest API to add, and that is the weather app API. Let people know what's the weather in my hometown, right? Like that, I didn't code that, that's just an API usage, right? So now when you're sitting here, like, he did that?

[00:01:38]
Let me go into his code, script.js, and see how his code is looking to do that. Now we have that answer, and we can go forward like, all right, so he did actually code that. And that's how I do things, right? Now I have my story. Now, one thing that I wouldn't recommend on a portfolio for a user is, if you're in a job market, having so much text.

[00:02:09]
I have that story that people usually go to my websites and things that nature for the marketability of like, I wanna learn more about bits of code, versus I wanna see you're a good employee, right? They go to my LinkedIn and GitHub for that, right? So, seeing this, this is sort of my journey.

[00:02:32]
And I have my work, right? Now, this is where I did something that I thought was cool. And I instead of adding a bunch of pages as all this stuff was live, I just added cards and used icons. And they linked to things, as you see, that pops up at the bottom that are alive out here, right?

[00:02:55]
So people can now see, there's a lot of live content out there for Jerome, for his work. Now, if I was to continue to build up on this, I would add user pages, or things like that to these. So I have user stories, case studies for each one.

[00:03:14]
Although there'd be some weird case studies for this, okay. How does the Business Insider developers story have a case study? They just wrote an article on me and included me in it, that's it, right? So one thing that you can do for pages, so a lot of people don't tell you, this is one thing that I push on my students now.

[00:03:35]
And that is, now that you have your colors, your theme for your design doc, start theming your other projects, so that way it's easier for you to build them and you can turn them like this one. Like I said, this is a project, I was like, no, the branch isn't protected.

[00:03:49]
All the rules that I would do are broken, right? This is the project that has a very funny story to it. My kid, I literally picked this project out of the woodwork. I just came from the flu, 2018, I had the flu and I had to get up, help my kid with a school project, he told us at the last minute.

[00:04:09]
So he had to do the research and I ended up having to have code it out because he didn't know what he was doing. And I didn't wanna go to the store for a poster board talking about Nashville, where we lived. So we coded this up and I didn't know that you could do this until I learned this by accident.

[00:04:28]
You can go into your Settings and you go to Pages, and you can deploy any repo on GitHub now directly into Pages. That's one thing that my troops are now doing, they're now going into the projects, into the repos, and they are now making it live. If I was to go, let's do this real quick, I could just make a new repo, right?

[00:04:55]
New repo, hello-world. Just like I said, boom, choose owner.
>> Jerome Hardaway: Testing.
>> Jerome Hardaway: Create a public repo.
>> Jerome Hardaway: Don't do any of this stuff. I'm just going to,
>> Jerome Hardaway: Go straight into Create a codespace.
>> Jerome Hardaway: Remy's there, so that's cool. Now I'm right here, I can be just, right, perfect.

[00:05:46]
Touch.
>> Jerome Hardaway: Index.html.
>> Jerome Hardaway: Ls, right here.
>> Jerome Hardaway: Now here.
>> Jerome Hardaway: Html:5, bam, hello-world. Gotta love Emmett, right?
>> Jerome Hardaway: Commit it up, all right.
>> Student 1: I think you gotta put a commit message on line one.
>> Jerome Hardaway: Update, thank you, man.
>> Student 1: I don't know if you [INAUDIBLE] that. You can then close, maybe.

[00:06:45]
>> Jerome Hardaway: Yeah, well.
>> Jerome Hardaway: Okay, go over that.
>> Jerome Hardaway: Yes, but now we're gonna go here and find that repo now.
>> Jerome Hardaway: 91 repositories, hello-world.
>> Jerome Hardaway: Index.html is in there, Settings, Pages, GitHub Pages, Branch, Main, Save. All right, now let's see what happens. It is still pending. So, it's gonna take some time to build it out.

[00:07:31]
Once it comes back, we will definitely show it. Yes, sir?
>> Student 1: Is there a benefit to doing this GitHub Page approach versus hosting it yourself? And would you ever have both for whatever reason?
>> Jerome Hardaway: I like this approach when it comes to making it a more modular style of doing my code, or if I have a project that I'm planning out.

[00:07:57]
For instance, let's say I'm doing a project on patterns and I wanna make the patterns a different project or a different repo. But I have the theme, I add that to my repo, I go and have those patterns in there, and I just have each pattern out as a different repo, right?

[00:08:16]
If I'm spacing out my work, this is one process I would do. Or if I have a fully fledged project that I wanna have live that has absolutely nothing to do with the code base, and I wanna just save it there. Let's say I have a Gatsby app, that's totally different, right?

[00:08:32]
Like the Eric app is totally different from this, I don't know why. Yeah, right here, it's totally different than this stuff. So let's say I wanna do my own URL, I have a different project, the same URL, and I just have with this URL and I just mask it with another URL.

[00:08:50]
And have GitHub be my hosting company for it on my hosting site. So that's one way I like to use a GitHub Pages as the hosting, especially on the frontend, as primary hosting tool. You might not, that's fine, but I definitely recommend you use it that way. I use Vercel on everything now.

[00:09:13]
I used to use Gatsby and Netlify a lot, but now I use Gatsby. Now it's just all Vercel for most of my work. But when it comes to my portfolio stuff, I try to keep everything as contained on GitHub as possible, even showcasing this work like this. So that's a great opportunity to have a repo that has absolutely nothing to do with your portfolio.

[00:09:39]
And host it using GitHub Pages and then turn around and having and showcasing that work without having to spin up another hosting site. It's like spinning up a different environment on GitHub.
>> Student 2: You can have a data-driven application. You can connect to an API from here, can't you?

[00:09:55]
>> Jerome Hardaway: Yes, you can. I have an API like this right here, it's being done by API. I don't know the weather back home, I have no idea. I definitely don't know Celsius. [LAUGH] I'm an American, I have no idea what Celsius is. So all that's being pulled directly from the API, and it's coming from the JavaScript and API key.

[00:10:19]
So that's one of the things that you have especially doing frontend, I always recommend using an API. And Open Weather API is one of the easiest, lowest hanging fruit APIs, again, have and throw on a project. So, hey, I'll just take this tiny API, put it right here using the frontend.