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
相关推荐
jekyll-admin 是一个 jekyll 插件,为用户提供了传统 CMS(内容管理系统)风格的图形化界面来创作内容和管理 jekyll 网站。该项目分为两部分。基于 Ruby 的 HTTP API 处理 jekyll 和文件系统的操作部分,以及在这个 ...
Jekyll 博客管理工具
Windows上安装Jekyll所需软件包含ruby 、DevKit、python、pip 目录 Jekyll介绍 安装Ruby 安装DevKit 安装Jekyll 安装Python 安装pip 运行Jekyll 博文参考...
awesome-jekyll-editors, 一群优秀的Jekyll编辑 Awesome系列 @ 行星 Jekyll出色的Jekyll编辑器一群优秀的Jekyll编辑 捐赠欢迎。 有什么遗漏发送请求请求。 谢谢。"视觉"编辑器n 工具开源★565管理 ( github: 散文 ★...
startbootstrap-clean-blog-jekyll, 一个全新的博客主题 Jekyll Bootstrap 启动 Bootstrap 博客官方版本博客是一个时尚的,反应性的博客主题,为 Bootstrap 创建,由启动 Bootstrap 。 这个主题有一个博客主页,关于...
jekyll-snippets, Jekyll站点常用Fragment库 Fragment我是Jekyll的粉丝。 我已经在博客上建立了自己的博客,以及 Bootstrap 文档的文档和一个系列的主题文件。 这个库是一个常用的Jekyll Fragment库。电子邮件内容...
jekyll 简洁博客主题
jekyll-bootstrap-theme, jekyll Bootstrap/( sass版本) jekyll-bootstrap-themeJekyll Bootstrap/;参见现场演示 @ henrythemes.github.io/jekyll-bootstrap-theme 注意:主题使用 Bootstrap/scss
jekyllthemes, Jekyll博客的最佳外观主题目录 主题Jekyll博客的最佳外观主题目录提交主题有一个你想分享的主题?fork 上的站点在 _posts 目录中创建一个新帖子并填写相关的YAML字段制作 250 x200缩略图并将它的放到...
Jekyll-Base, Jekyll的基本文件和文件夹结构 这是一个将让你开始的基础,由 Daniel McGraw ( @danielmcgraw ) 创建。用法查看我的文章系列如何使用Jekyll创建你自己的Jekyll博客。结构. |--. gitignore
jekyll-admin 是一个 jekyll 插件,为用户提供了传统 CMS(内容管理系统)风格的图形化界面来创作内容和管理 jekyll 网站
jekyll-now, 在几分钟内,不接触 命令行,构建一个Jekyll博客 现在的Jekyll是一个适合GitHub托管博客( Jekyll )的网站生成器通过消除很多前端设置,你可以更轻松地创建你的osm博客,从而创建你的博客。你不需要触摸 ...
solid-jekyll, 实体主题( 按 blacktie.co )的一个 Jekyll 实体 Bootstrap的主题。 这是一个 Jekyll的端口,它是由 blacktie.co的实体主题。 访问 live演示插件以获得预览。##Usage 这个主题可以自定义。构建和发布,...
Atom-jekyll-feed.zip,A Jekyll plugin to generate an Atom (RSS-like) feed of your Jekyll postsJekyll源插件,atom是一个用web技术构建的开源文本编辑器。
Atom-jekyll-atom.zip,在atom中使用jekyll的工具和片段的集合杰基尔原子,atom是一个用web技术构建的开源文本编辑器。
Pixyll 是一个简单、漂亮的 Jekyll 主题,重点是凸显内容。 标签:Pixyll
Jekyll Now 让你在几分钟内构建Jekyll博客,而不用接触命令行
H2O 扁平化设计、响应式的Jekyll主题