The best method to generate static html internet web page from markdown, constructed with Deno!
Components
- Markdown + Structure => HTML
- React facet as an online web page
- Copy static recordsdata
- Sub pages and layouts
- Entrance matter
Getting began
Set up
# Set up deno https://deno.land/#set up curl -fsSL https://deno.land/x/set up/set up.sh | sh # Set up pagic deno set up --unstable --enable-learn --enable-write --enable-get https://uncooked.githubusercontent.com/xcatliu/pagic/grasp/pagic.ts
Markdown + Structure => HTML
As an example now we catch a venture love this:
docs/
βββ public/
βββ src/
βββ _layout.tsx
βββ index.md
The src/_layout.tsx
is a simple react facet:
// @deno-varieties="https://deno.land/x/varieties/react/v16.13.1/react.d.ts" import React from 'https://dev.jspm.io/[email protected]'; import { PagicLayout } from 'https://uncooked.githubusercontent.com/xcatliu/pagic/grasp/pagic.ts'; const Structure: PagicLayout = ({ title, grunt materials }) => ( <html> <head> <title>{title}</title> <meta charSet="utf-8" /> </head> <physique>{grunt materials}</physique> </html> ); export default Structure;
The src/index.md
is a simple markdown file:
# Pagic The best method to generate static html internet web page from markdown, constructed with Deno! π¦
Then sprint:
We’ll derive an index.html
file in public
listing:
docs/
βββ public/
| βββ index.html
βββ src/
βββ _layout.tsx
βββ index.md
The grunt materials ought to all the time be:
<html> <head> <title>Pagictitle> <meta charset="utf-8" /> head> <physique> <article> <h1 id="pagic">Pagich1> <p>The best method to generate static html internet web page from markdown, constructed with Deno! π¦p> article> physique> html>
React facet as an online web page
A react facet would possibly maybe maybe properly properly furthermore be constructed to html:
docs/
βββ public/
| βββ index.html
| βββ whats up.html
βββ src/
βββ _layout.tsx
βββ index.md
βββ whats up.tsx
Right here we type src/whats up.tsx
to public/whats up.html
, the utilization of src/_layout.tsx
as a result of the format.
src/whats up.tsx
is a simple react facet:
// @deno-varieties="https://deno.land/x/varieties/react/v16.13.1/react.d.ts" import React from 'https://dev.jspm.io/[email protected]'; const Hey = () => <h1>Hey World</h1>; export default Hey;
And public/whats up.html
would possibly maybe maybe properly properly be:
<html> <head> <title></title> <meta charset="utf-8" /> </head> <physique> <h1>Hey World</h1> </physique> </html>
Copy static recordsdata
If there are different static recordsdata that are not ended with .tsx
or launch up with _
, we will merely copy them:
docs/
βββ public/
| βββ assets
| | βββ index.css
| βββ index.html
| βββ whats up.html
βββ src/
βββ assets
| βββ index.css
βββ _layout.tsx
βββ _partial.tsx
βββ index.md
βββ whats up.tsx
Sub pages and layouts
We’re in a position to catch sub listing which comprises markdown or facet.
Sub listing would possibly maybe maybe properly properly furthermore catch a _layout.tsx
file.
For every markdown or react facet, this would possibly maybe often maybe properly maybe merely stroll your file design taking a behold for the closest _layout.tsx
. It begins from essentially the most up-to-date listing after which strikes to the guardian listing until it finds the _layout.tsx
.
docs/
βββ public/
| βββ assets
| | βββ index.css
| βββ index.html
| βββ whats up.html
| βββ sub
| βββ index.html
βββ src/
βββ assets
| βββ index.css
βββ _layout.tsx
βββ _partial.tsx
|ββ index.md
βββ sub
βββ _layout.tsx
βββ index.md
Entrance matter
Entrance matter permits us add additional meta knowledge to markdown:
--- writer: xcatliu printed: 2020-05-20 --- # Pagic The best method to generate static html internet web page from markdown, constructed with Deno! π¦
Each merchandise inside the entrance matter will go to the _layout.tsx
as a result of the props:
// @deno-varieties="https://deno.land/x/varieties/react/v16.13.1/react.d.ts" import React from 'https://dev.jspm.io/[email protected]'; import { PagicLayout } from 'https://uncooked.githubusercontent.com/xcatliu/pagic/grasp/pagic.ts'; const Structure: PagicLayout = ({ title, grunt materials, writer, printed }) => ( <html> <head> <title>{title}</title> <meta charSet="utf-8" /> </head> <physique> {grunt materials} <footer> Creator: ${writer}, Printed: ${printed} </footer> </physique> </html> ); export default Structure;
Entrance matter in react facet
In react facet we will export a frontMatter
variable:
// @deno-varieties="https://deno.land/x/varieties/react/v16.13.1/react.d.ts" import React from 'https://dev.jspm.io/[email protected]'; const Hey = () => <h1>Hey World</h1>; export default Hey; export const frontMatter = { title: 'Hey World', writer: 'xcatliu', printed: '2020-05-20' };
Make the most of pagic as cli
pagic type
We’re in a position to make the most of pagic type
to type static pages, there are some alternate options whereas the utilization of type
expose:
pagic type [options] # --test take a look at src dir alternate # --support help public dir # --port override default port
LICENSE
Possess fulfilling with pagic!