[Web] Building up Github pages

Before we started...

This content was posted originally in my old GitHub pages blog site, but I've abandoned that site, so I post here again in English.

I have to say, this post has saved me once when I tried to made another GitHub pages site for my friend, so I hope you find it useful too.

Who's this article for?

• who...wants to have a blog in GitHub 
• who is not familiar with command line, neither wants to use it
• Windows users
• who's never heard of Jekyll、Bash、gem

What happened to me?

I got a laptop and a PC, both are Windows. After I saw some posts about building website with GitHub, I was so excited about it and tried to do it on my own.

First on the GitHub Pages tutorial, they suggested using Jekyll; so without a doubt, I went to Jekyll to see what's on there. But with more tutorial steps, there showed up more stuff I'm not familiar with like Ruby or Ubuntu; and with some tools I tried to install, I encountered a few compatibility problems.

Isn't this supposed to be simple and quick? How does this become so complicated and difficult? And I tried to understand what these posts for and why they suggested installing all those tools. Turns out, it's all but for one purpose only:

• Preview the site on locals

For me, the time and patience I have invested in were way pass what it can bring to me, so I gave up researching and trying.

So if you're just like me, who wants a simple site and cares not about "previewing" it on your local computer, you're in the right place. We can have a simple but still awesome site without diving too deeply!

How to have GitHub Pages

Steps:

1. Register on GitHub
2. Choose template from Jekyll(without installing anything)
3. Do some trivial settings

That's it!
I will assume that you already have an account on GitHub, so let's start from step 2!

Choose a template

Go to Jekyll template sites, and choose a one you like, then "fork" it to your GitHub.
If it's a zip file, just unzip it and upload it to your branch.

If you're not sure how to do it, see as following:

• Choose a template, then go to its GitHub page( click on Homepage)

• Click "Fork" to have a branch in your own GitHub

• You will see a newly-built project( or we call it repository on GitHub). As mine here is named Alomahuang/hanuman, the name before slash is your GitHub name, and the name after it is the name of the repo of template you just forked.

Basically it's done already!

If you're downloading the zip. Just create a new repository, and I highly suggest you name it like Blog or BlogSite, it's related to your blog url.

Settings

Here we will change settings in your repo, and adjust the config file of your repo too.

Setting changing

The name you choose will affect what your url looks like, so be aware.

• Click on setting in the repo you just created.

• Change the name to what you want( originally mine was named Type-on-Strap, and I changed it to Blog)

Change default branch

Usually there are two mainly-used branches: master and gh-pages. Since we( or I) decide not to preview anything on our(or my) local computer, it doesn't really matter which branch you choose as default branch. But I still make gh-pages as my default.

Two places needed to be done：

• One is Settings->Branches

• The other is Settings->Options（scroll to the bottom）

Adjust config

The final and the most step of all is to adjust your config.yml file. Don't mess with it!

• Under the right branch of your repo(the branch you choose to be default), click _config_yml file.

• Click on "edit" (top right)

Content needs to be changed:

• replace the content of baseurl to your repo's name. In my case it's Blog, and remember you might need to put slash before.

baseurl: "/Blog"

• replace the content of url to your GitHub（usually it's https://your_account.github.io)

url: "https://alomahuang.github.io"

These two are the most important, others just for some cutomazation.

• Don't forget to commit!

Voila!
Remember go to Settings->Options to check your full url!