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

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

  •  3
     
  •   xcatliu · 83 天前 · 5054 次点击
    这是一个创建于 83 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 条附言  ·  82 天前
    Front matter 应该还是挺有用的,所以添加了对它的支持。

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

    也欢迎大家提 issue 或 pr
    第 2 条附言  ·  81 天前

    v0.3.0

    • 重构为了 class,方便测试
    • 修复 #2
    • 提取处理内容的 processors,方便将来添加功能
    • 添加了单元测试和 travis 集成
    第 3 条附言  ·  81 天前

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

    还有三个 processors 的测试没写

    第 4 条附言  ·  73 天前

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

    哦对了,还有 [海量的漂亮主题] :doge:
        8
    sammo   82 天前 via iPhone   ♥ 1
    @devtiange harp 同好 它是一个不专注于“博客型静态站点生成器”的静态站点生成器
        9
    xcatliu   82 天前 via iPhone
    @laobubu Jekyll 确实挺好用的,不过我更爱 Node.js 哈哈
        10
    windfarer   82 天前 via Android   ♥ 1
    简直高产
        11
    xcatliu   82 天前 via iPhone
    @sammo 原来这么多人喜欢 Harp ,我之前都没用过。感谢分享了
        12
    xcatliu   82 天前 via iPhone
    @windfarer 都是些小玩意儿哈
        13
    fomenyesu   82 天前   ♥ 1
    你不用工作吗?
        14
    xcatliu   82 天前 via iPhone
    @fomenyesu 用,晚上下班了搞出来的😂
        15
    fomenyesu   82 天前   ♥ 1
    晚上下班不用撩妹吗?
        16
    xcatliu   82 天前 via iPhone
    @fomenyesu 也不能天天撩吧
        17
    dont27   82 天前
    稍微看一下源码没看出 title 变量是在哪里获得的= =||

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

    markdown-it 会给 env 加上 title 属性么
        18
    xcatliu   82 天前 via iPhone
    @dont27 是插件 markdown-it-title 加上的
        19
    sox   82 天前
    想造一个类似 gatsby 但是基于 Vue.js 的 unversal 静态网站生成器 233
        20
    xcatliu   82 天前
    @sox 可以呀,支持
        21
    dont27   81 天前   ♥ 1
    @xcatliu = =试了非全局安装方式,发现 readme.md 说的有点问题:
    const pagic = requrie('pagic');

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

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

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

    以后有精力我会做个介绍页面包含 demo 的。
        29
    xcatliu   81 天前
    @all ,更新了 v0.3.0 版本了
        30
    andysheng   81 天前   ♥ 1
    支持支持 用过大圣的 mobicss 很不错
        31
    xcatliu   81 天前 via iPhone
    @andysheng 感谢支持😍最开心的就是自己的项目被别人使用了😄欢迎在这个贴里加 Mobi.css 讨论群,我们正在开发 v2 版本 https://www.v2ex.com/t/343585
        32
    garipan   80 天前   ♥ 1
    这就是我想要的东西啊!!!!!!!完全一致!!!!!
        33
    xcatliu   80 天前 via iPhone
    @garipan 哈哈,说明我们的眼光一致
        34
    CosmoX   73 天前   ♥ 1
    已赞!
        35
    xcatliu   73 天前
    @CosmoX 😬
        36
    Jacky001   73 天前 via iPhone   ♥ 1
    v2 里,楼主是我很佩服的一位。
        37
    xcatliu   73 天前
    第 4 条附言写错了
    不允许直接允许 pagic => 不允许直接使用 pagic
        38
    xcatliu   73 天前
    @Jacky001 😁
        39
    pagict   73 天前   ♥ 1
    楼主看我 ID
        40
    xcatliu   73 天前
    @pagict 哈哈,撞名了
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1569 人在线   最高记录 2466   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.7.5 · 65ms · UTC 14:50 · PVG 22:50 · LAX 07:50 · JFK 10:50
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1