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

Next lesson playing in 5 seconds


Free Preview: Customize Your GitHub Pages Site With Jekyll


  • Overview
  • Transcript

Have you ever had a great idea for a content-based website or blog? Sure! We all have. But it's hard to find time to build a full-featured, good-looking website from the ground up. On the other hand, a full-featured CMS (content management system) is a little heavyweight and complex for a simple site or proof of concept. That's where GitHub Pages and Jekyll come in.

In this course, Derek Jensen will show you how easy it is to use GitHub Pages and Jekyll to create a fully customizable website and blog in no time. And don't think that you're stuck with the same template as everyone else. You can choose from one of a dozen built-in themes as well as nearly 500 open-source themes on GitHub. In this course, you'll learn how to create a great-looking GitHub Pages site quickly and easily.

1. Introduction

1.1 Introduction

Have you ever had that great idea for a content driven website or blog? I know I have, many of them. So, why do we all have about ten websites out there everyday trying to generate traffic and maybe even income? Typically for two reasons. The first is time. It takes a lot of time and effort to build a fully functional website that not only looks good. But has great content. So why not use something like WordPress, you say? Now don't get me wrong, I love WordPress. But the problem with those types of solutions is, well, the second problem. Money. If I'm testing out a new idea, I don't necessarily want to have to sign up for a whole year or more, and have to pay up and over a hundred or even several hundreds of dollars just to validate an idea. So what do we do? I have the solution. GitHub. How is GitHub going to help? Well GitHub has a great feature buried in their known as GitHub pages. That is a free feature that anyone can can take advantage of to create Websites. Well what about all the styling and functionality you say? GitHub pages has us covered there as well with Jekyll. Jekyll is a technology that can take simple static content that you write in mark down. And make it look good as a website and a blog using some pre-built and custom themes. So do I have your interest peaked yet? I know, I know, it may sound too good to be true. But just give me a little of your time and I will show you that for the one time low price of free, you can create a fully featured customizable beautiful looking website and blog. And all you have to do is worry about writing the content. So what are we waiting for? Let's get started.

1.2 Prerequisites

Now before we get started building out any really cool websites or blogs using Jekyll and GitHub Pages, we need to cover a few of the basic prerequisites and assumptions that I'm gonna be making throughout this course. The first is, because we're using GitHub Pages, well, you need to have a GitHub account. Luckily for us, it is absolutely free, so if you don't already have one, you can head over to github.com. Simply fill out this really simple form on the front, click the big green button, and you're gonna be on your way. So the nice thing here is that, once again, very easy, entry-level, there's no cost associated with this, it's absolutely free. So if you already have an account, great, if not, head over to github.com and create one. Now typically what you can do with these GitHub Pages and just about anything else in GitHub is, you are free to use the built-in text editor in the web browser when you are going through your GitHub repository. You are free to do that, but I don't really recommend it for any sort of projects of any real size. It's okay to get started doing that if you want, but then I would highly recommend you using some sort of text editor that you're familiar with, that you're comfortable with. And it can be just about anything, anything ranging from your built-in text editors like Notepad or Textedit, to other third-party ones. Now, if I can provide a recommendation, and I'm going to, I would highly recommend you take a look at Visual Studio Code if you haven't already. Visual Studio Code is a free programmer's text editor provided by Microsoft for any platform you're on. You can use it on Mac, Windows, and Linux, and there's a lot of really great extensions and plug-ins that you can use to add support for different languages. You could go from anything from Microsoft technologies like C# and VB.NET to more open source, more common languages like Python or PHP or Ruby or things like that. So you can definitely use this for just about any sort of development you could ever wanna do. So I would highly recommend you taking a look at this. And this is what I'm gonna be using throughout this course. Because we're gonna be using a text editor in this course, I'm gonna need to be able to get access to some sort of terminal, so that I can be sending and getting things in and out of GitHub. Once again, you can use any sort of built-in terminal that you want. I tend to use iTerm2 on my Mac, I really like this terminal application. But once again, you can use any sort of built-in one that you have, or any one you are comfortable using. They're all basically the same when it comes to the simple commands that we're gonna be using here. Now I am referring to getting things in and out of GitHub via a command line, and the way that you can do that is by using git. Now git is a free and open source version control system that you can use on both the client and server, so what does that mean? Well, GitHub is a remote server-based distributive version control system, that we are going to tie into. That's where we're gonna have everything live, all of our source code. But I wanna do all the editing locally on my machine, so git is the mechanism that we're gonna use to get data out or clone or pull data from the remote repository in GitHub down to my local machine. So that I can make changes to it and then ultimately push those changes up to GitHub. Now, if you're not familiar with git, it's okay, we're gonna go over some of the absolute basics. There's really only two commands we're gonna be using the entire course. And that's gonna be committing changes and pushing changes. Everything else is just going to be handled either by GitHub specifically or by my text editor locally on my machine. So once you have all of these things kind of downloaded and installed and set up or whatever sort of environment you care to use, you're gonna be ready to go. So now that we have these basics out of the way, let's get into the world of understanding Jekyll and GitHub Pages.