Jekyll Blog Setup

I tried WordPress blogging but I didn’t find the process enjoyable enough to stick with it. So I started exploring new blogging systems, and I came across Jekyll.

If you like the dynamiteFrog site and you want to build it for yourself, then this article could be a nice starting point for you.

The Jekyll blog system is a blogging platform written in Ruby on Rails. But don’t let that scare you, you don’t need to know how to code 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. Now, if you’ll like me and you like to live in your code editor (vim) then writing your content in markdown is an absolute pleasure.

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.

bundle exec jekyll s

Custom bash function to serve site locally with live reload

jekserve() {
rvm use 3.2.2
cd /to-project-dir/
bundle exec jekyll s --livereload
}

So this function would go in your .bashrc, or if you’re using Zsh, then it would go in your .zshrf file. This function will also use RVM (Ruby version manager) to switch to the required ruby version.

So now in your terminal, you can just run the jekserve command, and it will launch your local website in a browser, and you can view it there, and make sure everything looks the way you would expect.

You don’t need to do this step if you don’t want, you can just run each command one at a time

Create new post (with jekyll compose)

bundle exec jekyll post "My New Post"

Custom bash function to create new post

As you know, I’m a fan of creating Bash functions so that I don’t have to remember every little command. So here’s a Bash function for creating a new post. You might notice my custom function uses a command to swap Ruby version, using our RVM Ruby version manager so that my function works.

We are Using (rvm)Ruby Version Manager to ensure version of ruby is compatible

create_new_post() {
   POSTNAME=$1
   rvm use 3.2.2
   cd /dynamitefrog/
   bundle exec jekyll post $POSTNAME
}

Jekyll build

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

I’m also using rsync to deploy the site using a custom sshconfig file entry. By combining the Jekyll build function with the deploy function. Every time I build my site, it gets deployed.

jb() {
   echo 'build started'
   rvm use 3.2.2
   JEKYLL_ENV=production bundle exec jekyll b
   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 Mermaid

mermaid: true

Troubleshooting

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.

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/