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

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

欢迎大家来试用～

GitHub

特性

极简的使用方式：只需要 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/react@16.13.1';
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 本身很好用，但生态十分缺失，我踩了无数个坑才完成了第一个版本，以后再写个文章细说。

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

特性

快速开始

安装

Markdown + Layout => HTML

规划

吐槽

历史回顾