jojozhuang / jojozhuang.github.io

Website for sharing the knowledge of computer science, built with Jekyll, Liquid and MarkDown.

jojozhuang.github.io

Website for sharing the knowledge of computer science, hosted on Github, built with Jekyll, Liquid and MarkDown.

Demo

Two available demos:

• Live Demo on GitHub: https://jojozhuang.github.io/
• Live Demo on Netlify: https://jojozhuang.netlify.com/

Setup Locally

git clone https://github.com/jojozhuang/jojozhuang.github.io.git
cd jojozhuang.github.io
bundle exec jekyll serve --port 12001

Access http://localhost:12001/ in web browser, enjoy!

Run for production

JEKYLL_ENV=production bundle exec jekyll serve --port 12001

Run for nas

JEKYLL_ENV=nas bundle exec jekyll serve --port 12001

Docker

Create image with Dockerfile.

docker build -t jojozhuang/jojozhuang.github.io .

1. Using Jekyll Image

Create image, build in image.

FROM jekyll/minimal:4.2.0

WORKDIR /usr/src/app

COPY . .

RUN chmod 777 /usr/src/app -R

RUN jekyll build

Create container. jekyll serve --skip-initial-build will skip build when container is launched.

docker run --name jojozhuang.github.io -p 12080:4000 -d jojozhuang/jojozhuang.github.io jekyll serve --skip-initial-build 

Access http://localhost:12080/ in browser.

Check the image size. It is 1.33GB.

Johnny-MacBook-Pro:jojozhuang.github.io johnny$ docker images
REPOSITORY                              TAG                 IMAGE ID            CREATED             SIZE
jojozhuang/jojozhuang.github.io         latest              be0228955d5c        2 minutes ago       1.33GB

1.2 Staging build

Reduce the image size by just copying the output static files. Two steps:

• Build
• Copy the output _site to image

# https://github.com/envygeeks/jekyll-docker/blob/master/README.md
#
# Builder stage.
# This state compile our jekyll site to get static files
#
FROM jekyll/minimal:4.2.0 AS builder

WORKDIR /srv/jekyll

COPY . /srv/jekyll

RUN jekyll build

#
# Production stage.
# This state compile get back the static files from builder stage
#
FROM jekyll/minimal:4.2.0

COPY --from=builder /srv/jekyll/_site /srv/jekyll/_site

Create container. jekyll serve --skip-initial-build will skip build when container is launched.

docker run --name jojozhuang.github.io -p 12080:4000 -d jojozhuang/jojozhuang.github.io jekyll serve --skip-initial-build 

Access http://localhost:12080/ in browser.

Check the new image, size is reduced to 807MB.

Johnny-MacBook-Pro:jojozhuang.github.io johnny$ docker images
REPOSITORY                              TAG                 IMAGE ID            CREATED             SIZE
jojozhuang/jojozhuang.github.io         latest              2493fd57f4da        2 minutes ago       807MB

1.3 Deploy to Nginx

Build with Jekyll, deploy with nginx.

# https://github.com/envygeeks/jekyll-docker/blob/master/README.md
#
# Builder stage.
# This state compile our jekyll site to get static files
#
FROM jekyll/minimal:4.2.0 AS builder

WORKDIR /srv/jekyll

COPY . /srv/jekyll

RUN jekyll build

#
# Production stage.
# This state compile get back the static files from builder stage
#
FROM nginx:1.19.8-alpine

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

## We just need the build to execute the command
COPY --from=builder /srv/jekyll/_site /usr/share/nginx/html/

Create container. jekyll serve --skip-initial-build will skip build when container is launched.

docker run --name jojozhuang.github.io -p 12080:80 -d jojozhuang/jojozhuang.github.io
docker run --name jojozhuang.github.io -p 12080:80 -v=/Users/johnny/Docker/nginx:/etc/nginx/conf.d/ -d jojozhuang/jojozhuang.github.io

Access http://localhost:12080/ in browser.

Check the new image, size is reduced to 620MB.

Johnny-MacBook-Pro:nginx johnny$ docker images
REPOSITORY                              TAG                 IMAGE ID            CREATED             SIZE
jojozhuang/jojozhuang.github.io         latest              98cc74b754d8        4 seconds ago       620MB

1.4 Serve in Container

Create container with compiling and serving.

docker run --rm \
  --volume="/Users/johnny/Johnny/github/jojozhuang.github.io:/srv/jekyll" \
  -p 12001:12001 \
  jekyll/jekyll:3.8 \
  jekyll serve --port 12001

Access http://localhost:12001/.

1.5 Build without Serve

docker run --rm \
  --volume="/Users/johnny/Johnny/github/jojozhuang.github.io:/srv/jekyll" \
  -it jekyll/jekyll:3.8 \
  jekyll build

Site will be compiled and generated to _site folder.

Deployment

Follow tutorial Deploying Jekyll Website to Netlify to continuously deploy this personal website to Netlify.

Tutorial

Read tutorial Setting up Jekyll on Ubuntu and macOS and follow-on tutorials to learn how to build personal website and deploy to GitHub Pages.