V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
xcatliu
V2EX  ›  分享创造

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

  •  3
     
  •   xcatliu ·
    xcatliu · 2017-03-01 22:22:33 +08:00 · 12665 次点击
    这是一个创建于 2824 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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>
    
    40 条回复    2017-03-11 15:57:11 +08:00
    loading
        1
    loading  
       2017-03-01 22:31:35 +08:00 via Android   ❤️ 2
    看似简单
    xcatliu
        2
    xcatliu  
    OP
       2017-03-01 22:38:03 +08:00   ❤️ 1
    感觉我要把 V2EX 的创意页霸屏了 :)
    xcatliu
        3
    xcatliu  
    OP
       2017-03-01 22:49:30 +08:00
    感兴趣的可以用用,帮我测试下, issue 和 pr 都可以。
    刚做出来应该有一些 bug
    devtiange
        4
    devtiange  
       2017-03-01 23:10:56 +08:00   ❤️ 1
    xcatliu
        5
    xcatliu  
    OP
       2017-03-01 23:25:22 +08:00
    @devtiange 感谢你分享的。不过我看了下,这个貌似和 Hexo 一样比较复杂。
    我这个适用于简单的几个页面,比如一个小项目只需要几个 html 页面放在 github pages 上就行了。
    xcatliu
        6
    xcatliu  
    OP
       2017-03-01 23:31:07 +08:00
    @loading 实际上也很简单,站在其他开源项目的肩膀上,我这个只写了不到一百行代码。
    laobubu
        7
    laobubu  
       2017-03-01 23:56:45 +08:00   ❤️ 1
    其实嘛我觉得 JEKYLL 不算复杂吧, SCSS ,模板等基础功能都有了,就差一个顺手的 boilerplate 了。

    哦对了,还有 [海量的漂亮主题] :doge:
    sammo
        8
    sammo  
       2017-03-01 23:58:11 +08:00 via iPhone   ❤️ 1
    @devtiange harp 同好 它是一个不专注于“博客型静态站点生成器”的静态站点生成器
    xcatliu
        9
    xcatliu  
    OP
       2017-03-02 00:01:07 +08:00 via iPhone
    @laobubu Jekyll 确实挺好用的,不过我更爱 Node.js 哈哈
    windfarer
        10
    windfarer  
       2017-03-02 00:01:38 +08:00 via Android   ❤️ 1
    简直高产
    xcatliu
        11
    xcatliu  
    OP
       2017-03-02 00:04:01 +08:00 via iPhone
    @sammo 原来这么多人喜欢 Harp ,我之前都没用过。感谢分享了
    xcatliu
        12
    xcatliu  
    OP
       2017-03-02 00:04:26 +08:00 via iPhone
    @windfarer 都是些小玩意儿哈
    fomenyesu
        13
    fomenyesu  
       2017-03-02 09:15:58 +08:00   ❤️ 1
    你不用工作吗?
    xcatliu
        14
    xcatliu  
    OP
       2017-03-02 09:40:47 +08:00 via iPhone
    @fomenyesu 用,晚上下班了搞出来的😂
    fomenyesu
        15
    fomenyesu  
       2017-03-02 10:27:30 +08:00   ❤️ 1
    晚上下班不用撩妹吗?
    xcatliu
        16
    xcatliu  
    OP
       2017-03-02 10:49:06 +08:00 via iPhone
    @fomenyesu 也不能天天撩吧
    dont27
        17
    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
        18
    xcatliu  
    OP
       2017-03-02 18:42:47 +08:00 via iPhone
    @dont27 是插件 markdown-it-title 加上的
    sox
        19
    sox  
       2017-03-02 20:59:16 +08:00
    想造一个类似 gatsby 但是基于 Vue.js 的 unversal 静态网站生成器 233
    xcatliu
        20
    xcatliu  
    OP
       2017-03-02 21:49:51 +08:00
    @sox 可以呀,支持
    dont27
        21
    dont27  
       2017-03-03 09:50:37 +08:00   ❤️ 1
    @xcatliu = =试了非全局安装方式,发现 readme.md 说的有点问题:
    const pagic = requrie('pagic');

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

    我看了源码 pagic 模块是一个返回 function 的 function ,刚开始照着 readme 一直没生成内容。后来改成这样就可以了。
    pagic({
    srcDir: 'src',
    distDir: 'public'
    })();
    xcatliu
        22
    xcatliu  
    OP
       2017-03-03 10:06:01 +08:00 via iPhone
    @dont27 感谢🙏已更新
    yumemor
        23
    yumemor  
       2017-03-03 14:39:03 +08:00   ❤️ 1
    其实可以考虑添加更换中文字体的支持,目前很多静态博客都没有这个,因为中文字体酷太大 如果只是添加 css ,文件会很大,如果使用按需添加 就很方便 而且这也很符合静态博客,因为在每一次的 generate 就可以进行字体处理。

    之前用的 hexo 没有类似的插件, 可以利用已经成熟的解决方案 , http://font-spider.org/
    xcatliu
        24
    xcatliu  
    OP
       2017-03-03 15:12:00 +08:00
    @yumemor 感谢建议,目前来讲对于我这个轻量级的应用来说,更换字体这个功能太重了。话说可以给 Hexo 写个这个插件呀,应该不是很难。
    yumemor
        25
    yumemor  
       2017-03-03 15:29:59 +08:00
    @xcatliu 对的,确实有这个打算 之前尝试过不写插件 先把所有的 md 文件中文字体找出来放在一个 html 里面 让 spideer 处理 然后手动把生成好的 woff 放在 font 里面,但是效率太低了  😹😹
    xiaomibaobao
        26
    xiaomibaobao  
       2017-03-03 16:14:52 +08:00
    @xcatliu 给个 demo 页地址看看。
    xcatliu
        27
    xcatliu  
    OP
       2017-03-03 22:04:58 +08:00
    @xiaomibaobao 本来是有个 demo 的,后来想只是 markdown 转 html ,样式是需要自己写的,怕误导了大家,所以去掉 demo 了。
    xcatliu
        28
    xcatliu  
    OP
       2017-03-03 22:06:00 +08:00
    @xiaomibaobao 可以先看看 README.md

    以后有精力我会做个介绍页面包含 demo 的。
    xcatliu
        29
    xcatliu  
    OP
       2017-03-03 22:08:19 +08:00
    @all ,更新了 v0.3.0 版本了
    andysheng
        30
    andysheng  
       2017-03-03 22:29:16 +08:00   ❤️ 1
    支持支持 用过大圣的 mobicss 很不错
    xcatliu
        31
    xcatliu  
    OP
       2017-03-03 22:44:58 +08:00 via iPhone
    @andysheng 感谢支持😍最开心的就是自己的项目被别人使用了😄欢迎在这个贴里加 Mobi.css 讨论群,我们正在开发 v2 版本 https://www.v2ex.com/t/343585
    garipan
        32
    garipan  
       2017-03-03 23:08:14 +08:00   ❤️ 1
    这就是我想要的东西啊!!!!!!!完全一致!!!!!
    xcatliu
        33
    xcatliu  
    OP
       2017-03-03 23:13:26 +08:00 via iPhone
    @garipan 哈哈,说明我们的眼光一致
    CosmoX
        34
    CosmoX  
       2017-03-11 14:21:15 +08:00   ❤️ 1
    已赞!
    xcatliu
        35
    xcatliu  
    OP
       2017-03-11 14:31:30 +08:00
    @CosmoX 😬
    Jacky001
        36
    Jacky001  
       2017-03-11 14:41:53 +08:00 via iPhone   ❤️ 1
    v2 里,楼主是我很佩服的一位。
    xcatliu
        37
    xcatliu  
    OP
       2017-03-11 14:47:34 +08:00
    第 4 条附言写错了
    不允许直接允许 pagic => 不允许直接使用 pagic
    xcatliu
        38
    xcatliu  
    OP
       2017-03-11 14:47:57 +08:00
    @Jacky001 😁
    pagict
        39
    pagict  
       2017-03-11 15:49:23 +08:00   ❤️ 1
    楼主看我 ID
    xcatliu
        40
    xcatliu  
    OP
       2017-03-11 15:57:11 +08:00
    @pagict 哈哈,撞名了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2015 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 00:53 · PVG 08:53 · LAX 16:53 · JFK 19:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.