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

 

你可能感兴趣的:(前端开发)