Post

Jekyll+Chripy创建网站及介绍

Posted Updated
By ZoeyWang
13 min read
Jekyll+Chripy创建网站及介绍

1. 安装

1.1 创建repository

在GitHub - cotes2020/chirpy-starter: A website startup template using the Chirpy theme gem.中点击Use this template下面的Create a new repository，命名为username.github.io，username就是github用户名的小写

1. 2 安装Jekyll

Jekyll 是一个静态网站生成器，可以把写的内容（文本，Markdown）等内容转化为HTML 格式的静态网页，由Ruby语言编写，Chirpy网站主题是基于Jekyll开发。

  • 安装ruby

可以使用Ruby 版本管理器比如chruby，rvm和rbenv等，其中chruby是一个轻量级的 Ruby 版本切换工具，允许在不同版本的Ruby之间切换，并不负责安装Ruby，而是依赖其他工具（如 ruby-install）来安装 Ruby 版本。

1
2
3
4
5
6

# 终端输入，安装ruby-install
brew install chruby ruby-install


# 终端输入，使用ruby-install安装ruby
ruby-install ruby 3.3.5

但是安装过程中总是出现

1
2
3

>>> Updating ruby versions ...
!!! Failed to download https://raw.githubusercontent.com/postmodern/ruby-versions/master/ruby/versions.txt to /Users/bujibujibiu/.cache/ruby-install/ruby/versions.txt!
!!! Failed to download ruby versions!

放弃使用chruby的ruby-install安装，直接通过brew安装ruby，不好的地方是不能切换不同的ruby版本

1
2
3
4
5
6
7
8

# 终端输入，通过brew直接安装ruby
brew install ruby

# 查看所有与 Ruby 相关的 Homebrew 包
% brew list | grep ruby
chruby
ruby
ruby-install

可以看到通过brew已经成功安装ruby，然后要把ruby的安装路径放进系统路径中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 查看通过brew安装的ruby路径
% brew --prefix ruby
/opt/homebrew/opt/ruby

# 打开~/.zshrc文件
% open -e ~/.zshrc

# 在文件中添加如下path
export PATH="/opt/homebrew/opt/ruby/bin:$PATH"

# 重新加载配置文件，使更改生效
% source ~/.zshrc

# 查看ruby版本显示，表示安装成功
% ruby -v
ruby 3.3.6 (2024-11-05 revision 75015d4c1f) [arm64-darwin23]
  • 安装Jekyll

RubyGems 是 Ruby 的包管理器，用于安装和管理 Ruby 的库，在 Ruby 中，所有的库（如 Jekyll）都以 gem 的形式发布，每个 Ruby 版本都会有自己独立的 gems 安装目录。首先使用gem来安装jekyll

1
2

# 使用gem安装jekyll
% gem install jekyll

同样安装完成后需要把jekyll的安装路径放进系统路径中

1
2

# 查看查看Gem安装路径
% gem environment

输出的EXECUTABLE DIRECTORY后的内容就是gem安装的库的存放位置，把该路径同样放进~/.zshrc文件中，就可以查看jekyll版本

1
2

% jekyll -v
jekyll 4.3.4

1.3 本地环境

查看ruby和jekyll的版本信息，表示已经安装成功

1
2

% ruby -v
% jekyll -v

把1.1中的repository克隆到本地，如果HTTPS不行，用SSH，进入该文件夹，运行bundle

  • Bundler 是 Ruby 语言中的一个依赖管理工具，类似于 Node.js 中的 npm 或 Python 中的 pip，它负责管理项目所依赖的 Ruby gem 包
  • bundle 命令 是 Bundler 提供的一个命令行工具，通过bundle你可以安装、更新和管理项目所需要的 gem 包
1
2
3

# 进入repository的本地路径
% cd <file>
% bundle

如果要在网站里写东西，可以自己建一个md文件，放进本地repository的_posts文件夹中，执行如下命令，这样会生成一个预览的网站，查看Server address：http://127.0.0.1:4000/可以看到网站信息

1
2
3

% bundle exec jekyll b

Server address: http://127.0.0.1:4000/

1.4 更新网站

在1.3节中生成的只是预览的Jekyll静态网站，还需要配置GitHub Pages

  • Jekyll 是网站生成器，提供了一个框架来创建和管理静态网站

  • Chirpy 是一个 Jekyll 主题，专门用于构建博客类型的静态网站，它可以帮助用户快速搭建个人博客，且兼容 GitHub Pages

  • GitHub Pages 是托管静态网站的平台，它与 Jekyll 集成，可以自动构建和部署 Jekyll 网站，支持使用 Chirpy 主题的博客网站直接托管

  • GitHub Actions 是 GitHub 提供的一项自动化功能，它允许你在 GitHub 仓库中设置 CI/CD（持续集成/持续部署）工作流，自动化完成一系列任务，如代码构建、测试、部署等。

在github中的.github.io库中，点击settings-pages-Build and deployment，source修改为Github Actions。一旦 Jekyll 网站构建完成，GitHub Actions 可以通过定义工作流（workflow），自动将构建好的静态文件部署到 GitHub Pages 上，确保每次提交都能自动更新到线上站点。

