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

分享我用 Deno 写的静态网站生成器 - Pagic

  •  3
     
  •   xcatliu ·
    xcatliu · 2020-05-21 19:25:35 +08:00 · 5422 次点击
    这是一个创建于 1406 天前的主题,其中的信息可能已经有所发展或是发生改变。

    多年前写过一个静态网站生成器,取名为 Pagic,如今有一些新的想法,正好赶上 Deno 发布,于是用 Deno 重写了一番,并添加了一些新 Feature 。

    欢迎大家来试用~

    特性

    • 极简的使用方式:只需要 xxx.md 和 _layout.js 即可
    • 支持 React component 生成一个页面
    • 其他静态资源文件直接复制到 public 文件夹
    • 支持 sub pages layouts,每个 Markdown 或 React component 会一级一级往上查找,选择最近的 _layout.js 作为布局模版
    • 支持 frontMatter

    快速开始

    安装

    # Install deno https://deno.land/#installation
    curl -fsSL https://deno.land/x/install/install.sh | sh
    # Install pagic
    deno install --unstable --allow-read --allow-write --allow-net https://raw.githubusercontent.com/xcatliu/pagic/master/pagic.ts
    

    Markdown + Layout => HTML

    目录结构如下:

    docs/
    ├── public/
    └── src/
        ├── _layout.tsx
        └── index.md
    

    src/_layout.tsx 是一个简单的 React 组件:

    // @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
    import React from 'https://dev.jspm.io/[email protected]';
    import { PagicLayout } from 'https://raw.githubusercontent.com/xcatliu/pagic/master/pagic.ts';
    
    const Layout: PagicLayout = ({ title, content }) => (
      <html>
        <head>
          <title>{title}</title>
          <meta charSet="utf-8" />
        </head>
        <body>{content}</body>
      </html>
    );
    
    export default Layout;
    

    src/index.md 是一个简单的 markdown 文件

    # Pagic
    
    The easiest way to generate static html page from markdown, built with Deno! 🦕
    

    运行:

    pagic build
    

    我们将会得到一个 public/index.html 文件:

    docs/
    ├── public/
    |   └── index.html
    └── src/
        ├── _layout.tsx
        └── index.md
    

    它的内容是:

    <html>
      <head>
        <title>Pagic</title>
        <meta charset="utf-8" />
      </head>
      <body>
        <article>
          <h1 id="pagic">Pagic</h1>
          <p>The easiest way to generate static html page from markdown, built with Deno! 🦕</p>
        </article>
      </body>
    </html>
    

    其他特性请到 GitHub 上查看。

    规划

    • [x] 支持 plugins
    • [ ] 支持 themes
    • [ ] 丰富 PagicPluginCtx,使其能支持目录列表等功能
    • [ ] 现在 React 仅作为模版引擎,其中的逻辑不会构建为 js 放到页面中,故下一步需要加上此功能
    • [ ] 支持单页应用模式

    吐槽

    Deno 本身很好用,但生态十分缺失,我踩了无数个坑才完成了第一个版本,以后再写个文章细说。

    历史回顾

    10 条回复    2020-05-29 21:09:56 +08:00
    myd
        1
    myd  
       2020-05-21 19:34:29 +08:00
    赞一个,继续加油
    mathzhaoliang
        2
    mathzhaoliang  
       2020-05-21 20:31:43 +08:00
    支持调用 pandoc 外部渲染吗
    ares586
        3
    ares586  
       2020-05-22 10:06:20 +08:00
    冲着敢用 Deno,赞一个
    xcatliu
        4
    xcatliu  
    OP
       2020-05-22 10:07:54 +08:00 via iPhone
    @mathzhaoliang 没用过,不太清楚
    mathzhaoliang
        5
    mathzhaoliang  
       2020-05-22 15:16:00 +08:00
    @xcatliu 要是不支持 pandoc 渲染的话,mathjax 就几乎没法用,这个主题就只能写写日记了。
    xcatliu
        6
    xcatliu  
    OP
       2020-05-22 15:52:18 +08:00
    @mathzhaoliang 支持 plugins,可以随意修改构建流程,目前有三个 plugins
    - md: 解析 *.md 文件,content 设置为一个 ReactElement
    - tsx: 解析 *.tsx 文件,content 设置为一个 ReactElement
    - layout: 将 content 包装一层 <Layout>

    可以随意组装、删除、添加 plugins

    所以应该能支持,不过可能得自己写 plugin
    longjiahui
        7
    longjiahui  
       2020-05-23 15:08:34 +08:00
    deno logo 过于可爱
    cai314494687
        8
    cai314494687  
       2020-05-24 11:39:59 +08:00   ❤️ 1
    没有 demo ?
    F7ionsy
        9
    F7ionsy  
       2020-05-27 19:47:29 +08:00 via iPhone
    写了好几个 hexo 主题,已经不想迁移了,成本太高
    xcatliu
        10
    xcatliu  
    OP
       2020-05-29 21:09:56 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5407 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 08:47 · PVG 16:47 · LAX 01:47 · JFK 04:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.