0%

如何使用Jekyll搭建一个个人博客

注册Coding.net账号

访问Coding.net官网,并注册一个账号,然后新建一个项目。如果想要仅用二级域名访问(即username.coding.me),项目名称应为username.coding.me,否则博客的访问地址为username.coding.me/项目名称,且在这种情况下,有一种特殊的现象需要处理,本文第九部分会有说明。(注:username为账号名称)

安装Jekyll(如果不需要本地调试可以跳过此步骤)

在安装Jekyll之前,你需要安装Ruby。本文介绍在Windows环境下如何安装Jekyll。首先下载RubyInstaller,在RubyInstaller安装完成后使用gem来安装Jekyll,输入命令:gem install Jekyll然后等待一段时间安装就完成了。(由于gem下载源在国外,这一段时间会变得非常长,所以在安装Jekyll前可以更换gem源)。

建立目录结构

Jekyll是一个静态网页生成器,只要按照规范建立目录Jekyll就可以帮你生成静态网页。建立目录结构有两种方案: 1. 使用jekyll new [blogname]命令来自动的生成一个目录结构。在该命令执行目录下会出现一个名称为blogname的文件夹,文件夹内部就是建立好的目录结构,该文件夹内部就是博客的根目录。使用该命令需要bundler依赖,所以可以先执行gem install bundler,否则命令执行会报错。 2. 手动建立目录结构,关于Jekyll目录结构的详细信息请查看Jekyll官方文档,本文只做简单介绍。新建一个文件夹作为博客根目录,然后在该文件夹内创建以下文件或文件夹:

  • _config.yml: 配置文件,进行依赖设置和站点全局信息设置。
  • _posts: 存放发布到博客上的文章。
  • _layouts: 存放布局文件。

创建博客布局

如果使用方案一建立目录结构,目录中本身就含有布局,如果使用默认布局可以选择跳过此步骤。博客布局应在_layouts文件夹创建。布局可以自行创建或者直接使用他人的布局(将_layouts文件夹以及该文件夹中文件所引用的所有资源都拷贝到博客根目录下),本文介绍一种最简单的布局:

_layouts文件夹下创建default.html,并输入以下内容:

1
2
3
4
5
<html>    
<body>
{{ content }}
</body>
</html>

一个最简单的布局就建立好了。其中值得注意的是{{ content }},这是Jekyll提供的一种功能,这段语句告诉Jekyll将编译好的博客内容插入到这来形成文章。关于这种用法的相信信息也可以到Jekyll官方文档查看。布局文件可以创建多个,名称不限内容不限,而且可以互相引用,Jekyll不会对除使用特殊语句的其他部分进行任何更改。

建立博客索引

在博客根目录下创建index.html,用以显示所有的文章,提供访问索引。使用index.*这种文件名可以在访问时省略文件名,即根目录下的xxx.html需要通过url/xxx.html访问,而根目录下的index.*直接输入url就可以访问了,该规则适用于任何目录。然后让index.html使用default布局,在index.html顶端输入以下内容:

1
2
3
---
layout: default
---

就表示使用default布局了,index.html中的内容将替换掉default.html中的{{ content }}并生成最终的index.html。两条---之间的部分被称之为YAML头信息,可以指定一些变量的值,还可以自定义变量。然后继续输入以下内容:

1
2
3
{% for post in site.posts % }
<p><a href=" {{ post.url }}">{{ post.title }}</a></p>
{% endfor %}

这段代码会列出所有_posts文件夹下的文章,索引就生成完毕了。

撰写文章

文章的撰写在_posts文件夹下完成,可以使用Markdown语法。需要注意的是头信息和文件名称。Jekyll对于文件名称的要求是YYYY-MM-DD-name.md,例如:2017-04-01-Hello-World.md,而2017-4-1-Hello-World.md就不能被正确的识别。

本地调试

在博客根目录下,执行jekyll serve命令,然后访问localhost:4000,你就可以在本地预览博客的构建效果了。与此同时,更改文章或布局的内容都会即时的反映在预览中。

提交至Coding.net

在博客根目录下建立Git仓库,然后将内容提交到Coding.net上你创建的项目中。找到Pages服务页面,然后选择master分支并确定。在一段时间之后,你的博客就正式的构建好了,访问地址在第一部分中有说明。每次发布新文章都需要重复第六部分到第八部分。

关于非username.coding.me名称项目的特殊说明

如果读者在非username.coding.me项目中创建了自己的博客,会发现一种十分奇怪的现象:只有博客的主页可以访问,任何的跳转链接都会转到无效页面。这是因为超链接在跳转过程中是以username.coding.me为前缀的,没有后面的/项目名称部分。对于这种现象的解决方案为:

一、在_config.yml内新建一行,输入:baseurl: /项目名称

二、将所有的超链接都替换为:{{ "原超链接" | prepend: site.baseurl }}

然后提交更改,等待重新构建就可以成功的访问了。

题外话:

  1. 其实GitHub也是提供了Pages服务的,而且也支持Jekyll,但是由于国内一些特殊的原因,GitHub有时候会出现无法访问的现象,所以我将博客搭在了Coding.net上。使用Pages服务搭建博客好处在于静态网页访问速度快,而且不需要花钱租VPS,如果有能力租用VPS的话建立一个属于自己的可以互动的博客是个更好的选择。
  2. JekyllWriter也是一个不错的博客编写工具,不过可能由于我的操作问题,JekyllWriter发布的文章无法删除,而且布局并不是很自由,所以最后我放弃使用它了。有兴趣的读者可以尝试一下。
  3. 这是我第一次写博客,如果有什么建议可以发在评论里。