portfolio-site-jekyll

Portfolio static site generated by jekyll. The site is deployed to https://mydatahack.github.io/portfolio/.

(1) Architecture Overview

• HTML: Using Jekyll to generate static site
• CSS: Using sass and gulp to compile & minify
• JS: For non-react page, using TypeScript and gulp & rollup to compile & minify
• React: Using TypeScript and Webpack

(2) Local Dev Environment Setup

• Ruby: ~> 2.6.6 (https://rubyinstaller.org/ - Choose recommended version of Ruby+Devkit)
• Node.js: ~> 12.14

1. Install Ruby

For Windows, https://rubyinstaller.org/ - Choose recommended version of Ruby+Devkit.

For Mac, brew install ruby

2. Install Jekyll after installing Ruby

gem install bundler jekyll

3. Build JavaScript & CSS

cd code
npm i

(3) Folder Structure

_include # this is where partial html fragments are defined
_layouts # this is where Jekyll layouts are defined
_site # not commited, jekyll generate static site to this folder
assets # static assests - where react bundle, css bundle, js bundles are pushed. Images are directly added and source controlled
code # where we develop css and js. Bundle will be pushed to assets/js and assets/css folders
prototype # where we use it to prototype front end look
react # where we develop react. Bundle will be pushed to assets/js folder

404.html # error page
index.html # entrypoint, using default template
*.html # other pages

(4) Build

There are 3 steps to build the Jekyll site.

1. Build js and css bundle from /code
2. Build react bundle from /react
3. Build Jekyll site

cd code
npm run deploy:prod

cd ..
jekyll build

# Local development
# may need to use bundle exec jekyll serve for the firs time
# may need to run `bundle install`
jekyll serve --host localhot

# for local js and css hot loading
npm run watch

Tips

chaining or in where_exp can be only done two

this works.

{% assign writingList = site.posts
  | where_exp: "post", "post.title == site.data.carousel.carouselItems.creativeWriting[0]
  or post.title == site.data.carousel.carouselItems.creativeWriting[1]"
%}

this errors

{% assign writingList = site.posts
  | where_exp: "post", "post.title == site.data.carousel.carouselItems.creativeWriting[0]
  or post.title == site.data.carousel.carouselItems.creativeWriting[1]
  or post.title == site.data.carousel.carouselItems.creativeWriting[2]"
%}

We can reverse sorting (meaning in an ascending order). Post used to be sorted in ascending order. Now without reversed, this becomes descending (which is the default behaviour).

{% for post in site.posts reversed %}

Deployment Error

This suddenly started happening...

Removed Gemfile.lock and it worked. I think it was a bundler update and bundler version in the lock file got outdated.

usr/lib/ruby/2.5.0/rubygems.rb:289:in `find_spec_for_exe': can't find gem bundler (>= 0.a) with executable bundle (Gem::GemNotFoundException)
    from /usr/lib/ruby/2.5.0/rubygems.rb:308:in `activate_bin_path'
    from /usr/local/bin/bundle:23:in `<main>'