在Github上搭建一个免费的blog

最新推荐文章于 2025-06-28 10:55:24 发布

weixin_42152081

最新推荐文章于 2025-06-28 10:55:24 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习文章标签： Github Pages

本文链接：https://blog.youkuaiyun.com/weixin_42152081/article/details/80657345

学习专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何利用 GitHub Pages 和 Jekyll 静态站点生成器搭建个人博客，包括创建项目、配置设置文件、构建模板及文章等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Github Pages

Github，号称程序员的Facebook。简单说，它是一个具有版本管理功能的代码仓库，每个项目单独有一个主页，里面列出了项目的源文件。

但是对于一个新手来说，看到一大堆源码，只会让人头晕脑涨，不知何处入手。他希望看到的是，一个简明易懂的网页，说明每一步应该怎么做。因此，github就设计了Pages功能，允许用户自定义项目首页，用来替代默认的源码列表。所以，github Pages可以被认为是用户编写的、托管在github上的静态网页。

jekyll是什么？

jekyll是一个静态站点生成器，它会根据网页源码生成静态文件。它提供了模板、变量、插件等功能，所以实际上可以用来编写整个网站。

所以我们的思路是这样的：先在本地编写符合jekyll规范的网站源码，然后上传到github，由github生成并托管整个网站。

搭建Blog

第一步创建项目

在电脑上找到一个合适的位置，打开Git Bash命令行，创建一个目录，作为项目的主目录：

$ mkdir jekyll_demo //创建一个名叫jekyll_demo的目录

对该目录进行git初始化：

$ cd jekyll_demo //把jekyll_demo文件夹作为当前位置
$ git init //进行git初始化

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

$ git checkout --orphan gh-pages

以下的所有动作，都在该分支下完成。

第二步创建设置文件

在项目根目录下，建立一个名为_config.yml的文本文件，这是设置文件，在里面填入以下内容：

baseurl:  /jekyll_demo

这时候目录的结构为：

/jekyll_demo
　　　　|--　_config.yml

第三步创建模板文件

在项目的根目录下，创建一个名为_layouts的目录（文件夹），用于存放模板文件：

$ mkdir _layouts

进入该目录，创建一个default.html文件，作为Blog的默认模板。并在该文件内填入以下内容：

<!DOCTYPE html>

<html>

<head>

<title>

{{ page.title }} //表示文章标题

</title>

</head>

<body> {{ content }} //表示文章内容 </body>

</html>

这时候目录结构变为：

/jekyll_demo
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html

第四步创建文章

回到项目根目录，创建一个_posts目录，用于存放Blog文章：

mkdir _posts

进入该目录，创建第一篇文章。文章就是普通的文本文件，文件名假定为2018-06-11-hello world.html。(注意，文件名必须为"年-月-日-文章标题.后缀名"的格式。如果网页代码采用html格式，后缀名为html；如果采用markdown格式，后缀名为md）

在该文件中，填入以下内容：

---              //每篇文章开头必须有一个yaml文件头，用三根短划线"---"来标记开始和结束，里面每一行设置一种元素
layout: default  //该文章的模板使用_layouts目录下的default.html文件 
title: 你好，世界 //该文章的标题是"你好，世界"（如果不设置这个值，默认使用嵌入文件名的标题，即"hello world"）
---

<h2>{{ page.title }}</h2> //{{ page.title }}就是文件头中设置的"你好，世界"

<p>我的第一篇文章</p>

<p>{{ page.date | date_to_string }}</p> //{{ page.date }}是嵌入文件名的日期，"| date_to_string"表示将page.date变量转化成人类可读的格式。

目录结构变为：

/jekyll_demo
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html 
　　　　|--　_posts
　　　　|　　　|--　2012-08-25-hello world.html

第五步创建首页

有了文章以后，还需要一个首页。

回到根目录，创建一个index.html文件，填入以下内容：

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

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

<ul>

　　{% for post in site.posts %} //对所有帖子进行一个遍历（输出内容使用两层大括号，单纯的命令使用一层大括号）

　　　　<li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>

　　{% endfor %}

</ul>

目录结构变为：

/jekyll_demo
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html 
　　　　|--　_posts
　　　　|　　　|--　2012-08-25-hello world.html
　　　　|--　index.html

第六步发布内容

现在，这个最简单的Blog就可以发布了。

先把所有的内容添加到本地git库：

$ git add *
$ git commit -m 'first post'

然后，登陆github，创建一个名为jekyll_demo的库。再将本地内容推送到github上你刚创建的库里。

$ git remote add origin https://github.com/RFHzhj/blog.git //"RFHzhj"是我的用户名
$ git push origin gh-pages

上传成功后，访问https://RFHzhj.github.io/blog/就可以看到Blog已经生成了。

附

简单介绍一下每个目录和文件的作用：

文件 / 目录	描述
_config.yml	保存配置数据。很多配置选项都会直接从命令行中进行设置，但是如果你把那些配置写在这儿，你就不用非要去记住那些命令了。
_drafts	drafts 是未发布的文章。这些文件的格式中都没有 title.MARKUP 数据。学习如何使用 drafts.
_includes	你可以加载这些包含部分到你的布局或者文章中以方便重用。可以用这个标签 {% include file.ext %} 来把文件 _includes/file.ext 包含进来。
_layouts	layouts 是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择。这将在下一个部分进行介绍。标签 {{ content }} 可以将content插入页面中。
_posts	这里放的就是你的文章了。文件格式很重要，必须要符合: YEAR-MONTH-DAY-title.MARKUP。 The permalinks 可以在文章中自己定制，但是数据和标记语言都是根据文件名来确定的。
_data	放一些其他配置文件,必须是.yml或者.yaml格式的,比如有一个文件叫members.yml,如果想引用这个文件里的内容就通过site.data.membres来引用
_site	一旦 Jekyll 完成转换，就会将生成的页面放在这里（默认）。最好将这个目录放进你的 .gitignore 文件中。