文章

Github pages + jekyll 搭建个人博客

发表于 更新于
作者 Xylia
6 分钟阅读
Github pages + jekyll 搭建个人博客
  • 使用 Jekyll Chirpy 主题

01/ Jekyll 环境

  1. 安装 Ruby
    • 安装完成后会跳出cmd，输入3（MSYS2 and MINGW development tool chain）
  2. 安装 Jekyll：gem install jekyll bundler
  3. 检查 Jekyll 版本：jekyll -v

02/ Github

  1. Chirpy 模板
  2. 使用模板创建仓库：【Use this template】——【Create a new repository】
    • 新存储库必须命名为 <username>.github.io， username 为小写 GitHub 用户名
  3. 新仓库右上角设置 —— pages设置 —— 将Source修改为 Github Action

03/ 开发环境

  • 可以使用 VS Code 克隆仓库
  • 可以使用 VS Code 开发容器
    • 需要 Docker 和 VS Code Dev Containers 扩展

  • 如果文件不全，可通过 bundle info --path jekyll-theme-chirpy 获取完整文件

  • 本地启动 Jekyll
    • 本地 Jekyll 环境构建后需要将 Gemfile 中的 source 换源为清华源
      • Gemfile文件，指定了想要使用的gem的位置和版本
    • 本地访问：http://127.0.0.1:4000
      1
2
3

      bundle install        # 构建本地环境
bundle exec jekyll b  # 编译
bundle exec jekyll s  # 启动
  • git提交
    1
2
3
4

    git add .             # 将本地文件存到暂存区  
git commit -m "说明"   # 将暂存区文件提交到本地仓库  
git remote add origin https://github/GitHub用户名.github.io  #将本地仓库关联到GitHub仓库  
git push -u origin main  #本地仓库上传到GitHub仓库（可能会要求输入用户名和密码）

04/ Configuration

  • Chirpy 部分文件架构如下：
1
2
3
4
5
6
7
8
9
10
11

Root
├─_data
│  └─locales (语言本地化)
├─_includes (为不同功能预先写好的html模块，可以在使用时直接include)
├─_javascript
├─_layouts (不同的layout预设以供页面选择)
├─_plugins
├─_posts (文章存储位置)
├─_sass (CSS文件)
├─_tabs (侧边栏标签页)
└─assets (网页素材)

基本配置

  • _config.yml文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

lang: zh-CN  # 语言
timezone: Asia/Shanghai  # 时区

title: Xylia    # 主标题
tagline: Xylia's Blog   # 主标题介绍

url: "https://xyllya.github.io/"  # 仓库地址

github:
  username: Xyllya  # 左下角Github跳转

social:
  name: Xylia   # 保留权利人姓名，在网页中间最下面
  email: always1710@163.com   # 左下角Email跳转
  links:
    #  https://twitter.com/username # change to your Twitter homepage
    - https://github.com/Xyllya # change to your GitHub homepage
    # Uncomment below to add more social links
    # - https://www.facebook.com/username
    # - https://www.linkedin.com/in/username

theme_mode: # [light | dark]  色调

cdn:
avatar: 'assets/img/000.jpg'  # 左侧栏头像图片
  • contact.yml 网站左下角的链接
  • share.yml 文章末尾的分享链接

Writing a New Post

  • 官方教程

  • 在 _posts 目录下创建 YYYY-MM-DD-TITLE.md 文件（固定格式）

  • 可以使用插件 Jekyll-Compose 节省创建文件的时间

  • Front Matter
1
2
3
4
5
6
7

--- 
title: TITLE 
date: YYYY-MM-DD HH:MM:SS +/-TTTT   # 时区 +0800
categories: [TOP_CATEGORIE, SUB_CATEGORIE]  # 支持多级分类，一个逗号一层
tags: [TAG] # TAG names should always be lowercase 
math: true
---
  • math、mermaid、pin 默认是false，需要可以添加

  • description: 文章中简要描述，会显示在首页每篇文章的标题下

  • 注意：
    • 文章不能出现连续的两个大括号，会报错，可以在两个大括号中间加空格
    • 文章插入图片，路径要用反斜杠/

个性化配置

  • 更换网站图标：官方教程
    • 网站图标位于 assets/img/favicons/ 目录中
      1. 通过 Real Favicon Generator 生成图像，替换目录中除 browserconfig.xml 和 site.webmanifest 之外的文件
      2. 通过 favicon.io 生成 png 图像，将 android-chrome 开头的两个和 32x32、16x16，一共四个加入到目录
  • 添加侧边栏标签页
    1. 在 _tabs 下新建标签页 MarkDown 文件，并为其添加 Front Matter
      • layout: 布局预设，源于 _layouts 中的文件名
      • icon: 显示的图标，参考 Font Awesome，填入图标的名称即可
      • order: 标签的顺序，从0开始
    2. 在 _data/locales 中为标签页添加各语言翻译
  • 评论区
    • valine 试过了，不行，需要个人域名
    • utterances，基于 GitHub Issue 的评论系统，需要先在 GitHub 连接 utterances 授予权限
      • Utterances GitHub App ——【Install】——【Only select repositories】并选择允许访问的仓库
      • Chirpy 主题已经配置了 utterances：_includes/comments/utterances.html
      • 仅需在 _config.yml 中配置 utterances 即可
        1
2
3
4
5

        comments:
  provider: utterances
  utterances:
  repo: Xyllya/xyllya.github.io  # <gh-username>/<repo>
  issue_term: pathname  # < url | pathname | title | ...>

References

软件 | 环境 | 配置
配置
本文由作者按照 CC BY 4.0 进行授权

热门标签

test 配置