使用 Jekyll 与 GitHub Pages 轻松搭建属于自己的网站(2)

Rate this post

这是「使用 Jekyll 与 GitHub Pages 轻松搭建属于自己的网站」系列的第二篇文章。

上一篇为大家简单介绍了如何快速地使用他人的主题快速搭建一个自己的网站。

前言

相信经过上篇文章的简单介绍,各位已经拥有了一个自己的网站。

但是问题也是显而易见的,目前我们的网站还只有他人模板中自带的内容,那么我们如何才能够用自己的文件将其替换掉,从而将它修改成属于自己的专属网站呢?

不要急,系列标题中的另一位重量级嘉宾还没出现,我们目前还不能够随心所欲地进行修改。

那么接下来,我就先为大家介绍一下 Jekyll 以及一些基本用法。

Jekyll

Jekyll究竟是什么?

Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。

以上内容摘自Jekyllcn.com,如果你有兴趣了解更多内容也可以进入这个网站自己了解一下。

简单来说,按照一定的模板目录,Jekyll 就可以将内容转化成一个静态网站。

我们上一篇中使用的模板就是按照 Jekyll 的目录来布局的。

快速指南

以下是一个获取最简单 Jekyll 模板并生成静态页面的方法。

~ $ gem install jekyll
~ $ jekyll new myblog
~ $ cd myblog
~/myblog $ jekyll serve
# => Now browse to http://localhost:4000

如果一切顺利,你现在应该能够打开一个本地的页面了。

基本用法

安装了 Jekyll 的 Gem 包之后,就可以在命令行中使用 Jekyll 命令了。有以下用法:

$ jekyll build
# => 当前文件夹中的内容将会生成到 ./site 文件夹中。

$ jekyll build --destination <destination>
# => 当前文件夹中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --source <source> --destination <destination>
# => 指定源文件夹<source>中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --watch
# => 当前文件夹中的内容将会生成到 ./site 文件夹中,
#    查看改变,并且自动再生成

Jekyll 同时也集成了一个开发用的服务器,你可以在本地使用浏览器进行预览。

$ jekyll serve
# => 一个开发服务器将会运行在 http://localhost:4000/

$ jekyll serve --detach
# => 功能和`jekyll serve`命令相同,但是会脱离终端在后台运行。
#    如果你想关闭服务器,可以使用`kill -9 1234`命令,"1234" 是进程号(PID)。
#    如果你找不到进程号,那么就用`ps aux | grep jekyll`命令来查看,然后关闭服务器。[更多](http://unixhelp.ed.ac.uk/shell/jobz5.html).

$ jekyll serve --watch
# => 和`jekyll serve`相同,但是会查看变更并且自动再生成。

目录结构

Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是: 你用你最喜欢的标记语言来写文章,可以是 Markdown,也可以是 Textile,或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置URL路径, 你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现,最终生成的静态页面就是你的成品了。

一个基本的 Jekyll 网站的目录结构一般是像这样的:

.
├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
|   └── members.yml
├── _site
└── index.html

结尾

这篇文章就先到这里,相信你也需要一段时间来进行理解和消化。

下一篇文章将会讲解如何进行编辑操作从而修改模板为自己的网站。

如果你有任何问题,欢迎写邮件和我联系。我的邮箱是 97hexi@gmail.com.

harryho97

201801192126

(本文部分内容参考了Jekyllcn.com,在此感谢 @xcatliu 以及其他开源爱好者的翻译。)