New Jekyll based website

Jekyll

The main purpose was to learn something new, usually I start easy and then try to add what I’ve already learned. First I Google-ed for some static web page generator, I wanted to avoid any complex web publishing systems with external components, plugins and databases. So Jekyll seemed to be a good choice.

I started to play with Jekyll on my macOS, but I don’t like messing my os, so I was looking for running it in Docker. The documentation for Jekyll, as for many other projects today, is not easy for somebody who is not developer and don’t understand all the basics.

First I was looking for a good theme for my web page, you know the cover is everything.

klisé

I found klisé, which was simple and nice. Only I was missing the guide how to easily start with this theme in my brand new site. Eventually I used this procedure:

$ git clone https://github.com/piharpi/jekyll-klise.git
$ mv jekyll-klise site
$ # removed all the git related stuff 🤷🏻‍♂️

Then I started with looking around in the theme trying to understand how it works. I found the most important parts are:

1. _config.yml - basic configuration of the site
2. _data/menus.yml - here you can modify the top menu
3. _includes/footer.html - what is in the page footer

I assume that the rest is pretty obvious.

As I mentioned, I use Docker for testing and also for final deployment. Here is my example:

docker-compose.yaml:

version: '3.7'
services:
    jekyll-build:
      image: jekyll/jekyll
      command: ["jekyll", "build"]
      restart: "no"
      volumes:
        - ./site:/srv/jekyll
        - ./site/vendor/bundle:/usr/local/bundle
    jekyll-serve:
      image: jekyll/jekyll
      command: ["jekyll", "serve"]
      restart: "no"
      volumes:
        - ./site:/srv/jekyll
        - ./site/vendor/bundle:/usr/local/bundle
      ports:
        - 4000:4000

    web-lubos:
      build: 
        context: .
        dockerfile: ./Dockerfile-nginx
      image: lubos.klokner.sk/geck2-lubos
#     container_name: lubos.klokner.sk
#      ports:
#        - ${PORT:-80}:80
      restart: always
      labels:
        traefik.enable: true
        traefik.frontend.rule: Host:lubos.klokner.sk
        traefik.docker.network: traefik
        traefik.backend.loadbalancer.stickiness: true
        traefik.frontend.headers.STSSeconds: 315360000
      networks:
          - traefik
      volumes:
          - ./site/_site/:/usr/share/nginx/html
      depends_on:
        - jekyll-build
networks:
    traefik:
        external:
            name: traefik

Dockerfile-nginx is very simple, it only uses my default NGINX config file. I use traefik as the entry gateway for all my webs.

FROM nginx

COPY nginx-default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

Using it

It doesn’t seem to be perfect, but at least this is how I use it:

Local Testing

• $ docker-compose up jekyll-serve which will assemble the website and serve it on port 4000/tcp. Also any changes in the site code is imediately propagated and published. You may want to comment out the networks part in order to make it work… I need to test it more…

Production Deployment

• $ docker-compose up -d web-lubos this one first starts jekyll-build, that builds the web and then it starts the NGINX
• later, if NGINX is already running, I can modify the page content and run only $ docker-compose up jekyll-build which exports the final site to _site subfolder.

Update July 30th, 2020

• there are some issues with permissions after cloning site repo from Github, so I need to do $ chmod 666 site which I don’t like very much, but the final _site subfolder is not affected and this is closed system, so I don’t see it as a big issue
• eventually I edit this page on my local MBP, upload to Github and use this command directly in vs code in order to publish the content: $ ssh root@DOCKER-SERVER "cd FOLDER && git pull && docker-compose up jekyll-build"

Update August 3rd, 2020

Today I found, that if 3rd party app generates a preview of this site, in the preview there is very strange info… actually it was like about me info, but from the original author if this theme. Honestly, it took me about 1h to find the issue… what I did:

• using this Meta Tags page I was checking the preview then I was grep-ing the shown data in my source code
• I was using also Dev Tools in different berowser to identify it
• I was using wget -m to get the whole content and then grep-ing inside that source code..

Nothing helped. Then somehow I found this file /site/assets/img/ogp.png, which contained exactly the information which I got when using 3rd party to generate the site preview. That was also reason why I couldn’t grep it, because it was a picture. Replacing this one, with the screenshot solved the issue:

Lesson learned, I should have taken look into web server access logs, there I would see something like this:

172.18.0.3 - - [03/Aug/2020:12:52:40 +0000] "GET /assets/img/ogp.png HTTP/1.1" 200 109912 "https://metatags.io/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15" "62.197.222.99"

and by comparing the requests from the browser and this 3rd party service I would see the difference.