Jekyll converts markdown files to html; helps to generate blogs in a minimalistic style. This blog provides a quick start for installation, configuration, and simple usage.
Installation
Before you can use Jekyll to create a GitHub Pages site, you must install Jekyll and Git. Follow the instruction in the websites below:
Starting with macOS Catalina (10.15), Apple set the default shell to the Z shell (zsh). In previous macOS versions, the default was Bash.
In zsh, the configuration file is ~/.zshrc.
In bash, it’s ~/.bash_profile.
Every time you make changes with the configuration file
run source ~/.bash_profile if you have bash. [✘]
run source ~/.zshrc if the shell is zsh. [✔]
After having installed ruby, run ruby -v to check ruby version.
A Gemfile is a list of gems used by your site. Every Jekyll site has a Gemfile in the main folder.
Create a Gemfile in the root. The file should be called ‘Gemfile’ and should not have any extension. You can create a Gemfile with Bundler and then add the jekyll gem:
bundle init
bundle add jekyll
Manage plugins
add plugins to your Gemfile
source'https://rubygems.org'
gem 'jekyll'
group :jekyll_plugins do
gem 'jekyll-sitemap'
gem 'jekyll-feed'
gem 'jekyll-seo-tag'
end
gem"devise","~> 3.1"# same as >= 3.1.0 and < 4.0.0
Q: What is a Gemfile.lock?
A: Gemfile.lock file contains all the information about the gems that are currently installed. This file is created automatically after we run the bundle install command. A Gemfile.lock has a list of the exact versions of the gems required for the application.
Bundler is a gem that installs all gems in your Gemfile. Gem manager. Commands start with bundle <>.
Install Bundler using gem install bundler. You only need to install it once, not every time you create a new Jekyll project.
To install gems in your Gemfile using Bundler and serve the website, run the following in the directory that has the Gemfile:
bundle install# install gem dependencies for the project
bundle exec jekyll serve # serve the website, run the site locally
Now you can navigate to http://localhost:4000 to preview your site.
Jekyll rebuilds automatically after each change.
All of the normal Jekyll commands are available to you, but you should prefix them with bundle exec so that Bundler runs the version of Jekyll that is installed in your project folder.
bundle add webrick Add gem to the Gemfile and run bundle install.
help page bundle add --help
Jekyll file structure
Workflow of software develoment:
coding $\rightarrow$ build $\rightarrow$ deploy $\rightarrow$ test $\rightarrow$ release
Deploying
Deploying is taking website content and publishing it to the Internet. Technically speaking, it is the process of compiling, or building, your code and hosting the JavaScript, CSS, and HTML on a web server. After deployment, you will always have your live website, which is called the live environment or production environment.
Development
If you want the ability to make changes without these affecting your live website, then you can add additional environments. These environments are called development environments or deployment environments.
Layout inheritance is useful when you want to add something to an existing layout for a portion of documents on your site. The following templates are all based on base.html. You specify your original layout in front matter:
assets
put your custorm css or javascript files here.
I put my custom css in /assets/css/style.scss for general setting and /assets/css/syntax.css for rouge syntax highlighting.
_sass
These are sass partials that can be imported into your main.scss which will then be processed into a single stylesheetmain.css that defines the styles to be used by your site.
Jekyll provides built-in support for Sass and can work with CoffeeScript via a Ruby gem. In order to use them, you must first create a file with the proper extension name (one of .sass, .scss, or .coffee) and start the file with two lines of triple dashes, not need to write front matter, like this:
------//startcontent.my-definitionfont-size:1.2em
Jekyll treats these files the same as a regular page, in that the output file will be placed in the same directory that it came from. For instance, if you have a file named css/styles.scss in your site’s source folder, Jekyll will process it and put it in your site’s destination folder under css/styles.css.
Pages are the most basic building block for content.
The simplest way of adding a page is to add an HTML file in the root directory with a suitable filename. You can also write a page in Markdown using a .md extension and front matter which converts to HTML on build. For a site with a homepage, an about page, and a contact page, here’s what the root directory and associated URLs might look like:
index.html contents in this file will show on the home page.
Categories or Tags
The hallmark difference between categories and tags is that categories of a post may be incorporated into the generated URLfor the post, while tags cannot be.
add category variable in the front matter of each post.
category: study
categories: [life, drive]
tag: study
tags: [life, drive]
creating a category page.
Using the category frontmatter variable, we can make a categories page called categories.md in the _pages directory where you can categorize and list each post by its category like so.
pros: simpler to get a site set up; don’t need to manage branches;
cons: restricted whitelisted plugins and themes can be used.
GitHub now provides you with the option to use their in-house CI/CD product named GitHub Actions to build and deploy (host) your Jekyll site with complete control over the build environment and gemset.
Advantages of using GitHub Actions:
can specify any Jekyll version instead of using the classic GitHub Pages-provided version at 3.9.3;
.github/workflows/jekyll.yml:
steps:
-name: SetupRubyuses: ruby/setup-ruby@ec02537da5712d66d4d50a0f33b7eb52773b5ed1with:
ruby-version: '3.1'# Not needed with a .ruby-version file-run: bundleinstall# Install dependencies with Bundler-run: bundleexecrake
The setup-ruby action takes a Ruby version as an input and configures that version on the runner.
Alternatively, you can check a .ruby-version file into the root of your repository and setup-ruby will use the version defined in that file.
The setup-ruby action will automatically install bundler for you.
The version is determined by your gemfile.lock file.
If no version is present in your lockfile, then the latest compatible version will be installed.
can use any Jekyll plugins irrespective of them being whitelisted by GitHub, including any *.rb files placed in the _plugins directory of your site;
while using a custom theme is possible without Actions, it is now possible to use themes depending on features introduced in newer versions of Jekyll.
Build locally and push the build directory contents to the gh-pages branch on your repository.
Publishing from a branch.
pros: flexible, full control of your website contents
cons: have to mange branches; one master branch containing build html files and one source branch to manage all source files.
If we want to use a custom plugin or a newer version of Jekyll, for example, the Jekyll scholar plugin page to manage .bib files used in this research page,
group:jekyll_pluginsdogem'jekyll-scholar'
We need to build the _site locally in a branch other than master or gh-pages, and then sync and merge ONLY the built html files to either of these two branches.
We need to have a master branch, and a source branch (any name would do draft, working, etc).
master is where GitHub pages are deployed; It only include the _site directory.
source is where we work on writing the posts, css, js, etc. source has the entire jekyll project.
Note: It is recommended to change your default branch to source. Optionally, you can make the source branch protected to prevent it from being accidently deleted or overriden.
Make changes and build locally in source branch. This will create _site folder. _site folder (where the site is built into) should be in the .gitignore.
Navigate to master branch,
copy files in _site folder to the root folder.
create .nojekyll in the master branch. .nojekyll tells the gh-pages that there is no need to build.
Meanwhile, in the _config.yml of the source branch, under the include key, we need to add - .nojekyll.
By experience, my build times when using the first option are usually faster.
Until now, rouge should have been working on your site, but you won’t see the syntax highlighting as there is no css styling. The highlighting effect will appear once you add a css file following Step 3.
Create a css file for the highlighting style you want.
Rouge comes built-in with rougify, a command-line tool that converts a style theme to a css file.
You can check what languages are supported by entering:
rougify list
You can see the available rouge themes by entering:
Note that {{site.baseurl}} is added before assets/css/syntax.css as we need to specify the relative path to the stylesheet. Otherwise, the file cannot be found by Jekyll.
Using highlight.js
Add highlight.js and css of the color scheme you want in the header page. Either you can add cdn url or copy it in your project and give local path. This will find and all highlight the code inside of <pre><code> tags.
Issue: Faild in Ubuntu-24.04-x64 runner when trying to deploy to GitHub Pages.
Error: The current runner (ubuntu-24.04-x64) was detected as self-hosted because the platform does not match a GitHub-hosted runner image (or that image is deprecated and no longer supported).
In such a case, you should install Ruby in the $RUNNER_TOOL_CACHE yourself, for example using https://github.com/rbenv/ruby-build
You can take inspiration from this workflow for more details: https://github.com/ruby/ruby-builder/blob/master/.github/workflows/build.yml
$ ruby-build 3.1.4 /opt/hostedtoolcache/Ruby/3.1.4/x64
Once that completes successfully, mark it as complete with:
$ touch /opt/hostedtoolcache/Ruby/3.1.4/x64.complete
It is your responsibility to ensure installing Ruby like that is not done in parallel.
Fix: Your workflow is using an older version. Need to update workflow.
I compared my .github/workflows/jekyll.yml with this script, making sure my actions versions are consistent.
I also commented out line 40 (# ruby-version: '3.1' # Not needed with a .ruby-version file).
Bundler default gem URI dependency error
bundler: failed to load command: jekyll (/home/runner/work/Econ-Study/Econ-Study/vendor/bundle/ruby/2.7.0/bin/jekyll)
/opt/hostedtoolcache/Ruby/2.7.2/x64/lib/ruby/gems/2.7.0/gems/bundler-2.4.22/lib/bundler/runtime.rb:304:in `check_for_activated_spec!':
You have already activated uri 0.10.0, but your Gemfile requires uri 0.12.0. Since uri is a default gem, you can either remove your dependency on it or try updating to a newer version of bundler that supports uri as a default gem. (Gem::LoadError)
Cause: The issue lies with Rubygems being outdated. If you update RubyGems, it will fix the issue.
Fix: Add the following line to jekyll.yml (in my case, I added to line 47 after Setup Pages). It installs the required version of the uri gem.
If you want the script available on every page, put the call in your base.html or post.htmllayout file, whichever your post template is. Every page that uses that default.html layout will then call the script. That layout file can be found at _layouts/base.html.
If you just want it on your current page, just call it in your some-page.md markdown in the same way.
If you only want to call it when it is live and DON’T want to call it while you are developing - like, for example, a google analytics script - then wrap the call in an if statement like this:
First you must set the update field in the front-matter. If you decide not to set the field, then the update date falls back to the date field in the front-matter.