使用Chirpy Theme在GitHub Pages部署Jekyll

前言

Jekyll由于被GitHub Pages在底层支持,具备多种简单的部署方式并且免费,可以适配很多场景,所以使用的机构和个人越来越多.

Gem Based;Remote Theme;Theme Template,我们一般就是这三种方法在GitHub Pages部署Jekyll.

对于主题作者及主题使用者来说使用Theme Template也就是’主题模板’这种方式是最简单的:主题作者容易定位问题;使用者无需安装本地环境,5分钟就可以把博客搭建成功,只等内容建设.

下面就介绍使用Chirpy主题在GitHub Pages部署的过程.感谢Cotes Chung的工作.

---

新建仓库

打开Chirpy Start -> 键入仓库名称.

Important

仓库名使用: <用户名.github.io>.

配置GitHub仓库

选择GitHub Actions为构建和部署源.

GitHub.com -> Repository -> Settings -> Pages -> Build and deployment -> Source -> GitHub Actions

设置Chirpy Theme

基础设置

打开 _config.yml :

timezone: Asia/Shanghai
title: XXX
tagline: XXX
description: >-
  XXX
url: "https://用户名.github.io"
github:
  username: XXX 
social:
  name: XXX
  email: XXX@XXX.com
  links:
    - https://github.com/用户名

Important

url 不能以 / 结尾.

使用图片CDN功能

当使用图库时可以使用图片CDN功能,可以减少图片链接的固定输入工作.

打开 _config.yml :

img_cdn: https://XXX.com
avatar: '/XXX.jpg'

Important

图片链接使用时以 / 开头.

增加Giscus评论功能

方法一:使用与博客相同的仓库增加评论功能.

方法二:使用与博客不同的仓库增加评论功能.

作为非专业人士,选择方法二.

这样选择的好处是:

• 博客仓库的变更(包括更换主题及崩溃后重新部署),不影响评论数据的安全.

Tip

博客仓库名及文章名不能变更.

• 博客主题升级时可以采用主题模板方法重新部署,不需要本地编译环境.

Important

升级前需要仓库整体备份,升级后修改变更部分.

新建仓库后按以下进行操作:

1. 选择使用Discussions.

   GitHub.com -> Repository -> Settings -> General -> Features -> Discussions

2. 安装giscus app到仓库.

3. 访问giscus设置.

4. 填写<用户名/仓库名>并选择参数.

5. 按照提示在 _config.yml 填写:

   comments:
    active: 'giscus'
    giscus:
     repo: 用户名/仓库名
     repo_id: XXXXXXXX
     category: Announcements
     category_id: XXXXXXXX
     mapping: 'pathname'
     input_position: 'top'
     lang: zh-CN
     reactions_enabled: 1
   

Important

• 评论设置中的 lang 设置需要和本地化的 lang 一致.
• 所填内容与 # 需要有空格间隔.
• 不同设置需要不同符号,单引号或双引号或无符号.

本地化

1. 打开 _config.yml :

   lang: zh-CN
   

2. 在jekyll-theme-chirpy的 _data/locales/ 复制 zh-CN.yml 文件到仓库相同文件夹上传.

版权声明

打开 _data/locales/zh-CN.yml :

copyright:
  # Shown at the bottom of the post
  license:
    template: 本文由作者按照 :LICENSE_NAME 进行授权
    name: CC BY 4.0
    link: https://creativecommons.org/licenses/by/4.0/

  # Displayed in the footer
  brief: 保留部分权利。
  verbose: >-
    除非另有说明，本网站上的博客文章均由作者按照知识共享署名 4.0 国际 (CC BY 4.0) 许可协议进行授权。

按照需要修改.

删除社交图标

打开 _data/contact.yml ,在需要删除的社交图标前增加 # :

# - type: twitter
#   icon: "fa-brands fa-x-twitter"

删除分享图标

打开 _data/share.yml ,在需要删除的分享图标前增加 # :

platforms:
#  - type: Twitter
#    icon: "fa-brands fa-square-x-twitter"
#    link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"

#  - type: Facebook
#    icon: "fab fa-facebook-square"
#    link: "https://www.facebook.com/sharer/sharer.php?title=TITLE&u=URL"

#  - type: Telegram
#    icon: "fab fa-telegram"
#    link: "https://t.me/share/url?url=URL&text=TITLE"

使用子模块

1. 打开 _config.yml :

   assets:
     self_host:
       enabled: true
   

2. 打开 .github/workflows/pages-deploy.yml :

   steps:
     - name: Checkout
       uses: actions/checkout@v4
       with:
         submodules: true
   

上传至仓库

等待网站生成.

---