使用github和jekyll搭建自己的blog

最新推荐文章于 2024-07-26 12:37:44 发布

火车上遇见

最新推荐文章于 2024-07-26 12:37:44 发布

阅读量571

点赞数

分类专栏： Tool 文章标签： tool

本文链接：https://blog.csdn.net/WAN_EXE/article/details/54616371

版权

Tool 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

偶然的机会听说可以在github建立自己的网站，然后就搜了搜网上的例子，搭建了一个。

如果用过git的程序员，整个过程非常简单。

1.安装jekyll

ubuntu为例，安装jekyll需要安装ruby，ubuntu中的ruby版本太旧，会碰到类似的安装错误的问题

如果没有安装gem，安装 sudo apt-get install gem

$ sudo gem install jekyll    

ERROR:  Error installing jekyll:
ERROR: Failed to build gem native extension.

解决的办法是去ruby官网下载最新的安装包

http://www.ruby-lang.org/en/downloads/

Stable releases:

Ruby 2.4.0
sha256: 152fd0bd15a90b4a18213448f485d4b53e9f7662e1508190aa5b702446b29e3d

下载完成之后，解压，执行

./configure

make

sudo make install

可以看到安装完成之后最新的jekyll为3.3.1

wang@wang:~/Downloads/ruby-2.4.0$ jekyll -version
jekyll 3.3.1

以下具体的信息可以查看

http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

2. 创建静态网页

新建一个目录，作为项目的主目录，目录名称为jekyll_demo

$ mkdir jekyll_demo

进入目录，并初始化git

$ cd jekyllo_demo

$ git init

如果不理解git，可以网上查找相关资料。

然后建立一个没有父节点的分支gh-pages， github规定只有该分支上的页面才可以生成网页文件

$ git checkout --orphan gh-pages

在项目的根目录下新建一个_config.yml的文本文件。它是jekyll的设置文件，我们在里面填入如下内容，其他设置都可以用默认选项，具体解释参见官方网页。

$ touch _config.yml

在项目根目录下，创建一个_layouts目录，用于存放模板文件。

$ mkdir _layouts

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

<!DOCTYPE html>

　　<html>

　　<head>

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

　　</head>

　　<body>

　　　　{{ content }}

　　</body>

　　</html>

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

$ mkdir _posts

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

在该文件中，填入以下内容：（注意，行首不能有空格）

---
　　layout: default
　　title: 你好，世界
　　---

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

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

　　<p>{{ page.date | date_to_string }}</p>

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

在yaml文件头后面，就是文章的正式内容，里面可以使用模板变量。{{ page.title }}就是文件头中设置的"你好，世界"，{{ page.date }}则是嵌入文件名的日期（也可以在文件头重新定义date变量），"| date_to_string"表示将page.date变量转化成人类可读的格式。

最终文件目录结构

wang@wang:~/jekyll_demo$ ls
_config.yml index.html _layouts _posts

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

回到根目录，创建一个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>

它的Yaml文件头表示，首页使用default模板，标题为"我的Blog"。然后，首页使用了{% for post in site.posts %}，表示对所有帖子进行一个遍历。这里要注意的是，Liquid模板语言规定，输出内容使用两层大括号，单纯的命令使用一层大括号。至于{{site.baseurl}}就是_config.yml中设置的baseurl变量。

现在，这个简单的Blog就可以发布了。先把所有内容加入本地git库。