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.
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.ioAnd 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 masterIt 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.
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.