Jekyll

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下配置的。

1. 在这里下载 Windows 下的 Python 安装包，我下的版本是基于Python2.7.6（装过3.3版本，不能正确编译），双击安装。环境变量 Path添加 C:\Python27，在命令行中运行

    python -V 

   输出 Python 2.7.6表明安装成功。

2. 然后使用 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。

3. 在命令行中运行

    easy_install Pygments 

   待执行完毕就装好了 Pygments。

4. 然后我们要在 Jekyll 的配置文件 _config.yml 中设置打开 Pygments

    pygments: true 

5. 在 Pygments demo 上根据不同语言找到自己喜欢的高亮方案，比如 friendly，然后进到我们的网站目录，运行

    pygmentize -S friendly -f html > css/pygments-friendly.css 

   并把生成的样式文件加到我们的网页中。 如果提示找不到指定路径，先建好对应的文件夹就可以了。

6. 需要语法高亮的代码片段要放在标签对 <% highlight language %> 和 <% endhighlight %> 之间。

7. cmd下运行 gem install pygments.rb --version "=0.5.0" 

8. 可在对应文件夹下的命令行执行： 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