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

news2024/11/26 12:33:45

基于 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.coloradmin.cn/o/1213529.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

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

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

ubuntu下C++调用matplotlibcpp进行画图(超详细)

目录 一、换源 二、安装必要的软件 三、下载matplotlibcpp 四、下载anaconda 1.anaconda下载 2.使用anaconda配置环境 五、下载CLion 1.下载解压CLion 2.替换jbr文件夹 3.安装CLion 4.激活CLion 5.CLion汉化 6.Clion配置 六、使用CLion运行 七、总结 我的环…

posix定时器的使用

POSIX定时器是基于POSIX标准定义的一组函数,用于实现在Linux系统中创建和管理定时器。POSIX定时器提供了一种相对较高的精度,可用于实现毫秒级别的定时功能。 POSIX定时器的主要函数包括: timer_create():用于创建一个定时器对象…

Kubernetes(k8s)介绍和环境部署

文章目录 Kubernetes一、Kubernetes介绍1.Kubernetes简介2.Kubernetes概念3.Kubernetes功能4.Kubernetes工作原理5.kubernetes组件6.Kubernetes优缺点 二、Kubernetes环境部署环境基本配置1.所有节点安装docker2.所有节点安装kubeadm、kubelet、kubectl添加yum源containerd配置…

LeetCode(16)接雨水【数组/字符串】【困难】

目录 1.题目2.答案3.提交结果截图 链接: 42. 接雨水 1.题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水。 示例 1: 输入:height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&…

PbootCMS 应用快速迁移至浪潮信息 KeyarchOS 云服务器

本文我们以 PbootCMS 应用为例,详细介绍如何使用 X2Keyarch 迁移工具将其从 CentOS 系统迁移到浪潮信息 KeyarchOS 系统。 背景介绍 众所周知,CentOS 是最流行的红帽克隆版,因为免费,所以它的安装量甚至比红帽本身要大得多。本来…

Feature Pyramid Networks for Object Detection(2017.4)

文章目录 Abstract1. Introduction3. Feature Pyramid NetworksBottom-up pathwayTop-down pathway and lateral connections 7. Conclusion FPN Abstract 特征金字塔是识别系统中检测不同尺度物体的基本组成部分。但最近的深度学习对象检测器避免了金字塔表示,部分…

python科研绘图:绘制X-bar图

目录 1.X-bar 图的基本概念 2.X-bar 图的绘制过程 3.X-bar 图的优势 4.X-bar 图的绘制 1.X-bar 图的基本概念 X-bar控制图是一种统计工具,用于监控和控制生产过程中的质量变量。它是过程能力分析和统计过程控制(SPC,Statistical Process…

微机原理_9

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案。 1.当运算结果的最高位为1时,标志位() A. CF1 B. OF1 C. SF1 D. ZF1 2、汇编语言源程序中,每个语句由四项组成,如语句要完成一定功能,那么该语句中不可…

构造函数和初始化列表的关系和区别【详解】

构造函数和初始化列表关系和区别,以及为什么有初始化列表,和它的好处 一、构造函数和初始化列表的关系和区别二、为什么有初始化列表三、使用初始化列表的好处 一、构造函数和初始化列表的关系和区别 百度百科这样定义初始化列表:与其他函数…

使用手机作为电脑的麦克风和摄像头外设

工具 Iriun Iriun 电脑端安装:Iriun Android: Iriun 4K Webcam for PC and Mac - Apps on Google Play Apple: Iriun Webcam for PC and Mac on the App Store 基础功能免费,普通使用足够了。 付费功能: 使用 这里有介绍&#xff1a…

【Java】详解多线程同步的三种方式

🌺个人主页:Dawn黎明开始 🎀系列专栏:Java ⭐每日一句:等风来,不如追风去 📢欢迎大家:关注🔍点赞👍评论📝收藏⭐️ 文章目录 一.🔐线…

MAC地址_MAC地址格式_以太网的MAC帧_详解

MAC地址 全世界的每块网卡在出厂前都有一个唯一的代码,称为介质访问控制(MAC)地址 一.网络适配器(网卡) 要将计算机连接到以太网,需要使用相应的网络适配器(Adapter),网络适配器一般简称为“网卡”。在计算机内部,网卡与CPU之间的通信&…

【UE C++】读取文本文件,并解析

目录 0 引言1 空格 制表符 换行符1.1 定义1.2 查看字符 2 实战 🙋‍♂️ 作者:海码007📜 专栏:UE虚幻引擎专栏💥 标题:❣️ 寄语:书到用时方恨少,事非经过不知难!&#x…

C进阶---字符函数和字符串函数

目录 一、长度不受限限制的字符串函数 1.1strlen 1.2strcpy 1.3strcat 1.4strcmp 二、长度受限制的字符串函数 2.1strncpy 2.2strncat 2.3strncmp 三、其他字符串函数 3.1strstr 3.2strtok 3.3sterror 3.4memcpy 3.5memmove 3.6memcmp 四、字符分类函…

c语言:如何打印杨辉三角形。

题目:打印杨辉三角形 如: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 思路和代码: //由规律不难得出,每行首个数字和最后最后一个数字都为1,其余数字是这列的上一个数字和前一个数字的和组成,由此推出代码 #de…

Openssl X509 v3 AuthorityKeyIdentifier实验与逻辑分析

Openssl是X509的事实标准,目前主流OS或个别安全性要求较高的设计场景,对X509的证书链验证已经不在停留在只从数字签名校验了,也就是仅仅从公钥验签的角度,在这些场景中,往往还会校验AuthorityKeyIdentifier和SubjectKe…

【文件包含】metinfo 5.0.4 文件包含漏洞复现

1.1漏洞描述 漏洞编号————漏洞类型文件包含漏洞等级⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐漏洞环境windows攻击方式 MetInfo 是一套使用PHP 和MySQL 开发的内容管理系统。MetInfo 5.0.4 版本中的 /metinfo_5.0.4/about/index.php?fmodule文件存在任意文件包含漏洞。攻击者可利用漏洞读取网…

第十九章 Java绘图

第十九章 java绘图 19.1 java绘图类 绘图时高级程序设计中非常重要的技术,例如,应用程序可以绘制闪屏图片,背景图片,组件外观等等,Web程序可以绘制统计图,数据库存储图片资源等,真骨耸为“一…

服务名无效。 请键入 NET HELPMSG 2185以获得更多的帮助

遇到的问题是MySQL服务没有。 因为net start 服务名,启动的是win下注册的服务。此时,我系统中并没有注册mysql到服务中。即下面没有mysql服务。 mysqld --install net start mysql