当前位置: 首页 > news >正文

Jekyll + Chirpy + GitHub Pages 搭建博客

Chirpy 是适用于技术写作的简约、响应迅速且功能丰富的 Jekyll 主题,文档地址:https://chirpy.cotes.page/ ,Github 地址:jekyll-theme-chirpy

1.开始

  • 打开 chirpy-starter 仓库,点击按钮 Use this template --> Create a new repository

  • 将新仓库命名为 <username>.github.io,其中 <username> 是你的 GitHub 用户名,如果包含大写字母需要转换为小写。

2.安装依赖

使用 git clone 将新创建的仓库克隆到本地,并在项目根目录下执行 bundle 命令安装依赖。如果速度过慢可以使用以下命令,移除默认源并添加新的镜像源。

bundle config mirror.https://rubygems.org https://gems.ruby-china.com

3. 配置

根据需要更新 _config.yml 中的变量,例如 urlavatartimezonelang 等。

4.本地启动

如果要在本地预览网站内容,执行以下命令:

bundle exec jekyll serve

在浏览器访问 http://127.0.0.1:4000/。

5.部署

GitHub Pages 是一个通过 GitHub 托管和发布网页的服务,官方文档:https://docs.github.com/en/pages。在部署之前,需要将 _config.yml 文件中的 url 配置为https://<username>.github.io

之后在 GitHub 上打开仓库设置,点击左侧导航栏 Pages,在 Build and deployment - Source 下拉列表选择 GitHub Actions
在这里插入图片描述

提交本地修改并推送至远程仓库,将会触发 Actions 工作流。在仓库的 Actions 标签页将会看到 Build and Deploy 工作流正在运行。构建成功后,即可通过配置的 URL 访问自己的博客网站。

6.评论系统

Jekyll 生成的博客网站是静态的,没有后端和数据库,因此本身无法实现评论功能。然而,可以使用 disqus、utterances 和 giscus 等评论系统来实现评论功能。

本文使用 giscus,它是利用 GitHub Discussions 实现的评论系统,并且是开源、免费的。开启评论系统的步骤如下。

(1) 安装 giscus app,访问 https://github.com/apps/giscus 点击右侧的 install 按钮进行安装即可。

(2) 在仓库设置页面 Features 一节中勾选 Discussions,开启仓库的 GitHub Discussions 功能。
在这里插入图片描述

(3) 在仓库的 Discussions 标签页,点击 Categories 旁边的编辑按钮,自定义用于博客评论的类别名称(例如 Comments)。

(4) 打开 https://giscus.app/zh-CN,按以下配置:

  • 仓库:<username>/<username>.github.io
  • 页面 <–> discussion 映射关系:勾选 Discussion 的标题包含页面的 pathname
  • Discussion 分类:选择上一步创建的类别名称 Comments

在这里插入图片描述

之后找到启用 giscus,将生成的配置填写到 _config.yml 文件中 comments.giscus 的对应选项。

comments:active: giscusgiscus:repo: ZZy979/zzy979.github.iorepo_id: R_kgDxxxxxxcategory: Commentscategory_id: DIC_kwDOxxxxxxxxxmapping: pathname

重启 Jekyll 服务器,在文章底部将会看到评论区,使用 GitHub 账号登录即可发表评论。

http://www.lryc.cn/news/583906.html

相关文章:

  • 微服务架构的演进:迈向云原生——Java技术栈的实践之路
  • 基于springboot的美食文化和旅游推广系统
  • 通过 .NET Aspire 使用本地 AI 模型
  • kotlin中集合的用法
  • 《信号与系统》学习笔记——第八章(补充部分)
  • Java多线程:核心技术与实战指南
  • 前端本地化存储数据方案详解
  • React 实现五子棋人机对战小游戏
  • 【TCP/IP】11. IP 组播
  • mvn能只test单独一个文件吗
  • Unity插件——ABC详解
  • pyqt-3(QSS、读取带qrc的ui、信号与槽函数)
  • 从面向对象编程语言PHP转到Go时的一些疑惑?
  • 文心一言4.5开源部署指南及文学领域测评
  • Go语言教程-变量、常量、命名规则
  • GO启动一个视频下载接口 前端可以边下边放
  • Django中序列化与反序列化
  • 实现源图像到目标图像的转换(提示:RGB值互换,新R=旧G,新G=旧B,新B=旧R)
  • Redis数据库基础
  • JSZip 使用详解
  • vue3 td 标签优化时间显示
  • 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
  • JavaScript 树形菜单总结
  • SoC程序如何使用单例模式运行
  • vue3 el-table 列汉字 排序时排除 null 或空字符串的值
  • 第二章-AIGC入门-AI视频生成:几款实用AI视频生成工具全解析(7/36)
  • 2025年软件测试面试题,精选33道,附答案
  • 数据结构笔记10:排序算法
  • 【办公类-107-01】20250710视频慢速与视频截图
  • 用OpenCV标定相机内参应用示例(C++和Python)