A few years ago I wrote a static website generator called Pagic. Now I have some new ideas and just in time for the Deno release, I rewrote it with Deno and added some new features.

Welcome to try ~

  • GitHub

features

  • Minimal use: just xxx.md and _layout.js
  • Support React Component to generate a page
  • Other static resource files are copied directly to the public folder
  • Support for sub Pages layouts, in which each Markdown or React Component will scan up to the nearest _layout.js layout template
  • Support the frontMatter

Quick start

The installation

# 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
Copy the code

Markdown + Layout => HTML

The directory structure is as follows:

Docs / ├ ─ ─ public / └ ─ ─ SRC / ├ ─ ─ _layout. The TSX └ ─ ─ index, mdCopy the code

SRC /_layout. TSX is a simple React component:

/ / @ deno - types = "https://deno.land/x/types/react/v16.13.1/react.d.ts" import React the 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;Copy the code

SRC /index.md is a simple markdown file

# Pagic

The easiest way to generate static html page from markdown, built with Deno! 🦕
Copy the code

Run:

pagic build
Copy the code

We’ll get a public/index.html file:

Docs / ├ ─ ─ public / | └ ─ ─ index. The HTML └ ─ ─ SRC / ├ ─ ─ _layout. The TSX └ ─ ─ index, mdCopy the code

It says:

<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 >Copy the code

For other features, check out GitHub.

planning

  • [x] support plugins
  • [] Themes are supported
  • [] Enrich PagicPluginCtx to support directory lists, etc
  • [] React is only used as a template engine. The logic in React is not built into javascript pages, so we need to add this function in the next step
  • [] Supports single page application mode

teasing

Deno itself is good, but the ecology is missing. I made the first version of Deno through numerous holes. I’ll write about it later.

Historical review

  • Simplest static web site generator: Pagic
  • Pagic v0.5.0, the simplest static website generator, fixes watch problems by adding watch(), unwatch() methods
  • Pagic V0.6.0, the simplest static website generator, supports code highlighting