How I Made This Site

I build this site content using Jekyll (a static site generator) and host it using GitHub Pages. The procedures are roughly the following:

Quickstart a local template Jekyll site.

a. Install Ruby (and RubyGems, the Ruby package manager).

macOS Catalina 10.15 already comes with ruby 2.6.3.
```
$ which ruby
/usr/bin/ruby
$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]
$ which gem
/usr/bin/gem
```
update 2023: It is not recommended to use the system Ruby for flexibility and security considerations (see Moncef Belyamani - Why You Shouldn’t Use the System Ruby to Install Gems on a Mac). Instead, step-by-step install homebrew (macOS package manager), chruby (Ruby version manager), then certain version of Ruby (see Jekyll installation guide on macOS). The installed executables are like:
```
$ which ruby
/Users/wenliyan/.rubies/ruby-3.2.2/bin/ruby
$ ruby -v
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-darwin21]
$ which gem
/Users/wenliyan/.rubies/ruby-3.2.2/bin/gem
```
b. Install gems of Jekyll and Bundler.
```
gem install jekyll bundler
```
c. Create a template site. Default gems are installed during this process.
```
mkdir myblog
cd myblog
jekyll new .
```
d. Build and serve locally (default port: 4000).
```
bundle exec jekyll serve
```
Update 2023: Ruby>3.0 does not come with webrick, leading to error bundler: failed to load command: jekyll ... cannot load such file -- webrick (LoadError) when running the above command. The solution is bundle add webrick (see stackoverflow reference).
Modifiy configuration files according to GitHub requirements.

a. Gemfile: specifies basic gems required in building this jekyll site. The full list of gems (including dependencies) and their versions will be automatically logged down from current environment in Gemfile.lock when using bundle exec jekyll serve. The versions will be consistent with GitHub Pages dependency versions.
```
source "https://rubygems.org"
gem "minima"
group :jekyll_plugins do
  gem "github-pages"
  gem "jekyll-feed"
end
```
b. _config.yml: configure Jekyll settings, such as the site’s theme and plugins, and site variables such as title, name, description, github_username, etc. GitHub Pages have some default Jekyll settings such as the markdown processor - kramdown.
Push to GitHub and serve online.

a. Add a typical .gitignore file for the Jekyll site.
```
_site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
   
.DS_Store
```
b. Create GitHub project with the name %USER%.github.io and push local contents into it using git commands. The static site will automatically be built and served at https://%USER%.github.io.
Add post content, improve site style and plugin support gradually – long-term.

A typical directory hierarchy for this site looks like the following, with some theme default files stored at locations like /Library/Ruby/Gems/2.6.0/gems/minima-2.5.1 (acquired using bundle info --path minima)

   .
   ├── .gitignore
   ├── 404.html
   ├── Gemfile
   ├── Gemfile.lock
   ├── _config.yml
   ├── _includes
   │   ├── footer.html
   │   ├── head.html
   │   ├── header.html
   │   └── ...
   ├── _layouts
   │   ├── default.html
   │   ├── home.html
   │   ├── post.html
   │   ├── leetcode.html
   │   └── ...
   ├── _posts
   │   ├── 2020-01-28-short-title.md
   │   └── ...
   ├── _sass
   │   ├── minima
   │   │   └── ...
   │   └── minima.scss
   ├── _site
   │   └── ... 
   ├── about.md
   ├── assets
   │   ├── images
   │   │   └── ...
   │   ├── main.scss
   │   └── minima-social-icons.svg
   └── index.md