Skip to content

Yulv-git/Jekyll-Pages

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.htmltitle: 你好,世界,表示该文章的标题是你好,世界,如果不设置这个值,默认使用嵌入文件名的标题,即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/上,则:

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages