Jekyll

Intro

Jekyll

Markdown, Liquid, HTML & CSS go in. Static sites come out ready for deployment.

Configure your site

Jekyll uses a file titled _config.yml to store settings for your site, your theme, and reusable content like your site title and GitHub handle. Learn more in the Jekyll configuration documentation.

Front Matter

https://jekyllrb.com/docs/front-matter/ Front matter is a yaml section at the top of your file that looks like this:

---
title: "Welcome to my blog"
date: 2025-05-15
---

Tutorials

Creating a GitHub Pages site with Jekyll

• install jekyll

sudo apt install jekyll

• Create new Jekyll site

jekyll new --skip-bundle .
 

• Add following line to Gemfile

gem "github-pages", "~> 232", group: :jekyll_plugins
 

• Run the following line

bundle install

• Add this line to .gitignore

Gemfile.lock
 

• Edit _config.yml

url: "https://username.github.io"    # no trailing slash
baseurl: "/repo-name"                # the name of your GitHub repo (with leading slash)
 

• Run site locally with --baseurl

bundle exec jekyll serve --baseurl ""

• That way your local server will behave like a site served at the root /, so you can visit:

http://127.0.0.1:4000/

• Publish site

https://chxtio.github.io/ocr_jekyll/

Adding content to your GitHub Pages site using Jekyll

https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/adding-content-to-your-github-pages-site-using-jekyll

Create a page

• Create user-manual.md file with the frontmatter YAML section on top

---
layout: page
title: "User Manual"
permalink: /user-manual/
---
 
# User Manual
 
Welcome to the user manual for this project...

Add a new post to the site 🔗

• Create files in _posts/ with YYYY-MM-DD-title.md

# example
2025-07-20-git_ssh_test.md

• Show posts in a page
  • Use Liquid loop ({% for post in site.posts %})

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{site.baseurl}}{{ post.url }}">{{ post.title }}</a> – {{ post.date | date: "%B %d, %Y" }}
    </li>
  {% endfor %}
</ul>

Adding a theme to your GitHub Pages site using Jekyll 🔗

• Edit _config.yml and add theme: THEME-NAME using the name of a supported theme

# Build settings
markdown: kramdown
remote_theme: pages-themes/cayman@v0.2.0
 
plugins:
  - jekyll-feed
  - jekyll-remote-theme # add this line to the plugins list if you already have one

Customizing your theme’s CSS

https://github.com/jekyll/minima/blob/v2.5.1/README.md#customization

• Create /assets/main.scss file

/assets/main.scss

---
---
 
@import "minima";