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.3 Enabling a Remote Theme

While the initial theme we chose for our site was nice, there are so many other options out there. In this lesson, I'll show you how to search GitHub to find free, open-source Jekyll themes that you can use in your new site.

2.3 Enabling a Remote Theme

Now that we have our site up and running here, I wanna start to customize it a little bit. And the first thing that I want to do is use a custom theme, or one of the open source themes that we found on GitHub in the previous lesson. And if you recall, that one was called minimal mistakes, as you can see right here. So what I wanna do is I wanna incorporate this into our site and use this theme and then start to customize it and build up some pages and navigation and do some tinkering and things like that, that are gonna be really important for whatever sort of site you are looking to build. Now, as I mentioned before, you really wanna pay attention to the sites that have very good documentation, as this one does. So the first thing you're gonna wanna do is figure out how to install it and actually use this on your site. So what we're gonna do is we're gonna scroll down a little bit, and you'll see some information, notable features, skin color variations, which we'll play with a little bit later, demo pages, and then ultimately, installation. Now with most of these themes, you're gonna find that there's two main ways to do the installation. You can use the Ruby Gem Method, which is typically if you are maybe running things locally, if you have this theme running locally. Or if you are actually installing it on a machine that you have access to in the cloud or something like that. If you are managing the entire system and have to install all the Gems and things like that. Because these Jekyll themes and Jekyll itself is actually a Ruby implementation. So we're not doing that, we're actually using this GitHub Pages method down here. And actually, it's a little bit easier than it looks. Now, the first two steps are actually kinda being handled for us, so we don't really have to worry about it because we're using GitHub Pages. All we have to worry about is the third step right here, which is adding this configuration setting to our _config.yml file. So what I'm gonna do is I'm gonna copy this remote theme entry right here, so let's go ahead and copy that. Let's head over to our source code, as you can see right here. And what I'm gonna do is I'm going to overwrite this theme line right here. You can only have one theme or you should only have one theme or remote theme in your main configuration file. So I'm gonna go ahead and save that. And then, what I'm gonna wanna do is I'm gonna ultimately want to make sure that I push this up to GitHub. So there's a couple different ways you can do that. You can do it through Visual Studio code, you can use any other tools or command line options that you want. I typically like to use the command line, and here I'm using the integrated terminal within Visual Studio code. If you're following along and you wanna do the same and you don't see that, you can simply come up to the View menu and select Integrated Terminal, and it should open up right away. So as you can see, I'm in my Jekyll site directory. And what I'm gonna do is I'm gonna say get push origin master. And it's probably gonna ask me for a username, so I'm going to give it my username. And then it's gonna ask for a password, and I'm gonna type in my password. And then it's gonna go ahead and push all of my changes up to my repo. So once this is all done successfully, if you don't get any errors, what I typically like to do is I like to go back over to GitHub to the actual source code of my site, as you can see right here, and I'm gonna do a refresh. And if I refresh that, you should now see that we have updated to use the remote theme. So now I've made some changes to my config file. I've pushed them up to the website, and now given a few moments you should be able to see the changes on your site. Now this could take anywhere from a couple of seconds, to a few minutes, to a couple of hours. You never really know how long this is gonna take because it's all hinging on the changes being bundled and deployed and pushed to your website from GitHub. So it may take a few moments. But after a little while if you refresh your page, you should see something that looks a little different, and here you go. So as you can see, everything looks just a little bit different. It's still fairly plain, not a big deal, but it has changed. And so that means that the changes that we've made to user remote theme have been adopted by GitHub Pages, and now we actually have our site. So now what do we do? Well, typically what I would do at this point, is I would spend a little bit of time familiarizing yourself with some of the basics of the configurations that you can do within your particular theme. So in my case, because I'm using minimal mistakes, I would come back up to the top of the documentation or the source code here and click on this link right here. And it would ultimately take me over to the page that's gonna look an awful lot like this. Now, once you are here, this is very specific to this particular theme. You're gonna have a bunch of different sample pages, a quick start guide here and there, and just kinda some samples that look like you can make your site look based on this theme, which is actually pretty cool. So, the first thing that I would do with this particular theme is I would go to the quick start guide and start to familiarize myself with some of the basics. Don't worry too much, I'm gonna spend the next couple of lessons going over a lot of the main site configurations that we're gonna play with. And then ultimately, creating some menus and some pages and dealing with some other things that are specific to this particular theme. But then also, another thing that I would highly recommend you doing right now and throughout the rest of this course, and then obviously at the end of this course so that you begin to remember these things a little bit more, is to familiarize yourself a little bit more with Jekyll itself. And you can do that by going to jekyllrb.com. And what's really gonna help you is if you head over to the DOCS, you're gonna see a lot of information here. Quick-start guide installation, all that's really, really good. But what's gonna be incredibly important for you to understand is gonna be everything that you see in here within your content. This is where you're gonna be spending most of your time in this course, as well as when you're getting started with these themes. Specifically, when it comes to Front Matter. Front Matter is incredibly important, and it is basically what allows you to do a lot of your configuration that is non-content specific when it comes to populating this type of a site. And I'm gonna show you what this looks like. But really, all Front Matter is is a block that is at the beginning or the front of your pages, whether it's in your configuration file, or in your content files or page files or blog files or your post files ,whatever have you. You can have this block of code at the top that is kind of delineated by these three hyphens with some name value pairs and some configuration in the middle. And that's what this is gonna look like. Now there's a lot of built in settings that you can put in there that are gonna be used all throughout your theme. And there's also some room for customization where you can add your own and then update code behind the scenes to further customize this theme. But before we get too ahead of ourselves, I just want you to know that it's very good starting places when it comes to actually using these themes that you find on GitHub Pages, or anywhere on the Internet for that matter. Okay, so now that we have been able to successfully apply this remote theme to our GitHub Pages site. Now it's time for us to do a little bit of customization and start to clean up some of things that we're seeing here that maybe aren't as friendly to the end user.

Back to the top