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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1648 天前的主题，其中的信息可能已经有所发展或是发生改变。

多年前写过一个静态网站生成器，取名为 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/[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

2020-05-21 19:34:29 +08:00

赞一个，继续加油

mathzhaoliang

2020-05-21 20:31:43 +08:00

支持调用 pandoc 外部渲染吗

ares586

2020-05-22 10:06:20 +08:00

冲着敢用 Deno，赞一个

xcatliu

2020-05-22 10:07:54 +08:00 via iPhone

@mathzhaoliang 没用过，不太清楚

mathzhaoliang

2020-05-22 15:16:00 +08:00

@xcatliu 要是不支持 pandoc 渲染的话，mathjax 就几乎没法用，这个主题就只能写写日记了。

xcatliu

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

2020-05-23 15:08:34 +08:00

deno logo 过于可爱

cai314494687

2020-05-24 11:39:59 +08:00

没有 demo ？

F7ionsy

2020-05-27 19:47:29 +08:00 via iPhone

写了好几个 hexo 主题，已经不想迁移了，成本太高

xcatliu

2020-05-29 21:09:56 +08:00

@cai314494687 https://ts.xcatliu.com/