Enchanted Code

An intro to Jekyll

2 minutes read

Intro

This tutorial will show you how a setup a basic Jekyll site. This program is actually how this blog site is made. Before starting I just want to say that; this tutorial has been made for linux systems. So some commands may need to be changed. I have also really only been made this post for my reference, as most of the info found here is available at the Jekyll docs site available here.

Install

Install the dependencies

1
sudo apt install ruby-full build-essential zlib1g-dev

You may also need to install GCC and Make

Make RubyGems install without root (Optional)

1
2
3
4
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Install Jekyll

1
gem install jekyll bundler

Create project

1
jekyll new <blog name>

This will create a folder in your current directory with the name given. This folder will contain the files required for Jekyll.

Add content

You will see in the project folder there are multiple folders and files.

Here what some of them are for:

Name Description
_posts/ Where the post markdown files will go
_site/ Where the generated HTML site will go
_config.yml How Jekyll is configured

Configure

There are several configs that will need configuring, Jekyll should already have documentation generated in the file.

You may want to add author: <your name> as it will allow all posts to have your name against them; also making each item in the RSS feed to have a author.

Create a post

Lets make a post, navigate to _posts/ and you will see that there is a default one created already.

At the top of the post files there will be a header (separated with hyphens) this will contain Jekyll configs for the current file for example you can set the title that will show up on the page.

Below the header you can put any markdown syntax and Jekyll will convert it to HTML.

Filename extensions can be .markdown or .md (I prefer .md as it’s shorter)

Post filenames must follow the format YYYY-MM-DD-title

Run project

1
bundle exec jekyll serve --livereload

This will create the Jekyll site and run it. You should be allowed to access it at http://127.0.0.1:4000. The --livereload will allow for it to automatically reload when a file changes.

Changing the _config.yml file will require a manual reload.

See Also

Buy Me A Coffee