【Web开发】基于 Jekyll 中的 Chirpy 模板搭建博客网站(一):成功经验篇

基于 Jekyll 中的 Chirpy 模板搭建博客网站(一):成功经验篇

  • 1.Jekyll 介绍
  • 2.Chirpy 介绍
  • 3.安装步骤
    • 3.1 Prerequisites
    • 3.2 Installation
      • 3.2.1 Creating a New Site
      • 3.2.2 Installing Dependencies
    • 3.3 Usage
      • 3.3.1 Configuration
      • 3.3.2 Running Local Server
    • 3.4 Deployment
      • 3.4.1 Deploy by Using GitHub Actions
      • 3.4.2 Manually Build and Deploy

本篇博文主要讲的是成功经验,下一篇博客将会总结遇到的一些坑。

1.Jekyll 介绍

Jekyll 是一种简单易用的静态网站生成器,它能够帮助你快速搭建漂亮的静态博客网站。无论是个人博客、技术博客还是企业官网 Jekyll 都是一个理想的选择。本文将介绍如何使用 Jekyll 创建一个漂亮的静态博客网站,并且给出一些实用的技巧和建议。

Jekyll 是一个基于 Ruby 的静态网站生成器,它可以将你编写的 Markdown、HTML 等文件转换成静态的 HTML 页面,方便部署和访问。与动态网站相比,静态网站具有快速加载、安全性高等优点,适用于各种类型的网站。

官方网站:http://jekyllthemes.org/

在这里插入图片描述

2.Chirpy 介绍

Chirpy 是 Jekyll 中的一种主题风格,它具有简约、响应式、开源的特点,且功能丰富。

官方网站:https://github.com/cotes2020/jekyll-theme-chirpy/tree/master

GitHub 地址:https://github.com/cotes2020/jekyll-theme-chirpy/

Demo 地址:https://chirpy.cotes.page/

在这里插入图片描述

Demo 如下图所示,还是蛮简约的,但基本功能都有。

在这里插入图片描述

并且在它的在线 Demo 里,提供了安装的教程和博客写作的规范。不要觉得有安装教程就可以轻易一步到位,还是有不少坑的!

3.安装步骤

我们就根据官方提供的文档来进行安装,也是它在线 Demo 的其中一篇博文。

官方提供的安装文档:https://chirpy.cotes.page/posts/getting-started/

3.1 Prerequisites

因为 Jekyll 是拿 Ruby 写的,所以首先需要安装:RubyRubyGemsGCCMake。参考链接:https://jekyllrb.com/docs/installation/。

在这里插入图片描述
如何安装上述的这些环境呢?

博主用的是 Windows 操作系统,按下面这个步骤来即可。参考链接:https://jekyllrb.com/docs/installation/windows/。

在这里插入图片描述

3.2 Installation

3.2.1 Creating a New Site

官方提供了以下两种安装方法。第一种方法安装得到的模板是轻量级的,不会有什么 CSS 样式文件,自己可以随意改造,但如果想直接用起来比较麻烦。我个人推荐第二种方法,虽然官方不推荐!本文也是第二种方法安装的,网上的教程几乎是第一种,因为第二种安装起来会更加麻烦,但它直接继承了模板样式,开箱即用。

