特别提醒:不要把时间浪费在迁移平台上!

问题发生: 近一个月来,发现github的页面不会更新了,试了很多方式,都不更新——后来,才想起升级过git版本,新版本快速提交时对深度路径压缩不正确,导致出问题!解决办法是删了该目录后提交,再恢复该目录,再提交。

折腾过程中,顺便就查了下各个语言的生成器,量真多,几乎每个语言都有若干个。 个人主要关注几个关注量大,且所用语言个人比较看好或者常用的。

别人认为的槽点如下:

  • ruby的中文编码问题:不支持中文的url路径?还有tag名称如果设置为中文,则不可以使用site.tags.TAG这种用法筛选文章,简直就是坑。
  • 功能还是比较欠缺。只有一个分页器?还只能在index下分页?还有那个坑爹的liquid模板,不如直接上erb(当然作者是为了github的安全着想)。
  • 不想装ruby
  • 不熟悉ruby

ruby

jekyll 本人第一个深入使用的静态站生成器,使用量极高

模板语言erb语法:属于Ruby标准库中的东西,不需要单独安装,模板中动态脚本的写法和JSP基本一个模子扒出来的。

<% 写逻辑脚本(Ruby语法) %>
<%= 直接输出变量值或运算结果 %>

js

有好多个:

consolidate.js 模板中介

liveload.js 根据更改,可即时刷新

生成静态站:coffeescript

前端:angular+动态响应

coffeescript

其他

常见的

另外,还有几个特别的,比如直接用makefile来生成的

为何选用metalsmith

metalsmith的特点:

几个插件化比较彻底的项目:gulp 插件化构建测试套装工具,consolidate.js模板,metalsmith构建中心。

安装环境

一,安装 node.js,安装方法见nodejs文档。

二,然后,安装metalsmith外

$ npm install metalsmith -g

三,安装一些需要的插件:下面列出一些一般需要的。

内容:

页面部件:

用于辅助编写

用于压缩生成代码所需的插件:

用于测试

新建项目

可以从metalsmith源码中的example中复制一份,然后根据需要修改。

也可以按照新建一个 nodejs 项目一样,新建一个,这样通用性较好。

最终的文件结构可能如下:和一般的nodejs项目类似。

.
|– source/     需要被转换的内容
    |– content/
    |– images/
    |– styles/
    |_ scripts/
|– templates/    模板
|   |_ partials/
|– build/       生成的静态站点
    |– content/
    |– images/
    |– styles/
    |_ scripts/
|– node_modules/    开发所需的模块        
|– config.json
|– index.js     项目启动文件,metalsmith总控配置就放在这
|_ package.json    项目配置文件

项目所需插件:package.json

编辑 package.json,添加所需的依赖模块,然后安装

npm install --save-dev metalsmith

配置:index.js

编辑 index.js

var Metalsmith = require('metalsmith');
Metalsmith(__dirname)
  .destination('./build')
  .use(drafts())
  .use(markdown())
  .use(permalinks('posts/:title'))
  .use(templates('ejs'))
  .build();

各句解释:

如果不指定转换模板,则只是简单的 复制源码文件夹 到 输出文件夹。

转换模板语言选用

metalsmith用consolidate.js,来作为各种模板语言中介。

模板引擎会根据每个文件头部的 yaml格式 的 设定,进行转换。

模板语言是生成的时候要运行的部分。

js则是用户打开的时候才会用的。

需要注意:

要是当初html设计成类似lisp那样的标识前置简化语法,可以省好多,没办法,html是事实标准,就只能跟标准妥协了。

另外,觉得php其实是一个伪装成编程语言的模板语言!!(带交互响应的)

<?php xxx ?>

如果把php当成静态站的模板,需要剥离php的交互响应部分,把需要高度交互响应的,换用性能更强劲的部件。而不极限于php。

技术演进: php/asp+html+js+css,重心在php

由于普及率问题,现在演变成了: html+css+js+各种js模板。重心在js

ejs模板语言

ejs特点:不支持模板继承,但可用include实现类似效果。可自定义标记,可用于客户端

// 用=号输出,会被escape转义编码
<%= 输出变量 %>
// 用“-”输出原始内容, 不会被escape
<%-输出变量是不会对 & 等符号进行转义的
<%# 注释 %>
<%%  输出一 <%
// 选择器用点号 . 
<% if (names.length) { %>
  <ul>
    <% names.forEach(function(name){ %>
      <li foo='<%= name + "'" %>'><%= name %></li>
    <% }) %>
  </ul>
  <% } %>

引用 片段

<ul>
  <% users.forEach(function(user){ %>
    <% include user/show %>
  <% }) %>
</ul>

生成

使用nodejs来生成

node index.js

也可用metalsmith,前提是配置内容写在 metalsmith.json

metalsmith

测试和预览

选用 gulp.js 来测试。到目录下,然后安装 gulp.js

$ cd <YOUR_PROJECT>
$ npm install gulp --save-dev

然后新建一文件 gulpfile.js ,内容填入:

参考