Jekyll

最新推荐文章于 2020-10-24 10:45:16 发布

iteye_18428

最新推荐文章于 2020-10-24 10:45:16 发布

阅读量188

点赞数

分类专栏：前端开发文章标签： javascript php markdown ViewUI

本文链接：https://blog.csdn.net/iteye_18428/article/details/82408680

版权

前端开发专栏收录该内容

25 篇文章 0 订阅

订阅专栏

Jekyll 静态网站生成器。这里有个QuickStart。

Ruby环境安装

$ gem install jekyll

默认基于Liquid

语法：输出标记 & 标签标记

输出标记：由两个大括号分隔 {{ }}

标签标记：由大括号百分号分隔 {% %}

注意：Angular框架中使用了相同的标记{{}}，也就是Angular表达式并没有做为原始文本到Jekyll生成的静态模板，因为在Jekyll编译的时候{{ }}里面的内容会被Liquid编译。

我不想改变Angular的语法，所以想找找看有没有一个简单的方法改变Liquid表达符号。但没找到。

所幸Angular可以，这段代码放在angular.js后面。

var myapp;
myApp = angular.module('myApp', []);

myApp.config([
  '$interpolateProvider', function($interpolateProvider) {
    return $interpolateProvider.startSymbol('{(').endSymbol(')}');
  }
]);

@myApp = angular.module('myApp', [])

@myApp.config ['$interpolateProvider', ($interpolateProvider)->
  $interpolateProvider.startSymbol('{(').endSymbol(')}')
]

这样我们就能用{()}标记Angular表达式，而不被Liquid执行。

配置Markdown渲染引擎Rdiscount

$ gem install rdiscount

配置文件 _config.yml

markdown : rdiscount 。选取的是Rdiscount作为 Markdown标记语言的转换引擎。

pygments : true 。语法高亮。一般技术博客都要贴一些代码，执行jekyll的时候会通过 {% highlight %} 标签自动生成代码高亮的样式。

permalink : none 。博客链接格式。none格式输出比较简洁 /:categories/:title.html。关于这个参数的文档 http://jekyllrb.com/docs/permalinks/。

encoding : utf-8 。编码，中文网站需要设置成utf-8，不然会出现乱码。

destination : ./_yourweb 。指定生成的静态网页的文件夹位置。默认是_site。

exclude : jekyll 。编译时将忽略这些文件

port : 1105 。注意避免本机上的常用端口，比如：8080、 3000

还可以定义一些参数，供Grunt.js中使用，比如：site: grunt.file.readYAML('_config.yml')

# Dependencies
markdown:         rdiscount
pygments:         true

# Permalinks http://jekyllrb.com/docs/permalinks/.  
permalink:        none

# Global Configuration
encoding: 		  utf-8

# Server
destination:      ./_yourweb
exclude: 		  ['less', 'Gruntfile.js', 'package.json', 'css', 'images', 'js', 'node_modules', 'validation-report.json', 'validation-status.json']
port:             1105

# Custom vars
current_version:  0.1.0
repo:             https://github.com/nickname/yourweb

download_dist:    https://github.com/nickname/yourweb/releases/download/v0.1.0/yourweb-0.1.0-dist.zip
blog:             https://www.yourblog.com/yourweb

cdn_js:          https://yourcdn/yourweb/css/yourweb.min.js
cdn_css:          https://yourcdn/yourweb/css/yourweb.min.css
static_source:    http://yourcdn/yourweb/

详细参照配置参数文档：http://jekyllrb.com/docs/configuration/

语法高亮pygments

我是在Windows下配置的。

在这里下载 Windows 下的 Python 安装包，我下的版本是基于Python2.7.6（装过3.3版本，不能正确编译），双击安装。环境变量 Path添加 C:\Python27，在命令行中运行
```
 python -V
```
输出 Python 2.7.6表明安装成功。
然后使用 easy_install 来安装 Pygments，easy_install 是 Python 里的一个模块安装工具，类似 nodejs 的 npm 和 ruby 的 gem，先在这里（页面最底部）下载setuptools-2.1.tar.gz (md5)，解压后，在cmd下执行 python ez_setup.py，即可自动安装setuptools。目前没有直接的exe安装版本。

并把路径 C:\Python27\Scripts 添加到环境变量 Path。
在命令行中运行
```
 easy_install Pygments
```
待执行完毕就装好了 Pygments。
然后我们要在 Jekyll 的配置文件 _config.yml 中设置打开 Pygments
```
 pygments: true
```
在 Pygments demo 上根据不同语言找到自己喜欢的高亮方案，比如 friendly，然后进到我们的网站目录，运行
```
 pygmentize -S friendly -f html > css/pygments-friendly.css
```
并把生成的样式文件加到我们的网页中。如果提示找不到指定路径，先建好对应的文件夹就可以了。
需要语法高亮的代码片段要放在标签对 <% highlight language %> 和 <% endhighlight %> 之间。
cmd下运行 gem install pygments.rb --version "=0.5.0"

可在对应文件夹下的命令行执行： jekyll serve 或者通过Grunt任务： grunt-jekyll 再watch一下相当好用，

jekyll: {
      docs: {}
    },
    watch:{
      recess: {
        files: 'less/*.less',
        tasks: ['recess']
      },
      jekyll: {
        files: ['_includes/**/*.html', '_layouts/**/*.html', '*.html'],
        tasks: ['jekyll']
      },
      controller: {
        files: 'js/controller/*.js',
        tasks: ['clean:controller', 'concat:controller', 'uglify:controller']
      }
    }

静态网站的好处是显而易见的（zz）：

预生成
快速访问：静态HTML页面的载入速度理所当然地更快——因为它
弱服务器需求：无需在服务器端执行任何代码，大大地减轻了服务器的压力
高安全性：静态页面有着与生俱来的安全性。不像WordPress或者其他任何动态的框架，静态站点本身并不存在安全漏洞的问题。
版本控制：你无需通过WordPress来维护一整个复杂的数据库——静态站点的内容完全仅由文件系统中独立的目录和文件构成，这意味着你不但可以使用Shell、grep、sed、awk这些传统的Unix工具对它们执行操作和维护，更可以使用 Git 这样的分布式版本控制系统来管理它们，并且享受版本控制所带来的一切好处，如同维护任何软件项目的源代码库一样。你甚至可以重新生成以前任意时间点的整个网站！
简单部署：一旦静态网站生成以后，任何Web服务器都能够轻易地部署静态站点，而无须在服务器端安装配置其他任何多余的东西。你所需要做的仅仅是通过git、rsync甚至ftp简单地上传文件到你的托管服务器。相比之下，WordPress博客的维护显得复杂得多，你可能需要在你的开发服务器和托管服务器上安装、配置一整套LAMP+WordPress平台，并经常性地升级版本和维护。这是个繁重的技术活。
文本编辑器和自由格式书写：也许你不这么认为，但是作为一个hacker而言，在浏览器中一个300x300的文本区里码字写博客并非一件很酷的事情——如果你使用Jekyll这样的静态网站生成器，你就可以用你喜欢的任何文本编辑器（vi、emacs……），用你习惯的标记语言以书写文本文件的方式来直接写博客文章（就好像你平常写代码一样），避免了使用那些简陋和功能有限的Web界面。

一个Quick Start： http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll/

Scafford：http://jekyllbootstrap.com/usage/jekyll-quick-start.html