部署前先确定 _config.yml文件中的url是你的个人网站。本地运行bundle exec jekyll s生成jekyll静态网站后，使用git push将本地repository推送到远程，GitHub Actions会自动将静态完整部署到GitHub Pages上，对网站进行更新。

在Actions页面，可以看到每个workflow的状态，如果失败了，个人博客网站不会更新，可以点击失败的工作流查看具体的工作日志，定位失败原因，比如可能因为ruby版本不兼容等，基于提示修改，直到本地运行bundle exec jekyll s——git push.远程，刷新网站后得到理想的网站，代表成功。

2.Chirpy主题介绍

2.1 站点配置

在_config.yml文件中提供了关于网站的配置信息，比如网站名称，网站地址，网站头像等

1
2
3
4
5
6
7
8
9
10

title:  # the main title

tagline:  # it will display as the subtitle

# Fill in the protocol & hostname for your site.
# E.g. 'https://username.github.io', note that it does not end with a '/'.
url: 

# the avatar on sidebar, support local or CORS resources
avatar:

2.2 命名和路径

创建一个新文件，命名YYYY-MM-DD.EXTENSION，放进_posts文件夹中，EXTENSION必须是md或者markdown模式

2.3 前页

在博客的前面要填写以下内容，title是文章标题，date是文章日期，categories可以包含两个元素，分别代表外层目录和子目录，tags是文章标签，可以为空，也可以有很多个，格式为front matter

1
2
3
4
5
6

---
title: TITLE
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
tags: [TAG]     # TAG names should always be lowercase
---

2.4 作者信息

博客的作者信息可以不用写在前页，而是通过查找_config.yml文件中的变量social.name和第一个social.links，在这里可以修改作者名和相关账号链接

1
2
3
4
5
6
7
8
9
10
11
12

social:
  # Change to your full name.
  # It will be displayed as the default author of the posts and the copyright owner in the Footer
  name: your_full_name
  email: example@domain.com # change to your email address
  links:
    # The first element serves as the copyright owner's link
    - https://twitter.com/username # change to your Twitter homepage
    - https://github.com/username # change to your GitHub homepage
    # Uncomment below to add more social links
    # - https://www.facebook.com/username
    # - https://www.linkedin.com/in/username

也可以在_data文件夹中创建authors.yml文件，自定义作者信息

1
2
3
4

<author_id>:
  name: <full name>
  twitter: <twitter_of_author>
  url: <homepage_of_author>

然后在首页里加上

1
2
3
4
5

---
author: <author_id>                     # for single entry
# or
authors: [<author1_id>, <author2_id>]   # for multiple entries
---

2.5 博客描述

博客的描述默认是正文的前几个单词，如果想自定义博客的简介，可以在首页加上

1
2
3

---
description: Short summary of the post.
---

2.6 内容目录

TOC( Table of Contents)在博客的最右侧默认显示，但是如果不想要这个TOC，可以在_config.yml文件中设置toc变量为false，或者对于某个指定的博客，在首页设置

1
2
3

---
toc: false
---

2.7 媒体资源

URL前缀

  • 如果媒体资源存在cdn中，可以在_config.yml文件中设置cdn，这样所有的媒体资源都会从cdn的链接中获取
1
2
3
4
5
6

# The CDN endpoint for media resources.
# Notice that once it is assigned, the CDN url
# will be added to all media resources (site avatar, posts' images, audio and video files) paths starting with '/'
#
# e.g. 'https://cdn.com'
cdn:
  • 要指定当前帖子/页面范围的资源路径前缀，请在帖子的前面设置 media_subpath
1
2
3

---
media_subpath: /path/to/media/
---

图片

  • 标题：在图像的下一行添加斜体，然后它将成为标题并出现在图像的底部
1
2

![img-description](/path/to/image)
_Image Caption_
  • 大小：为了防止图片加载时页面内容布局发生偏移，我们应该设置每张图片的宽度和高度
1
2
3

![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }

![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }
  • 位置：默认情况下，图像居中，可以使用正常、左、右类之一来指定位置
1
2
3

![Desktop View](/assets/img/sample/mockup.png){: .normal }
![Desktop View](/assets/img/sample/mockup.png){: .left }
![Desktop View](/assets/img/sample/mockup.png){: .right }
  • 模式：可以让图片在深色/浅色模式下遵循主题偏好。这需要准备两张图片，一张用于深色模式，一张用于浅色模式，然后为它们分配特定的类别（深色或浅色）：
1
2

![Light mode only](/path/to/light-mode.png){: .light }
![Dark mode only](/path/to/dark-mode.png){: .dark }
  • 预览图像：如果想在帖子顶部添加图片，要提供分辨率为 1200 x 630 的图片。如果图像纵横比不符合 1.91：1，图像将被缩放和裁剪，在首页提供如下信息
1
2
3
4
5

---
image:
  path: /path/to/image
  alt: image alternative text
---

注意media_subpath也可以传递给预览图片，也就是说，当设置了它之后，属性path只需要图片文件名即可。

1
2
3

---
image: /path/to/image
---
Development, 博客网站
dev
This post is licensed under CC BY 4.0 by the author.