Jekyll Blog Setup

I started exploring new blogging systems, and I came across Jekyll.

The Jekyll blog system is a blogging platform written in Ruby on Rails. You just need to know how to run some commands in your terminal. A little knowledge of git and ssh would also be good

The reason I like the Jekyll blog system using the chirpy theme is because I can write content in markdown.

Jekyll blog setup cheatsheet

Setup blog locally

1. Clone project from jekyll chirpy theme
2. Run bundle command to install dependencies

Serve site to view it locally

The Jekyll blog site is for local editing only. You create your posts locally, edit them, then there is a build process which will generate all your HTML files. Then you deploy your HTML files to a web-server.

Project root

Run all the commands from your project root

rvm use 3.2.2 --default

Ruby Version management

Ensure you are using a compatible version of ruby. If you encounter any errors, you might be using the wrong version of ruby. we can fix that with rvm. Ruby Version Manager.

rvm use 3.2.2 --default

Start up the local environment

Ensure you run the jekyll build and serve commands from your project root.

cd /your-project-root

bundle exec jekyll s --livereload

Create new post (with jekyll compose)

bundle exec jekyll post "My New Post"

Jekyll build

So this is the build process where your markdown files are generated into HTML.

bundle exec jekyll b

set environment before build

JEKYLL_ENV=production bundle exec jekyll b

deployment

You can use rsync to deploy the site using a custom sshconfig file entry. By combining the Jekyll build function with the deploy function.

deploy you site directory

cd _site/

   rsync -av * example:/var/www/dynamitefrog.com

Create an ssh config file

Rsync works by connecting to your server through SSH. But once again, it’s easier to create sshconfig file to handle your SSH connections.

See ssh config file creation

Customize site settings

The primary settings on your site can be customised in the config.yml.

This is where you can edit your site name, Social Media profiles, colour scheme, etc. Now, after updating your config file you must restart your Jekyll website and to refresh the your local site and see the changes. You can stop your Jekyll serve command by hitting control c on your keyboard.

Deploy to github pages

If you’re not hosting on your own server, then you may wish to deploy to github pages. GitHub pages is free and is also written in Ruby on rails.

git add -A
git commit -m "commit message"
git push

Front Matter

Hide post from published

published: false

Allow liquid

When you try to serve your jekyll website you might encounter an error. Liquid Warning: Liquid syntax error This is because you’ve probably got a liquid or twig code snippet within your post.

All you need to fix this is to add that magic peice of front matter to allow you to render liquid and twig code on your posts:

render_with_liquid: false

Use a custom canonical

By default the canonical will be self referencing. You can override it with the follow front matter.

canonical_url: 'https://github.com/jekyll/jekyll-seo-tag/'

Use Mermaid

mermaid: true

Inspect liquid variables

{{ post | inspect }}

compile scss to css

Just running the serve command will watch and compile css to scss

bundle exec jekyll s

Troubleshooting

Canonical is set to localhost

Build your site using the production environment variable should fix it

JEKYLL_ENV=production bundle exec jekyll b

Serve process wont start because its already running.

Find the process id to kill and kill it. kill running process

Once you have killed that old process you can run the s serve process again.

Missing home.min.js

npm install
npm run build

If you get an error saying jekyll post, not found you **may** need to install this missing gem. I found to fix this you need to re-install jekyll compose and add it to my gem file.

add code to your Gem File

gem 'jekyll-compose', group: [:jekyll_plugins]

More Resources

1. https://youtu.be/F8iOU1ci19Q
2. https://github.com/cotes2020/jekyll-theme-chirpy
3. https://jekyllrb.com/docs/step-by-step/01-setup/