Creating Jekyll blog with Docker

The article covers the essential steps to set the Jekyll blog with Docker. Experience with the latter strongly recommended.

Step 1. Creating Project

Navigate to your projects directory and create base project:

docker run --rm -it \
  --volume="$PWD:/srv/jekyll" \
  jekyll/jekyll \
  jekyll new "name-of-your-blog" \
&& cd name-of-your-blog

Step 2. Basic configuration

Modify the _config.yml and Gemfile. I use astonishing, but sligthly altered, hitchens theme. To see the result of your hard work run:

docker run --rm \
  -p 127.0.0.1:4000:4000 \
  --volume="$PWD:/srv/jekyll" \
  --volume="$PWD/vendor/bundle:/usr/local/bundle" \
  -it jekyll/jekyll \
  jekyll serve

Go, and open your shiny new site

Step 3. Write something

Jekyll and Docker sounds like an interesting subject…

Step 4. Build & deploy

Run the Jekyll build command to create the static files of your website

docker run --rm \
  -p 127.0.0.1:4000:4000 \
  --volume="$PWD:/srv/jekyll" \
  --volume="$PWD/vendor/bundle:/usr/local/bundle" \
  -it jekyll/jekyll \
  jekyll build

All done. Go ahead and transfer the content of the _srv to the hosted directory. Or better still, use cloud static hosting - Github Pages are good starting point. Personally, I make the best of the build pipeline and Git Hooks.

Bonus. Custom CSS

Since, it has taken me more than 5 minutes of googling how to add custom CSS to my theme, here are few things you might want to have in mind

Create the CSS file

Each file starting with the frontmatter header will be copied over. SCSS and SASS will be transpiled to the path but with css extendion. Create ./assets/css/custom.scss with the following content:

---
---
body {
	background: red;
}

And Jekyll will create ./assets/css/custom.css file for you.

Append CSS file

You will need to add the path of the generated path into your layout (i.e. ./_layouts/default.html) file. If your theme does not expose any dev-friendly way of attaching the stylesheet link dynamically, you will need copy-paste the content of the original theme file.

<link rel="stylesheet"
  href="{{ '/assets/css/custom.css' | absolute_url }}?{{ site.time | date: '%s%N' }}">

Import SASS partials

After your entrypoint is in place, you can dynamically import partials from ./_sass directory. These files should not contain frontmatter header. The subject is pretty well covered in Jekyll docs