在这里插入图片描述
我们在 GitHub 上建一个自己的站点,然后运行:bash tools/init。想一下怎么在 Windows 上运行这个命令呢?(提示:可以使用 Git Bash

在这里插入图片描述
虽然只有简单的一行命令,但可能会引入很多 Bug。最终运行成功的结果如下:

在这里插入图片描述
根据官方文档,这个命令会做以下的四件事情:

在这里插入图片描述
其中第三点就是引入 js 文件,所以如果这个命令运行失败,肯定得不到我们期望的结果!

3.2.2 Installing Dependencies

在第一次启动本地服务器之前,需要到根目录运行 bundle 命令:

在这里插入图片描述

3.3 Usage

3.3.1 Configuration

我们需要更改 _config.yml 文件里的一些配置,例如:

  • url
  • avatar
  • timezone
  • lang

3.3.2 Running Local Server

在这里插入图片描述
博主在本地运行的示例:

在这里插入图片描述

3.4 Deployment

官方也是提供了两种方法供选择,建议大家直接使用 GitHub 作为站点部署。原作者已经在代码中写好了流水线的构建流程。这样只要本地 git push 了代码,就可以自动触发 CI/CD 流程。

在这里插入图片描述

3.4.1 Deploy by Using GitHub Actions

在这里插入图片描述
博主的配置界面如下图:

在这里插入图片描述

博主因为有多次 push,所以会有构建失败的时候,点进去看一下失败原因,重新推送即可,但可以看到第一次是成功的。

在这里插入图片描述

3.4.2 Manually Build and Deploy

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/180251.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用C#插件Quartz.Net定时执行CMD任务工具2

目录 创建简易控制台定时任务步骤完整程序 创建简易控制台定时任务 创建winform的可以看:https://blog.csdn.net/wayhb/article/details/134279205 步骤 创建控制台程序 使用vs2019新建项目,控制台程序,使用.net4.7.2项目右键&#xff08…

队列的实现---超详细

队列的实现—超详细 文章目录 队列的实现---超详细一、队列的模型二、代码实现以及测试用例①队列初始化②入队③出队④输出队头⑤输出队尾⑥判断队列是否为空⑦队列的长度⑧队列的销毁⑨测试用例 一、队列的模型 队列:只允许在一端进行插入数据操作,在…

过滤器模式 rust和java的实现

文章目录 过滤器模式实现 过滤器模式实现javarustjavarust rust代码仓库 过滤器模式 过滤器模式(Filter Pattern)或标准模式(Criteria Pattern)是一种设计模式,这种模式允许开发人员使用不同的标准来过滤一组对象&…

Unity中Shader矩阵的乘法

文章目录 前言一、矩阵乘以标量二、矩阵和矩阵相乘1、第一个矩阵的列数必须 与 第二个矩阵的行数相等,否则无法相乘!2、相乘的结果矩阵,行数由第一个矩阵的行数决定,列数由第二个矩阵的列数决定! 三、单位矩阵四、矩阵…

相对强弱指标 RSI

SMA(A,B,1)MA AA ,一天前的收盘价; BB,如果时涨的,把涨幅返回; CC,12天的涨幅占12天全部涨跌幅的多少; 画一条50 的线条。

窗口管理工具 Mosaic mac中文版功能特点

MosAIc mac是一种窗口管理工具,可帮助您在计算机屏幕上有效地组织和管理多个应用程序窗口。它提供了一种直观的方式来调整和排列窗口,以最大化工作效率。 MosAIc mac窗口管理软件功能和特点 窗口布局:MosAIc允许您选择不同的窗口布局&#x…

Games104现代游戏引擎笔记 面向数据编程与任务系统

Basics of Parallel Programming 并行编程的基础 核达到了上限,无法越做越快,只能通过更多的核来解决问题 Process 进程 有独立的存储单元,系统去管理,需要通过特殊机制去交换信息 Thread 线程 在进程之内,共享了内存…

从单测入手,完善Vue3源码中底层API effect功能

基于上一篇文章中实现的effect方法,根据 Vue3 源码中单测,完善该方法的三点功能,分别是: runner: effect可以返回自执行的入参runner函数scheduler: effect支持添加第二个参数选项中的scheduler功能stop: effect添加stop功能 ru…

LeetCode(17)罗马数字转整数【数组/字符串】【简单】

目录 1.题目2.答案3.提交结果截图 链接: 13. 罗马数字转整数 1.题目 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。 字符 数值 I 1 V 5 X 10 L …

修改 jar 包中的源码方式

在我们开发的过程中,我们有时候想要修改jar中的代码,方便我们调试或或者作为生产代码打包上线,但是在IDEA中,jar包中的文件都是read-only(只读模式)。那如何我们才能去修改jar包中的源码呢? 1.…

【中间件篇-Redis缓存数据库06】Redis主从复制/哨兵 高并发高可用

Redis高并发高可用 复制 在分布式系统中为了解决单点问题,通常会把数据复制多个副本部署到其他机器,满足故障恢复和负载均衡等需求。Redis也是如此,它为我们提供了复制功能,实现了相同数据的多个Redis 副本。复制功能是高可用Re…

系列一、JVM的架构图

一、JVM的位置 JVM是运行在操作系统之上的,它与硬件没有直接的交互。 二、JVM的架构图