Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:14Length:1.6 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Creating a GitHub Pages Site

In this lesson, you are going to learn how to create a repository in GitHub, enable GitHub Pages, choose a built-in theme, and see your new creation live in the browser. Seems like a lot, but it will literally only take a couple of minutes.

2.1 Creating a GitHub Pages Site

So obviously before we can start creating some cool customized Jekyll, GitHub Pages website, we need to have a GitHub Pages site. So the first thing that we're gonna do is we're gonna go ahead and create one. Now, there are a couple of different ways to do this, actually there are several different ways to do this, but a couple of the more fundamental ways to do it is by using the UI here. And what we're gonna do is we're gonna create a repository-based GitHub Pages site. Now, you can create a GitHub Pages site for your specific user account or for your organization if you're part of an organization. The process for doing either one is actually very similar. So what you're gonna do is you're gonna go to the New repository button. And what you're gonna do is you're gonna give this repository a name. Now, if you already have an existing repository and you wanna create a GitHub Pages site for that repo, then you can just go ahead and go directly into that repository. I'm starting from scratch though. Now, if you wanted to create a GitHub Pages site for your user account, or for your organization, you just name it in a very specific way. And the way that it works, if you wanna create one for your specific user account, then you would start with your user account name. So in my case, it's kreatived like that, and then you would simply put on the end of it .github.io. And I already have one that's named this, but that would create a very special repository that is basically for the purposes of creating a GitHub Pages site for your account. Or if you have an organization, you would do the same thing with your organization, .github.io. But in this case, like I said, I already have one. So I'm simply going to create a specialized repository that's gonna be used for the purposes of creating a site. Now once again, if you already have a GitHub repo that you wanna use, then you can go ahead and use that. I'm just gonna create one now. And we're just gonna call this jekyll-site, and I think that should be fine. We're gonna keep this as Public. We will not initialize it with a README file, and it doesn't really matter so much for the gitignore and the license. I'm not really worried about that right now. So we'll just go ahead and click Create repository. And then we're gonna get to this point. And you're gonna see that there's nothing in here just yet, and that's fine. We don't really need anything in there just yet. But when we're creating a GitHub Pages site, so right now this is nothing more than a plain and vanilla GitHub repo. So we're gonna come over here to the Settings tab, and we're gonna go down a little bit until we get to the GitHub Pages section here. So what we can say here is now we can enable this as being a GitHub Pages site. But what you're gonna see here is that it's currently disabled and that you first have to add content to your repository before you can publish. So in order to kinda skip past this, I could have added a README file before, but I didn't. I just wanted to kinda go through this so you can see the fact that you can't really do anything until you have something in this repo. So let's go back into the code, and you're gonna see that there's nothing here. But I'm gonna go ahead and use this README link right here to go ahead and add a README file to this repo. And this is gonna put the name of the repo in here, and that's fine. It doesn't really need to be anything fancy. And we'll come down to the bottom and we'll just go ahead and Commit this new file. So now we have a single file in there, it's a README file, though it could be any file, it doesn't really matter, and now we have this in here. So now we can go back over to our Settings. Let's go back down to our GitHub Pages, and now you can see that it's currently disabled, but I need to select a Source. So I'm gonna click this drop-down button, and I only have a single master branch. Now you can create separate branches that can house your GitHub Pages site off of your repo if you want to. I only have a single branch, so I'm gonna select master, and then I can use Choose a theme. So that's where we're gonna start. I'm gonna select Choose a theme, and what you're gonna see here is all of the preincluded Jekyll themes that are part of GitHub Pages. So these are literally in GitHub, and you can use these and customize them to your heart's desire. So you have Cayman and Slate and Merlot and Time Machine. And really you can pick any of these. I think there's about a dozen of them. And you can just pick one of them, it doesn't really matter. And you'll see what it looks like. And you got some markup in here, and you can see what things are gonna look like and what it looks like if you have code. It doesn't really matter. So just pick one that looks kind of interesting to you, and just go ahead and click Select theme. So what that's gonna do is it's going to add some files and some customization to your website. So I think everything should be set in here for now. We see now that our GitHub site is ready to be published. It's gonna give you this specific URL. And because this is a repository based URL, you're gonna see your username or organization name .github.io/, and then whatever the name of that repo is called. So let's just go ahead and open this in a new tab, and eventually it should be published. And if it is, you're gonna see the content that was added, not only by our theme that we chose, but also that README file that we put in there by default. So as you can see, the way that Jekyll works is it's going to provide a lot of the structure, a lot of the markup, a lot of the stylings. And it's gonna jam together that with your content that you've created using Markdown. And that's really the power of it. It's really creating these very rich and very beautiful websites statically just using content that you've created. I did not write a single line of code, everything was done for me. I just added a single README file, a single Markdown file, and that's where this content has come from. And then up here, this comes from the name of the actual repo. So there's a couple things going on in here, but let's go ahead and go back into our site here. And let's go over to our code and see what things look like. So as you can see now, nothing has really changed other than we still have my README file, but I now have this _config.yml. This is YAML. So it's really just kind of a fancy configuration format that you're gonna see kinda throughout Jekyll. So let's go ahead and take a quick look at this, and it's actually only gonna have a single line in there, it's gonna have theme. And as you can see here, the theme that we chose was put in here, this jekyll-theme-tactile. So all that's happened is that Github has placed this configuration file into your repo. And that tells GitHub and GitHub Pages exactly what theme we wanna use for our particular site, and that's all that happens out of the box. So you don't have to worry about a single line of code. Now we can do a lot of customization, and we're gonna get into that. But this is all you really need to get up and running is to create a simple Markdown file or some content files, and Jekyll will handle the rest and put all that together. So we're gonna start to dig into this a little bit more as we go, but what I wanna do now is I actually wanna bring the source code down to my local machine. So we're gonna click the Clone or download button, and I'm going to clone this repo. So I'm simply going to copy this URL right here. And then I'm going to open up a Shell here, and I'm gonna go to my desktop just so I can make sure I always have this. And I'm simply going to say, git clone, and I'm going to clone this particular repo. And it's going to clone it to my desktop. Now, obviously if you do this and it asks you for your username and password for GitHub, go ahead and type it in. And then everything should download to your desktop. And as you can see here, I have my Jekyll site. So I'm actually gonna go into jekyll-site and then I'm going to open up Visual Studio Code in that directory so we can see exactly what's going on. Now, once again, I have a Jekyll config file, which we saw in there, it just has a single line, and I have my README file. And that's it. So that's where we're gonna start. And then we're gonna start to create this GitHub Pages website, fully customized, with customized Jekyll themes, and all of our own Markdown content.

Back to the top