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

多年前写过一个静态网站生成器,取名为 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://deno.land/x/pagic/mod.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/react@16.13.1';
import { PagicLayout } from 'https://deno.land/x/pagic/mod.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
  • [x] 支持 themes
  • [x] 丰富 PagicPluginCtx,使其能支持目录列表等功能
  • [x] 现在 React 仅作为模版引擎,其中的逻辑不会构建为 js 放到页面中,故下一步需要加上此功能
  • [x] 支持单页应用模式

吐槽

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

2赞

:smiley: ,支持!

1赞

:+1:

大赞

https://raw.githubusercontent.com/xcatliu/pagic/master/pagic.ts
楼主你这个链接挂了,我是使用梯子访问的。404: Not Found

感谢 Pagic~ 这里是一个使用 Pagic 主题的 Deno 电子书:

http://deno-tutorial.js.org/

改路径了 https://raw.githubusercontent.com/xcatliu/pagic/master/mod.ts

1赞

已更新此贴正文。也可以去 github 上看最新的。

更新时发现正文中列出的 TODOs 已经都完成啦 :laughing: 不过还没有写文档

1赞