Install

https://jekyllrb.com/docs/installation/ubuntu/

sudo apt-get install ruby-full build-essential zlib1g-dev
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
gem install jekyll bundler

Start

jekyll new jekyll-demo
cd jekyll-demo
bundle exec jekyll serve
# http://localhost:4000访问

step by step

https://jekyllrb.com/docs/step-by-step/01-setup/

# 这里我把上面的删除重新来
cd ../
rm -rf jekyll-demo
mkdir jekyll-demo
cd jekyll-demo

# 第一步就是建立一个hello 

gedit index.html
# 粘贴内容
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>Hello Qingchen!</h1>
  </body>
</html>
# 执行命令
jekyll build
jekyll serve
# jekyll serve --livereload
#http://127.0.0.1:4000/

Liquid

https://jekyllrb.com/docs/step-by-step/02-liquid/

# liquid我理解就类似大模型的special token，碰到就特殊处理
# 包含三种：对象、标签和过滤器
# 对象用{{xxx}}，表示这里引用xxx对象
# 标签用{%xxx%}，这个就是逻辑和流程控制，if 这种
# 过滤器用xxx | xxx ，类似langchian的LECL管道处理

---
---

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>{{ "Hello Qingchen!" | downcase }}</h1>
  </body>
</html>

Front Matter

# ---
# ---
# 在这里面可以设置变量啥的
---
title: Home
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    <h1>{{ "Hello World!" | downcase }}</h1>
  </body>
</html>

Layouts

# 布局：_layouts目录下放模版HTML文件
# 然后在front matter里面引用就行
#---
#layout: default
#title: Home
#---

mkdir _layouts
cd _layouts
gedit default.html
# copy
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

####
cd ../
gedit index.html
# copy
---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

####
gedit about.md
#copy
---
layout: default
title: About
---
# About page

This page tells you a little bit about me.

# http://localhost:4000/about.html

Includes

# 防止代码重复冗余的
# _includes/navigation.html 写个导航栏，然后放到layout里面
mkdir _includes/
gedit _includes/navigation.html
# copy 这里检测当前是不是自己页面是就变成红色，但是还是有点问题
<nav>
  <a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>
    Home
  </a>
  <a href="/about.html" {% if page.url == "/about.html" %}style="color: red;"{% endif %}>
    About
  </a>
</nav>

####
gedit _layouts/default.html
#copy
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

Data Files

# 来解决上面检测当前是不是自己页面是就变成红色
mkdir _data/
gedit _data/navigation.yml
#copy
- name: Home
  link: /
- name: About
  link: /about.html
  
####
gedit _includes/navigation.html 
#copy
<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

Assets

# asset放各种文件的
.
├── assets
│   ├── css
│   ├── images
│   └── js
...
# 然后_sass里面是各种样式，asset里面的css引用sass里面的
# 最后在layout模版里面加asset里面的css

mkdir -p assets/css/
mkdir _sass/

gedit _includes/navigation.html
# copy 
<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}"{% if page.url == item.link %} class="current"{% endif %}>{{ item.name }}</a>
  {% endfor %}
</nav>

####

gedit assets/css/styles.scss
# copy 
---
---
@import "main";

####

gedit _sass/main.scss
# copy
.current {
  color: green;
}

gedit _layouts/default.html
# copy
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

Blogging

# 博客 _posts 里面放博客.md
# 博客的文件名具有特殊格式：发布日期，然后是标题，然后是扩展名。
mkdir _posts/
gedit _posts/2024-12-30-qingchen.md
# copy
---
layout: post
author: qingchen
---

Qingchen

清尘

https://liqingchen.com

####

# 随便写点
gedit _posts/2024-12-30-apples.md
gedit _posts/2024-12-30-kiwifruit.md

gedit _layouts/post.html
# copy
---
layout: default
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>

{{ content }}

####
gedit blog.html
# copy
---
layout: default
title: Blog
---
<h1>Latest Posts</h1>

<ul>
  {% for post in site.posts %}
    <li>
      <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

####

gedit _data/navigation.yml
# copy
- name: Home
  link: /
- name: About
  link: /about.html
- name: Blog
  link: /blog.html

Collections

这里开始有点意思了

# 说白了可以做博客的分类

# 一开始感觉有点复杂，搞完再看一遍就好了

# 创建作者（一个分类），把几个作者写进去
mkdir _authors
gedit _authors/jill.md
# copy
---
short_name: jill
name: Jill Smith
position: Chief Editor
---
Jill is an avid fruit grower based in the south of France.

####

gedit _authors/ted.md
# copy
---
short_name: ted
name: Ted Doe
position: Writer
---
Ted has been eating fruit since he was baby.

####

# 在这里写个页面展示分类
gedit staff.html
# copy
---
layout: default
title: Staff
---
<h1>Staff</h1>

<ul>
  {% for author in site.authors %}
    <li>
      <h2><a href="{{ author.url }}">{{ author.name }}</a></h2>
      <h3>{{ author.position }}</h3>
      <p>{{ author.content | markdownify }}</p>
    </li>
  {% endfor %}
</ul>

####
# 加上导航
gedit _data/navigation.yml
# copy
- name: Home
  link: /
- name: About
  link: /about.html
- name: Blog
  link: /blog.html
- name: Staff
  link: /staff.html
  
####
# 这块就是特性配置layout，这样就不用在每个html的front matter加layout了
gedit _config.yml
# copy
collections:
  authors:
    output: true

defaults:
  - scope:
      path: ""
      type: "authors"
    values:
      layout: "author"
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
  - scope:
      path: ""
    values:
      layout: "default"
      
