Join James Williamson for an in-depth discussion in this video Deploying to GitHub Pages, part of Jekyll for Web Designers.
- Because Jekyll is so tightly integrated with GitHub Pages, it's a natural starting point for deploying Jekyll sites. We're going to deploy our sample blog through GitHub Pages, and along the way, explore some of the considerations for deploying Jekyll-based sites through GitHub Pages. If you scroll down through here, it talks a little bit about the two options that you have in using GitHub Pages to host your site. You can do a user or organization site, which if you're using the free account for GitHub Pages, you get one each, or project site, where you have sort of unlimited.
And if you click on each of these, you get a set of options underneath it, kind of walks you through the process. So this is kind of neat. It's sort of like a little quick-start guide. Now if you're looking for a little bit more detailed information, if I click on the page's help, it takes me to the GitHub Help category for GitHub Pages, and you'll notice that there's actually a section here entirely on using Jekyll with Pages. So if you click on this, it's a nice little rundown of using Jekyll, and making sure that everything is set up properly within Jekyll to host on GitHub Pages.
Now with that in mind, if you also go to Jekyll's site and look in their documentation, they have a section on GitHub Pages as well. It covers deploying, it covers making sure that your versions of Jekyll and your RubyGems are the same as GitHub pages, the difference between user and organization pages, which we're going to talk about in just a moment, your URL structure, all sorts of things. So there really is a wealth of information on both GitHub Pages and Jekyll's site on deploying and hosting your Jekyll site on GitHub Pages.
Now I want to take just a moment to talk about the difference between user organization pages and project pages. So if I scroll down in the Jekyll documentation, you can see that they talk about user and organization pages. When you create an account on GitHub, you're assigned an ID. So for example, mine is jameswillweb, and theirs is mojombo. So my user page repository would be jameswillweb.github.io. So for each account, you get, sort of, one user and organization page.
A lot of people will use that for their personal blog. An organization, for example, might use it for their organization site. It's really up to you how you want to use that. Now when you're serving your Jekyll site to your user or organization page, you don't really need to do anything special. You just create a repository with the same name as your account name, and then you upload your Jekyll site to the master branch of that repository. So you don't have to set up anything special. GitHub Pages will then generate the site for you and serve it at that URL.
Now project pages, on the other hand, you can have as many of those as you want. Within your account, you can create a new repository and then create a project page based on that repository. The only difference there is that you're going to create a separate branch called gh-pages, and then you're going to upload your Jekyll site to that directory, GitHub Pages will generate the site for you, and it will serve it. And it serves it in a subdomain. So it'll be your username, like jameswillweb.github.io/, and then the project.
Now that creates a few issues the base URL of our file, which we're going to talk about, because we're going to use this project option. The thing that you need to remember is that every account, or user or organization, gets one user or organization page, but as many project pages as you want. Okay, so now that we know a little bit more about deploying Jekyll sites on GitHub Pages, we're going to start that process by creating our own GitHub account next.
- Installing Jekyll
- Setting configuration options
- Building page templates and navigation
- Adding metadata and content with Jekyll
- Creating a blog index with dates, post excerpts, and pagination
- Writing posts and pages using Markdown
- Creating a blog archive with tags
- Deploying Jekyll websites
- Uploading to GitHub