How to Upload Jekyll to Github Page

By . Filed in Web Design

We have discussed how to setup a Jekyll blog locally in our computer, create a draft, and manage multiple drafts with the use of a plugin in the previous posts. Now, we are ready to deploy the blog to the online server, letting the world see how awesome our blog is.

Deploying Jekyll to online server is so easy, as it is only a static website. All you need is shared hosting with decent hard disk space and bandwidth sufficient enough to host it. The cost for shared hosting should be affordable. But then again, why worry when you can host a Jekyll blog completely for free – using Github Pages.

Github offers Github Pages for free for anyone to host their static websites. It has Jekyll built-in, so it is a good place to host our Jekyll-powered blog. In this article, we will show you how to deploy our blog to Github Pages.

Getting Started

First, you need to have a Github account. Once you have one, create a new repository. The name of your repository will be used for the blog address in the following format {username}.github.io/{repo-name}.

In this example, I will name my repository simply as blog. When the repository has been created, copy the clone url.

Add, Commit, and Push

We are going to upload our local Jekyll files to our newly created Github repository. I will use Github for Mac to do the job, which can be downloaded for free – Github for Windows is also available for Windows users.

Let’s launch Github app, and then add our Jekyll blog directory as a Local Repository.

Head over to the Settings page. Paste the Github git clone URL that was copied above.

Commit and Push the files to Github.

Go to Github. Ensure that all files have been successfully uploaded.

Github Pages Branch

Creating a Github page for a repository is as easy as creating a new git branch. In the Github app, go to the Branches tab. Create a new branch named gh-pages of the master branch, and click the Publish button.

The new branch is now registered in the Github repository, like so.

The Github Page for your repository should be ready in a few minutes. When it is, you can open it on the browsers at {username}.github.io/{repo-name}, for example:

Troubleshooting

If the blog is not styled properly, this could be because the stylesheet is not linked properly. To solve this issue, open the default.html in _layouts folder. You will see that the stylesheet is initialized with a slash sign, /.

<link rel="stylesheet" href="/css/syntax.css">

Omit that first slash, so the path looks like the following:

<link rel="stylesheet" href="css/syntax.css">

Then Commit the change, and Push it to Github. The blog should now be displayed properly.

Author:

Thoriq is a writer for hongkiat.com. He is also a web developer with very unpredictable sleep cycle.

Tags:

Advertisement

Comments are closed. Contact Us.