最简单的静态网站生成器： Pagic

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2859 天前的主题，其中的信息可能已经有所发展或是发生改变。

GitHub: https://github.com/xcatliu/pagic

最近很多地方用到了静态网站，但是 Jekyll 和 Hexo 都太重了，我完全不需要它的主题和博客文章功能，所以做了一个静态网站生成器的轮子，取名为 Pagic ，分享给大家。

The easiest way to generate static html page from markdown

特性

极简的使用方式：只需要 xxx.md 和 _layout.js 即可
其他静态资源文件直接复制到 public 文件夹
支持 sub page 和 sub layout ，每个 Markdown 文件会一级一级往上查找，选择最近的 _layout.js 作为模板
传入 relativeToRoot 到模板中，方便插入静态资源如 css
支持 cli 和 node modules 引入

第 1 条附言 · 2017-03-02 22:33:52 +08:00

Front matter 应该还是挺有用的，所以添加了对它的支持。

文档: https://github.com/xcatliu/pagic#front-matter
Issue: https://github.com/xcatliu/pagic/issues/1

也欢迎大家提 issue 或 pr

第 2 条附言 · 2017-03-03 22:07:45 +08:00

v0.3.0

重构为了 class，方便测试
修复 #2
提取处理内容的 processors，方便将来添加功能
添加了单元测试和 travis 集成

第 3 条附言 · 2017-03-03 22:13:01 +08:00

单元测试写的累死了。。。

还有三个 processors 的测试没写

第 4 条附言 · 2017-03-11 14:00:24 +08:00

v0.4.0

Breaking changes

不允许直接允许 pagic，必须接子命令 pagic build 或 pagic init
当作 node module 用的时候，只提供了类的方式

_config.yml

_config.yml 用来设置一些全局参数，默认为：

src_dir: src
public_dir: public

子命令

pagic build [options]

# -w, --watch  watch src dir change
# -s, --serve  serve public dir
# -p, --port   override default port

pagic init <dir>

静态

layout

生成器

Markdown

40 条回复 • 2017-03-11 15:57:11 +08:00

loading

2017-03-01 22:31:35 +08:00 via Android

看似简单

xcatliu

2017-03-01 22:38:03 +08:00

感觉我要把 V2EX 的创意页霸屏了 :)

xcatliu

2017-03-01 22:49:30 +08:00

感兴趣的可以用用，帮我测试下， issue 和 pr 都可以。
刚做出来应该有一些 bug

devtiange

2017-03-01 23:10:56 +08:00

https://harpjs.com/

xcatliu

2017-03-01 23:25:22 +08:00

@devtiange 感谢你分享的。不过我看了下，这个貌似和 Hexo 一样比较复杂。
我这个适用于简单的几个页面，比如一个小项目只需要几个 html 页面放在 github pages 上就行了。

xcatliu

2017-03-01 23:31:07 +08:00

@loading 实际上也很简单，站在其他开源项目的肩膀上，我这个只写了不到一百行代码。

laobubu

2017-03-01 23:56:45 +08:00

其实嘛我觉得 JEKYLL 不算复杂吧， SCSS ，模板等基础功能都有了，就差一个顺手的 boilerplate 了。

哦对了，还有 [海量的漂亮主题] :doge:

sammo

2017-03-01 23:58:11 +08:00 via iPhone

@devtiange harp 同好它是一个不专注于“博客型静态站点生成器”的静态站点生成器

xcatliu

2017-03-02 00:01:07 +08:00 via iPhone

@laobubu Jekyll 确实挺好用的，不过我更爱 Node.js 哈哈

windfarer

2017-03-02 00:01:38 +08:00 via Android

简直高产

xcatliu

2017-03-02 00:04:01 +08:00 via iPhone

@sammo 原来这么多人喜欢 Harp ，我之前都没用过。感谢分享了

xcatliu

2017-03-02 00:04:26 +08:00 via iPhone

@windfarer 都是些小玩意儿哈

fomenyesu

2017-03-02 09:15:58 +08:00

你不用工作吗？

xcatliu

2017-03-02 09:40:47 +08:00 via iPhone

@fomenyesu 用，晚上下班了搞出来的😂

fomenyesu

2017-03-02 10:27:30 +08:00

晚上下班不用撩妹吗？

