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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 GitHub Pages and Jekyll Themes

Before we really start digging into creating this site, let’s take a step back and take a look at the big picture. In order for you to be successful with GitHub Pages and Jekyll, you are going to need a bit of background and to know where to go when you have questions or issues.

Related Links

2.2 GitHub Pages and Jekyll Themes

So before we actually start to dig into the bowels of Jekyll and start to work with customizing our GitHub Pages site. I wanna take a step backwards and kinda show you a place to go where you can really start to get a lot of information about Jekyll and about GitHub Pages sites. Because ultimately this is a lot of hunting and pecking when you're first getting started. And you wanna know how to customize this, how to change that button, how to pick a theme, and all those types of things. So I showed you the basics, but there's so much more out there. So if you head over to pages.github.com, you're gonna see this, and this is gonna walk you through the instructions on how to do all these things. Just like I showed you how to do in the previous lesson. Creating a user or an organization site, creating a project site, you can do all those things very similarly to how I just showed you. Now, if you go up to the top right, you're gonna see a Pages Help button, so you can go here first. Now, this may not seem like a lot of information. But the more you dig and the more you pull the thread, the more you're gonna find. So if I were to advise anything, I would start with the What is GitHub Pages? So if you click in here, you're gonna get a high level overview of what exactly GitHub Pages is, how it's put together. It'll tell you about the different types of pages, about the Theme Chooser, and how to really get in there and start to work with it. So if we dig in a little bit deeper, let's go and check out the Theme Chooser. So this is gonna walk you through the process that I just showed you on how to pick a theme and then what it's ultimately going to do. Now it might at some point be very interesting for you, and I'm gonna show you how to do this in an upcoming lesson, to learn about how to override things and how to really see what's going on in these themes. All I did was add in a single _config file, and there's a single line in there that says theme. How and where is all of this coming from? So if you were to click on this About Jekyll Themes on GitHub, it's going to give you a lot more information about themes. It's gonna show you the samples that you saw previously. But there's a link in here to the officially supported themes. And this is what I was talking about a little bit before. So if I click on this, these are the officially supported themes of GitHub. So like I said, these are literally in GitHub, they're officially supported. These are the ones that you saw. There's about a dozen of them here. And the cool thing is if I where to click on one of these, so I choose Tactile. So if I were to click on this, it’s not gonna take me to a demo site, it’s actually gonna take me to the source code. And it’s going to show you exactly what this theme looks like, all the stylings, all the markup, all the CSS and HTML, and JavaScript. It’s all gonna be in here. So you can really take a look in here and see what it’s all about. And a lot of times they’ll show you different forms of usages. How do you choose it? You simply create and _config.yml, and then you use this theme line. And so all the things that I showed you previously, it's not magic. It's very simply taking these usage and installation steps and just doing it for you. So you can see here it's actually quite simple to start from scratch. And that's what I was talking about before, that there's actually several ways to get started with GitHub Pages. I just chose the path of least resistance. So a lot of times in here you'll see previews, and what things looks like, and sample markup and markdown, and things like that. And that's all great. So once again, you can see the actual code here, but if you wanted to see a functioning site, you can typically find a link in the description. And it will take you over to a sample site and what everything ultimately looks like. So you can get a good feel as to what that theme looks like if I were to add a bunch of headers. Maybe create some navigation, show some different pages, maybe some blog posts, all those types of things. That's what you're gonna see in these samples. So let's go back and let's take a look here. So as you see here, we were taking a look at the officially supported themes. Now, that's how things worked in GitHub Pages for quite some time. There was a shortlist of officially supported themes. But relatively recently, GitHub has kinda opened it up so that GitHub Pages can now support open source Jekyll themes that are actually hosted on GitHub, which is incredibly cool. And in which is what we're ultimately gonna do in this course. But if you were to click on this other link, you're gonna see here a whole list of, right now, 462 repositories that contain open source Jekyll themes. Which means, instead of just using one of those 12 that you saw in that previous list, you could use any of these. So I could come in here and pick one of these. And just like I did before, I could look at the source code and a lot of them, I can see a demo site of what it actually looks like up and running. But I'm gonna give you a couple warnings and a little bit of guidance here. Now, I've used a couple of these and I like a lot of them. I really like the minimal-mistakes one, so that's the one that we're gonna be using in this course. So if I were to click on this, once again, it's gonna show you a description, the actual source code, some information in the README, and things like that. But what is very important when you're choosing one of these themes, especially one of these open source themes, is the level of documentation and the customization that you're able to do. So how do you really know how well it's put together? Well in my mind, one of the best ways to do that is actually to click on this link, go over to the demo site. And a lot of these, the ones that are created really well are gonna be full websites. And they're gonna have a lot of samples in here, and a lot of them will have Quick-Start Guides or some sort of documentation on how you use it. And this is one of my favorites because it's very well documented and you can see all the things that are going on. So down the left-hand side I can see the Quick-Start Guide. I can see Structure, Installation, and Upgrading. How to customize the Configuration, Navigation, UI Text, Layouts, Working with Posts and Pages and Collections. All these things that you're more than likely gonna wanna do in a GitHub Pages site is very well documented, and it's very easy to find. The other thing that you're really gonna wanna look for when you're picking one of these themes is to make sure that it's relatively upkept and being taken care of regularly. And as you can see here, as of this recording, this was actually worked on just four days ago. So the author here is actually working on this site, he's maintaining it. And that's a good thing, especially if you're using these GitHub Pages sites for an actual project or something that you're showing to customers. You really want to have something that's well-maintained and that's constantly being worked on. Because otherwise it could fall out. If things break, you're left holding the bag trying to fix things. So I would definitely recommend a well-documented site and one that is maintained regularly. So if those could be little pieces of guidance for you, then that would be a good thing as well. So once again, we're gonna start to dig in some of the customization stuff now, now that we have a couple of these kinda pieces of information in our tool belt. We know where this is coming from. We know how to get to the source code, which we'll talk about a little bit later. And once again, we are gonna be using the minimal-mistakes theme. And I'm gonna show you in the next lesson how we actually use that and incorporate it into our site.

Back to the top