FREELessons: 10Length: 50 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Adding Some JavaScript

For a modern website, you'll usually want to add some JavaScript to make it a little more interactive. And why should your GitHub Pages site be any different? In this lesson, I'll show you how to include a JavaScript file with your site, and also how to bring in third-party libraries that are hosted in a CDN.

2.4 Adding Some JavaScript

Now that we have some basic stylings, let's move on to some JavaScript. So what we can do at this point is we can come back over to GitHub and we can look at our basic structure of our site right here. And I could go through the same process of adding a JS or a JavaScript folder. And then putting some JavaScript in there and doing all that sort of stuff by hand here directly through GitHub. But that doesn't sound very fun at all, so what we're gonna do now is we're actually going to take this repo, and I'm gonna clone it locally, which I haven't done yet. And I'm gonna go ahead and start to do some editing from within Visual Studio Code, so how do we do that? Well, I'm going to go into my Code tab here at the main root, and I'm gonna come over to the this clone or download button. So what you can do is you can open this in Desktop. You can download a zip file, but I'm just gonna go ahead and do a Git clone. So this is the HTTPS clone URL, right here. So I'm gonna click this button to copy it, and then what I'm gonna do is I'm gonna come over into some sort of terminal application. You can use whatever you want. Like I said before, you have to have Git installed to be able to do this. And as you can see here, I'm sitting on my desktop right now. So what I wanna do is I wanna clone that repository locally and be able to edit it locally, cuz that's a much more pleasurable experience for me. So I'm simply going to say git clone, and then I'm gonna paste that URL in there. And I'm going to go ahead and clone it all locally so it's going to download everything, it's gonna put it on my desktop. So if I take a look at what's going on in my directory right now, you can see I have my pages demo root folder right now. And then I can go into it and start to play around with it. But one thing that you may see is, if you do this, depending on how you have everything set up with Git, you may get a request in here for username and password. Just type in your username and password for your GitHub account. And you should be able to clone everything just fine. Okay, so I'm going to go into pages-demo/, and then I'm going to use code and open up that directory. So now I can come in here and I can take a look at Visual Studio Code. And now I can see here that I have my CSS folder, my main.css file, and my index.html file. And as you can see here, this is going to be a little bit nicer, because I can actually use tools that I'm familiar with to do this development. So let's just go ahead and add in some basics here. So like I said before, I wanna create another folder here. So let's create a new folder and we'll just call this js for JavaScript. And then we can come in here and let's go ahead and create a new file, and this one we'll just call it main.js. So you can call it anything you want, doesn't really make much of a difference. But we're gonna go ahead and put that in there. Okay, so now what we wanna do is we want to be able to include that JavaScript file in here. So I wanna have access to that, so I'm going to come into the bottom of my body here. And honestly, as much as I would love to write a bunch of vanilla JavaScript, typically what I do is I use jQuery. So let's go ahead and add that in there. So yes, I can include third-party JavaScript libraries that are coming from CDNs inside of my GitHub page's website. So let's go ahead and do that now, I'm gonna add in a script tag here. And the source is going to be https, and this is going to be And I'm gonna be using 3.2.1-, we'll use the minified version. You don't have to, but I'm gonna use it here, .js, and then let's go ahead and just close it out. So I'm going to include jQuery right here, and then I also want to add in a reference to my local file that I've created. And that's going to be within js/main.js, just like that. All right, so now I am referencing two JavaScript files. One that is hosted on a CDN, so I don't necessarily have to have that JavaScript file local, which is nice. And then I'm going to also reference a local file, this main.js file right here. So for now let's just go ahead and save those changes. So what I wanna do now is actually I wanna push those changes up to GitHub. So the way that we do that is I gonna come back to my terminal here and what I can do is I can say, git status. So right now you gonna see that I have modified my index.html file and I've also added a js folder. And there's also things in there, but I don't need to worry about that, it just knows that I've added this folder. And so what I wanna do is I wanna add all of these changes into my change set. So the way that I do that is I can say git add, and I'm just gonna say -a and it's going to add everything. So now if I say git status, now you're gonna see that I have added these modified files and new files, index.html and js/main.js. All right, so now I have this change set going on. Now I wanna commit these changes locally so that I can push them up to GitHub. So how do I do that? So I'm simply gonna say git commit -m, because I want to give it it a message so I can say specifically what I've done here. So I'll just say add reference to jQuery and custom js file, something like that. So a little bit better of a descriptive name for what's actually going on here. So now I've committed that locally, but now I wanna push it up. So I wanna say git push, I wanna push to the origin, which is going to be where this originally came from, and I wanna push what? I wanna push my local master branch, so let's go ahead and do that. So once again, depending on how your GitHub is set up or depending on how your Git client is setup, it may ask you for a username and password. So you may just have to type that stuff in and go ahead and push it up. So now I've made some changes locally and I've pushed things up to my GitHub repo. So let's come over here and take a look, let's refresh this. And now you're gonna see that I have made some changes here. I have a JavaScript file, I should see my main.js file in here. And I do, there's nothing in there yet, but that's okay, we'll fix that. And I'll also see a reference to that within my index.html file. Now I haven't made any specific changes that are visual to the end user. So if I come back over here and I refresh this page, now you're going to see that I've obviously typed something in wrong here, but I'll fix that in just a second. But you'll see now that I'm getting a couple of files, I'm getting my main.css file, I'm getting my main.js file. And I was attempting to get my jQuery 3.2.1-min js file, which I am getting a 404 error with, which means I probably just didn't type it in correctly. And I do see the problem here, that this is supposed to be 3.2.1.min.js, so I could pull all that stuff down and let's just do that for good purposes here. Lets go ahead and say git pull, so I can go ahead and pull all the changes. And you can see that everything is already up to date. So now let's go back into Visual Studio code, let's just make this one little fix here. Let's add that period in there instead of a hyphen, let's save that. So then once again, we're gonna come in here and we'll say git add. Well actually we'll do a git status, and we're gonna see that I modified index.html. So I want to get that change added in. So I'll say git add, and this time I can be very specific about what I wanna add in, I just wanna add the changes for that one. So I can say git status again, and it's gonna say this one has been added in and it's been modified. So let's do another commit and we're gonna say -n, and we'll say fixed URL for jQuery. Okay, and then we'll do a git push again origin master. So it's gonna push all my changes up to GitHub again. And once it has done that, I'll switch back over here and we can come back and see. Now if we take a look at our code in index.html, now we see that the proper URL is listed here. And if I come over here, let's just hold this down and do an empty cache and hard reload. Now you gonna see it's getting the proper file from where I requested. So now, like I said before, you're not actually seeing, the user's not seeing actual changes here. But if I were just refreshing my page, I really wouldn't know that I'm getting these errors or that bad things are necessarily happening, or even the fact that maybe my changes aren't being published yet. So by using the developer tools, by using the clear cache and hard refresh, I can now see that I'm getting all of the proper things that I wanna be seeing. So now that I have that, let's go ahead and start to tweak some of the JavaScript.

Back to the top