Set up a personal website with templates

Before start

I was intended to write all the css and html scripts when I decided to set up my personal website. Truth is, I have only learned the basics, some of which are even outdated. Besides, setting up a website from scratch is also complicated enough for me to give up at the very first step. After a year, I surrendered and decided to use templates as ordinary people like me would do.

Bootstrap Templates

By using templates, I meant to implement bootstrap on my current Github website. I read some great tutorials such as Bootstrap 4 start-up and also the official introduction to bootstrap. Then I came to this blog template, Clean Blog. I’ve seen many people using very similar layout, which they probably forked from this. Finally I decided to fork Hux Blog which is also derived from Clean Blog but with more functions.

Set up environment

GitHub Pages are powered by Jekyll, a blog-aware static site generator in Ruby. which can be used to maintain your website and test locally. You may need to update your ruby version and change the path for default ruby. To do this, first install rvm:

1
2

~$ brew install ruby
~$ export PATH=$HOME/.gem/ruby/X.X.0/bin:$PATH

Install Jekyll with gem.

1

~$ gem install bundler jekyll

To start, use bundler (this will generate a Gemfile):

1
2
3

~$ bundle init
~$ bundle add jekyll
~$ bundle exec jekyll serve

Two major issues I’ve encountered when jekyll failed are ruby version and xcode version. The xcode issue (also outdated gcc version) is solved in this solution thread by:

1
2
3

~$ gem sources --remove https://rubygems.org/
~$ gem sources -a http://rubygems.org/
~$ gem install jekyll

Start blogging

After setting up the website, now it’s time to start blogging with markdown which converts your text to HTML files. I used to set up my website for a CS course homework with hand-written html and css. Those days are gone now. Markdown makes things easier. Some useful cheat sheet for markdown here.

Add emojis

A couple of lines may be needed for using Jemoji.

• First update sheetstyle file to use inline (if default is block) for img.emoji. Then update min.css file.

  
  1
  2
  3
  4
  5
  6
  
  img.emoji {
    display: inline;
    height: 1em;
    width: 1em;
    margin-bottom: 0.25em;
  }
  
  

• Install jemoji:

  
  1
  
  gem install jemoji
  
  

• Modify Gemfile (or bundel add jemoji)

  
  1
  
  gem 'jemoji'
  
  

• Add jemoji in config.yml:

  
  1
  
  plugins:  - jemoji
  
  

  Some cheat sheet for emojis here.

• Enjoy!

• Next
  Life in HK