Initial commit

Intro

In this first post, I share the steps I followed, by making this personal website. There are no particular requirements to be able to follow along. I would recommend you to explore jekyll, and Chirpy tho. Both provides a quick start guide from zero to hosting your static site on github.

Steps

For development, this method should work on any platforms. I use docker for the local development. You then need to have docker and docker-compose installed.

You can look at the docker hub the image jekyll/jekyll by just pulling the latest image (4.0). Last time I checked, there is no image for arm64. I had to build the image from a Dockerfile. Looking into its repository and did some massage on their Dockerfile.

Downloading the repo

wget https://github.com/envygeeks/jekyll-docker/trunk/repos/jekyll

Customize Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

FROM ruby:2.7.1-alpine3.11
COPY copy/all /

#
# EnvVars
# Ruby
#

ENV BUNDLE_HOME=/usr/local/bundle
ENV BUNDLE_APP_CONFIG=/usr/local/bundle
ENV BUNDLE_DISABLE_PLATFORM_WARNINGS=true
ENV BUNDLE_BIN=/usr/local/bundle/bin
ENV GEM_BIN=/usr/gem/bin
ENV GEM_HOME=/usr/gem
ENV RUBYOPT=-W0

#
# EnvVars
# Image
#

ENV JEKYLL_VAR_DIR=/var/jekyll
ENV JEKYLL_DOCKER_TAG=4.0
ENV JEKYLL_VERSION=4.0
ENV JEKYLL_DOCKER_COMMIT='git rev-parse --verify HEAD'
ENV JEKYLL_DOCKER_NAME=myjekyll
ENV JEKYLL_DATA_DIR=/srv/jekyll
ENV JEKYLL_BIN=/usr/jekyll/bin
ENV JEKYLL_ENV=development

#
# EnvVars
# System
#

ENV LANG=en_US.UTF-8
ENV LANGUAGE=en_US:en
ENV TZ=America/Chicago
ENV PATH="$JEKYLL_BIN:$PATH"
ENV LC_ALL=en_US.UTF-8
ENV LANG=en_US.UTF-8
ENV LANGUAGE=en_US


env VERBOSE=false
env FORCE_POLLING=false
env DRAFTS=false

#
# Packages
# User
#


#
# Packages
# Dev
#

RUN apk --no-cache add \
  zlib-dev \
  libffi-dev \
  build-base \
  libxml2-dev \
  imagemagick-dev \
  readline-dev \
  libxslt-dev \
  libffi-dev \
  yaml-dev \
  zlib-dev \
  vips-dev \
  sqlite-dev \
  cmake

#
# Packages
# Main
#

RUN apk --no-cache add \
  linux-headers \
  openjdk8-jre \
  less \
  zlib \
  libxml2 \
  readline \
  libxslt \
  libffi \
  git \
  nodejs \
  tzdata \
  shadow \
  bash \
  su-exec \
  nodejs-npm \
  libressl \
  yarn

#
# Gems
# Update
#

RUN echo "gem: --no-ri --no-rdoc" > ~/.gemrc
RUN unset GEM_HOME && unset GEM_BIN && \
  yes | gem update --system

#
# Gems
# Main
#

RUN unset GEM_HOME && unset GEM_BIN && yes | gem install --force bundler
RUN gem install jekyll -v4.2.0 -- --use-system-libraries

#
# Gems
# User
#


RUN addgroup -Sg 1000 jekyll
RUN adduser  -Su 1000 -G \
  jekyll jekyll

#
# Remove development packages on minimal.
# And on pages.  Gems are unsupported.
#


RUN mkdir -p $JEKYLL_VAR_DIR
RUN mkdir -p $JEKYLL_DATA_DIR
RUN chown -R jekyll:jekyll $JEKYLL_DATA_DIR
RUN chown -R jekyll:jekyll $JEKYLL_VAR_DIR
RUN chown -R jekyll:jekyll $BUNDLE_HOME
RUN rm -rf /home/jekyll/.gem
RUN rm -rf $BUNDLE_HOME/cache
RUN rm -rf $GEM_HOME/cache
RUN rm -rf /root/.gem

# Work around rubygems/rubygems#3572
RUN mkdir -p /usr/gem/cache/bundle
RUN chown -R jekyll:jekyll \
  /usr/gem

CMD ["jekyll", "--help"]
ENTRYPOINT ["/usr/jekyll/bin/entrypoint"]
WORKDIR /srv/jekyll
VOLUME  /srv/jekyll
EXPOSE 35729
EXPOSE 4000

Building the image

docker build -t myjekyll .

Create an application

There are two ways, new project form scratch or fork the repository (this has been detailed in here).

1) brand new from scratch, this would be the case if you don’t want to use this theme.

cd /pathofdev

mkdir root

docker run --rm --volume="$PWD/root:/srv/jekyll" -it myjekyll jekyll new .

2) clone the chripy repository and change the name of the directory to root (optional).

Follow the guide, by running tools/init.sh additionally remove .git folder and start to hack.

Running the development server

When you are satisfy with the customization or just wanna see if it was working. Create a new file docker-compose.yml at the same level as root (inside the pathofdev) with this content

1
2
3
4
5
6
7
8
9
10
11
12
13
14

version: '3.8'

services: 
  web_dev:
    image: myjekyll
    container_name: web_dev
    volumes: 
      - $PWD/root:/srv/jekyll
      - $PWD/root/vendor/bundle:/usr/local/bundle
    ports: 
      - 4000:4000
    command: jekyll serve --watch --incremental

Your path tree should look like this

1
2
3

.
├── docker-compose.yml
└── root/

to run, just docker-compose up and navigate to localhost

Deploy and tips

Deployment on Github

The idea here is to follow the guide from Chirpy, we proceed the same procedure as the fork method. It uses Github Flow, for an automatic build to a new (existing) branch gh-pages. One mistake I did was to not read the file .github/workflow/pages-deploy.yml, in fact the automatic build is executed from a new push master while my branch name was main, if you did the same just change the 5th line

1
2
3
4
5

name: 'Automatic build'
on:
  push:
    branches:
      - master

to

1
2
3
4
5

name: 'Automatic build'
on:
  push:
    branches:
      - main

Now git add, commit, push and wait for the change in your settings by pointing the page to the new branch. If you need to add a change always push it on main branch

Deployment not on Github

The project is for build.

Tips

1. Some modifications (_config.yml, date format, etc …) might not appear on your jekyll serve, you might need to rebuild the project, to do so open a new terminal in pathtodev/ and run docker-compose exec web_dev jekyll build

2. Let me know in the comments section if you encounter any problem.