xcatliu

2017-03-02 10:49:06 +08:00 via iPhone

@fomenyesu 也不能天天撩吧

dont27

2017-03-02 17:28:10 +08:00

稍微看一下源码没看出 title 变量是在哪里获得的= =||

const env = {};
const content = md.render(fs.readFileSync(fileResolvedPath, 'utf-8'), env);

markdown-it 会给 env 加上 title 属性么

xcatliu

2017-03-02 18:42:47 +08:00 via iPhone

@dont27 是插件 markdown-it-title 加上的

sox

2017-03-02 20:59:16 +08:00

想造一个类似 gatsby 但是基于 Vue.js 的 unversal 静态网站生成器 233

xcatliu

2017-03-02 21:49:51 +08:00

@sox 可以呀，支持

dont27

2017-03-03 09:50:37 +08:00

@xcatliu = =试了非全局安装方式，发现 readme.md 说的有点问题：
const pagic = requrie('pagic');

pagic({
srcDir: 'src',
distDir: 'public'
});

我看了源码 pagic 模块是一个返回 function 的 function ，刚开始照着 readme 一直没生成内容。后来改成这样就可以了。
pagic({
srcDir: 'src',
distDir: 'public'
})();

xcatliu

2017-03-03 10:06:01 +08:00 via iPhone

@dont27 感谢🙏已更新

yumemor

2017-03-03 14:39:03 +08:00

其实可以考虑添加更换中文字体的支持，目前很多静态博客都没有这个，因为中文字体酷太大如果只是添加 css ，文件会很大，如果使用按需添加就很方便而且这也很符合静态博客，因为在每一次的 generate 就可以进行字体处理。

之前用的 hexo 没有类似的插件，可以利用已经成熟的解决方案， http://font-spider.org/

xcatliu

2017-03-03 15:12:00 +08:00

@yumemor 感谢建议，目前来讲对于我这个轻量级的应用来说，更换字体这个功能太重了。话说可以给 Hexo 写个这个插件呀，应该不是很难。

yumemor

2017-03-03 15:29:59 +08:00

@xcatliu 对的，确实有这个打算之前尝试过不写插件先把所有的 md 文件中文字体找出来放在一个 html 里面让 spideer 处理然后手动把生成好的 woff 放在 font 里面，但是效率太低了 😹😹

xiaomibaobao

2017-03-03 16:14:52 +08:00

@xcatliu 给个 demo 页地址看看。

xcatliu

2017-03-03 22:04:58 +08:00

@xiaomibaobao 本来是有个 demo 的，后来想只是 markdown 转 html ，样式是需要自己写的，怕误导了大家，所以去掉 demo 了。

xcatliu

2017-03-03 22:06:00 +08:00

@xiaomibaobao 可以先看看 README.md 。

以后有精力我会做个介绍页面包含 demo 的。

xcatliu

2017-03-03 22:08:19 +08:00

@all ，更新了 v0.3.0 版本了

andysheng

2017-03-03 22:29:16 +08:00

支持支持用过大圣的 mobicss 很不错

xcatliu

2017-03-03 22:44:58 +08:00 via iPhone

@andysheng 感谢支持😍最开心的就是自己的项目被别人使用了😄欢迎在这个贴里加 Mobi.css 讨论群，我们正在开发 v2 版本 https://www.v2ex.com/t/343585

garipan

2017-03-03 23:08:14 +08:00

这就是我想要的东西啊！！！！！！！完全一致！！！！！

xcatliu

2017-03-03 23:13:26 +08:00 via iPhone

@garipan 哈哈，说明我们的眼光一致

CosmoX

2017-03-11 14:21:15 +08:00

已赞！

xcatliu

2017-03-11 14:31:30 +08:00

@CosmoX 😬

Jacky001

2017-03-11 14:41:53 +08:00 via iPhone

v2 里，楼主是我很佩服的一位。

xcatliu

2017-03-11 14:47:34 +08:00

第 4 条附言写错了
不允许直接允许 pagic => 不允许直接使用 pagic

xcatliu

2017-03-11 14:47:57 +08:00

@Jacky001 😁

pagict

2017-03-11 15:49:23 +08:00

楼主看我 ID

xcatliu

2017-03-11 15:57:11 +08:00

@pagict 哈哈，撞名了