/Jekyll-Pages

Blog on GitHub/Gitee Pages using Jekyll. 使用Jekyll在GitHub/Gitee Pages上写博客。

Primary LanguageHTMLMIT LicenseMIT

Blog on GitHub/Gitee Pages using Jekyll

使用Jekyll在GitHub/Gitee Pages上写博客。

1. 致谢

本项目基于搭建一个免费的，无限流量的Blog----github Pages和Jekyll入门进行实践和整理。

2. git分支设置

创建一个没有父节点的分支gh-pages。因为github规定，只有该分支中的页面，才会生成网页文件。

git checkout --orphan gh-pages

3. 创建设置文件

在项目根目录下，创建名为_config.yml的jekyll设置文件，其具体内容见_config.yml。

baseurl: /Jekyll-Pages

其他设置可用默认选项，具体解释见官网。

注意：

  • GitHub Pages上的url链接可自动将大写转为小写，而Gitee Pages上的url含有大写字母则会报错。故，您若在Gitee Pages上部署该博客网站，则上述baseurl不可出现大写字母，或者您可直接GitHub Pages和Gitee Pages上的该设置都不要出现大写字母。

4. 创建模板文件

在项目根目录下，创建_layouts目录，用于存放模板文件，其具体内容见default.html。

<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>
        {{ page.title }}
    </title>
</head>

<body>
    {{ content }}
</body>

</html>

default.html是Blog的默认模板。Jekyll使用Liquid模板语言，{{ page.title }}表示文章标题，{{ content }}表示文章内容,更多模板变量请参考官方文档。

5. 创建文章

在项目根目录下，创建_posts目录，用于存放blog文章，如2022-04-28-hello-world.html。

---
layout: default
title: 您好，世界
---
<h2>
    {{ page.title }}
</h2>

<p>
    Hello, World! I'm Yulv. See <a href="https://yulv-git.github.io">Yulv-git.github.io</a> for more details.
</p>

<p>
    {{ page.date | date_to_string }}
</p>
  • 文件名必须为年-月-日-文章标题.后缀名的格式。后缀名有为html、md等。
  • 每篇文章的头部，必须有设置元数据的yaml文件头。它用三根短划线---，标记开始和结束，里面每一行设置一种元数据。layout:default，表示该文章的模板使用_layouts目录下的default.html；title: 你好，世界，表示该文章的标题是你好，世界，如果不设置这个值，默认使用嵌入文件名的标题，即hello world。
  • {{ page.title }}就是文件头中设置的你好，世界，{{ page.date }}则是嵌入文件名的日期（也可在文件头重新定义date变量），| date_to_string表示将page.date变量转化成人类可读的格式。

6. 创建首页

创建index.html文件，具体内容见index.html。

---
layout: default
title: 我的Blog
---

<h2>
    {{ page.title }}
</h2>

<p>
    最新文章
</p>

<ul>
    {% for post in site.posts %}
    <li>
        {{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
    </li>
    {% endfor %}
</ul>

{% for post in site.posts %}，表示对所有帖子进行遍历。 Liquid模板语言规定，输出内容使用两层大括号，单纯的命令使用一层大括号。至于{{site.baseurl}}就是_config.yml中设置的baseurl变量。

7. 发布blog

git stage .
git commit -m "提交的描述"
git push origin gh-pages

注意：

  • Gitee Pages不会像GitHub Pages那样会在commit后自动部署，需要手动操作来启动和更新Pages（Gitee项目主页上方的工具栏，下拉“服务”菜单，点击“Gitee Pages”，然后按提示进行操作即可）。

发布成功后，可在 yulv-git.github.io/Jekyll-Pages 网页上看到blog。(yulv-git换成您的GitHub用户名。)

另外，若您想直接将该博客网站部署到GitHub（或Gitee Pages）的根目录用户名.github(或gitee).io/上，则：