6

我的jekyll笔记

 3 years ago
source link: https://yanhaijing.com/jekyll/2016/02/21/my-jekyll/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
我的jekyll笔记
21 February 2016
号外号外:我的新书《React状态管理与同构实战》出版啦!!!快点我查看

我的博客用的就是用jekyll搭建的,有几年历史了,同时《JavaScript简易教程》也是基于jekyll搭建的,可以说我使用jekyll很长时间了,也算是比较熟悉了,最近我打算基于jekyll搭建一个新的东西,但却发现自己平时只是使用而且,竟然记不清搭建的流程,这篇博客就是由此产生。

本文介绍jekyll的安装,使用的方法,记录下来供自己和大家使用。

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

217.png

jekyll是基于ruby开发的,所以依赖ruby环境,并且需要通过gem进行安装,具体过程我在下面两篇文章中有详细介绍,这里不在展开写了。

ruby环境安装好后,可以通过下面的命令安装jekyll

gem install jekyll # 或下面的命令

也可以指定安装版本

gem install jekyll --version=2.5.3

安装过程可能很慢,墙的问题在上面的文章中有解决办法,安装好后在命令行输入下面的命令可以查看是否安装成功

jekyll --version

一般你会看到类似下面的输出,则代表你安装成功了,否则可能需要重装

jekyll x.x.x # x.x.x 代表你安装的版本

第一步创建项目

jekyll new myjekyll

切换到myjekyll目录,运行下面的命令即可

jekyll server

然后打开浏览器的127.0.0.1:4000,即可查看网站效果。

记录一下常用的命令。

jekyll help # 查看帮助
jekyll help subcommand # 查看子命令的帮助信息

jekyll new site-name # 创建一个新的

jekyll build # 构建

jekyll server # 开启本地服务器查看效果
jekyll server -P 4001 # 指定端口
jekyll server -w # 文件发生变化时,自动重新编译

如果你不了解markdownliquid,你可能需要先了解下,我这里简单介绍一下。

markdown是写文章的神器,可以用简单的文本格式代替html标记。

比如我们想写一个列表,只需像下面这样即可

- 列表项
- 列表项

最终会编译成下面的html

<li>列表项</li>	
<li>列表项</li>

如果你想写博客那么可能需要掌握这个,可以专注写文章,而不是写那么冗余的html标记,markdown几乎支持常用的html标签,具体的语法可以查看相关链接里给出的网址。

liquid是一个模版语言,是jekyll支持的一种,有点类似smarty,只不过是静态的模版语言,只能在编译的过程中进行替换。

<h2>我的jekyll笔记</h2>

上面的代码最终会编译成下面的代码,假设page.title = 标题

<h2>标题</h2>

liquid除了支持变量替换外还支持逻辑语法,具体可以查看相关链接中的链接。

原文网址:http://yanhaijing.com/jekyll/2016/02/21/my-jekyll/

微信公众号:颜海镜关注微信公众号 颜海镜微信支付二维码赞赏支持 微信扫一扫

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK