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

分享
#1

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

赞 :smiley: ，支持！

1 个赞
#3

:+1:

#4

大赞

#5

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

#6

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

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

#7

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

1 个赞
#8

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

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

1 个赞