Building Static Website


website

As described in Previous Post, I built this website using Jekyll, hosted on Github Pages and use domain name registered from namecheap. This is how it was done.

Github Pages

I used my existing Github account and created a new User Pages. Initially I only created a repository “mbaharsyah.github.io” and added an index.html file using Github’s web interface with “Hello, World!” text.

2015-08-30-add-gh-file.png

Then I verified that everything was working properly by browsing to http://mbaharsyah.github.io/. Saw my “Hello, World!”, and the index.html served its purpose. So I deleted the file and the repository to prepare for the real action.

Jekyll

Installation

I installed Jekyll on my Mac, and the process was pretty straight-forward even for me with zero knowledge of Ruby (Yes, it requires Ruby to run Jekyll). For Windows, though, you needs to install Ruby and some other dependencies first (complete instruction here)

Follow these instructions to install Jekyll on a Mac

  • Install XCode command line tools Some of the Jekyll dependencies depend on XCode command line tools, to install it run following command through terminal and follow the instruction in GUI:
xcode-select --install
  • Install Jekyll using RubyGems by running this command in terminal:
gem install jekyll

It will start downloading some dependencies, and when everything is finished, you’re set to run Jekyll locally on your machine.

Creating a Website

There are several ways to create a new Website using Jekyll:

  • Ask Jekyll to create it by running following command:
jekyll new blog

After completed, it will create a new folder blog in your current directory. It also create a structure required for your website

  • Download available templates There are tons of great templates out there which you can use. Most of them (if not all) can be downloaded to your local machine for your own use.

  • Fork and Clone an existing Jekyll Github Pages Site / Template I recommend this method, and this is what I did. I decided to use Pixyll theme and forked their github repository and renamed it according to github pages rule (i.e. yourusername.github.io And then I cloned this repository into my machine:

git clone https://github.com/mbaharsyah/mbaharsyah.github.io.git .

Updating the Website

After creating the Jekyll website, you need to modify some configurations located in _config.yml. This normally includes the website’s name, author, and other information according to the template that you use.

Running the Website locally

After all configurations are set, all posts are reviewed, updated, deleted or added. You want to see how the website looks like. You can run it on your local machine by running following command

cd blog
jekyll serve .

It will trigger your site to be built and when it is done, browse to http://localhost:8080 to see your website.

Publishing to Github Pages

When you’re ready to publish your website on Github Pages, you can commit all your files to Github repository (yourusername.github.io). If you created the website like in option 3 above, you can do it by running:

git add --all
git commit -m "Publishing my website to Github"
git push origin master

It will upload all your modifications to the repo and then you can open http://yourusername.github.io to see your website.

If you use the other methods to create your website, you may want to see github help page on how to perform initial push to the repo

Custom Domain

When everything is working fine with your website running on http://yourusername.github.io, you can then link it to your own domain name. I use namecheap as my Domain Name Registrar, but this guide shall be generic enough for all others.

Add CNAME file in repository

Using the same way as index.html file above, create a file named CNAME (all in caps) which contains single line which is your domain name, e.g.

www.example.com

Modify DNS Settings

From your domain control panel, find DNS settings or hosts record. For namecheap it’s under My Account –> My Domains –> Manage Domains –> All Host Records. Create 2 A records pointing to github addresses:

@ 192.30.252.154
@ 192.30.252.153

In general, it means that any request to your domain name, must be forwarded to either of those DNS (they’re Github’s, btw). And then it’s Github’s task to point it to the correct website.

You need also to add a CNAME entry

www yourusername.github.io.

What it means is that www. points to yourusername.github.io. You can of course change www to any subdomain you would like to have. And please note there's a full stop at the end of github.io domain. See below for my complete setup in namecheap

2015-08-30-dns.png


Now you have setup everything, wait a few minutes before the DNS setting is applied. You can try to browse to http://subdomain.domain.tld and you will see your github pages Jekyll website.

Related Posts

New Website

I had wanted to setup my own website for so long. The main reason was simply to make myself visible on the net. I used Jekyll hosted in Github Pages