# _config.yml写完后可以把posts和项目根目录里面front matter的layout都删了
####

gedit _layout/author.html
# copy
---
layout: default
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>

{{ content }}

<h2>Posts</h2>
<ul>
  {% assign filtered_posts = site.posts | where: 'author', page.short_name %}
  {% for post in filtered_posts %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

####

gedit _layout/post.html
# copy
---
layout: default
---
<h1>{{ page.title }}</h1>

<p>
  {{ page.date | date_to_string }}
  {% assign author = site.authors | where: 'short_name', page.author | first %}
  {% if author %}
    - <a href="{{ author.url }}">{{ author.name }}</a>
  {% endif %}
</p>

{{ content }}

Deployment

bundle init
bundle add jekyll
# 然后项目根目录会生成Gemfile文件
# 我的内容是这样

####
# frozen_string_literal: true

source "https://rubygems.org"

# gem "rails"

gem "jekyll", "~> 4.3"
####

bundle exec jekyll serve

# 插件
# Gemfile下添加下面的
group :jekyll_plugins do
  gem "jekyll-sitemap"
  gem "jekyll-feed"
  gem "jekyll-seo-tag"
end

# _config.yml添加下面的
plugins:
  - jekyll-feed
  - jekyll-sitemap
  - jekyll-seo-tag
  
# _layouts/default.html改成这样
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
    {% feed_meta %}
    {% seo %}
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

# 安装插件
bundle update
bundle exec jekyll serve

Github Pages

将项目提交到github然后去settings找到pages，选择github actions，会弹出来jekyll，点击后会直接给你写好，直接commit，就开始自动部署了

如果你没有弹出来就在项目根目录下

创建文件.github/workflows/jekyll.yml

填入下面的内容

# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.

# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["master"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0
        with:
          ruby-version: '3.1' # Not needed with a .ruby-version file
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
          cache-version: 0 # Increment this number if you need to re-download cached gems
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5
      - name: Build with Jekyll
        # Outputs to the './_site' directory by default
        run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
        env:
          JEKYLL_ENV: production
      - name: Upload artifact
        # Automatically uploads an artifact from the './_site' directory by default
        uses: actions/upload-pages-artifact@v3

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

下面是仅供参考，时间点什么的可能跟不上，网站一直做改动

我这里面部署成功了但是跳转出现404了

原因：跳转的地址是：https://www.liqingchen.com/blog.html，但实际上应该是：https://www.liqingchen.com/jekyll-demo/blog.html

解决办法：

简单讲一下我怎么做的：

1..github/workflows/jekyll.yml分支branches: ["master"]，我改成了gh-pages，然后master分支提交，新建一个gh-pages的分支；

2.切换到gh-pages分支开始修改文件里面的相对路径，参考：https://jekyllrb.com/docs/github-pages/#deploying-jekyll-to-github-pages就是加| relative_url这个东西

3.然后找有link和url的地方去加

4.最后在_config.yml里面加上下面的（改成你自己对应的）

domain: qingchen177.github.io   
url: https://qingchen177.github.io
baseurl: /jekyll-demo

这里整体列一下改了那些文件和代码：

  • _includes/navigation.html：

    <nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link | relative_url }}"{% if   page.url  == item.link  %} class="current"{% endif %}>{{ item.name }}</a>
  {% endfor %}
</nav>

  • _layouts/author.html：

    ---
layout: default
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>
  
{{ content }}
  
<h2>Posts</h2>
<ul>
  {% assign filtered_posts = site.posts | where: 'author', page.short_name %}
  {% for post in filtered_posts %}
    <li><a href="{{ post.url | relative_url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

  • _layouts/default.html：

    <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="{{ 'assets/css/styles.css' | relative_url }}">
    {% feed_meta %}
    {% seo %}
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

  • _layouts/post.html：

    ---
layout: default
---
<h1>{{ page.title }}</h1>
  
<p>
  {{ page.date | date_to_string }}
  {% assign author = site.authors | where: 'short_name', page.author | first %}
  {% if author %}
    - <a href="{{ author.url | relative_url}}">{{ author.name }}</a>
  {% endif %}
</p>
  
{{ content }}

  • _config.yml：

    collections:
  authors:
    output: true
  
defaults:
  - scope:
      path: ""
      type: "authors"
    values:
      layout: "author"
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
  - scope:
      path: ""
    values:
      layout: "default"
  
plugins:
  - jekyll-feed
  - jekyll-sitemap
  - jekyll-seo-tag
  
domain: qingchen177.github.io       # if you want to force HTTPS, specify the domain without the http at the start, e.g. example.com
url: https://qingchen177.github.io  # the base hostname and protocol for your site, e.g. http://example.com    # place folder name if the site is served in a subfolder
baseurl: /jekyll-demo

  • blog.html：

    ---
title: Blog
---
<h1>Latest Posts</h1>
  
<ul>
  {% for post in site.posts %}
    <li>
      <h2><a href="{{ post.url | relative_url}}">{{ post.title }}</a></h2>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

  • staff.html：

    ---
title: Staff
---
<h1>Staff</h1>
    
<ul>
  {% for author in site.authors %}
    <li>
      <h2><a href="{{ author.url  | relative_url}}">{{ author.name }}</a></h2>
      <h3>{{ author.position }}</h3>
      <p>{{ author.content | markdownify }}</p>
    </li>
  {% endfor %}
</ul>

最后访问OK：https://www.liqingchen.com/jekyll-demo/

END

项目Demo地址：https://github.com/qingchen177/jekyll-demo