An Example Static Site Generator Built with Deno

An Example Static Site Generator Built with Deno

Deno Markdown Site An example static site generator built with Deno. Made for a blog post.

Deno Markdown Site

An example static site generator built with Deno. Made for a blog post.

Usage

Make sure you've templated your website as instructed below, then you can use:

deno run --allow-read --unstable --allow-write https://raw.githubusercontent.com/nafeu/deno-md-site/main/main.ts example-site.md build

Where you can replace example-site.md with your site's .md file and replace build with your specified build path.

Local Installation (optional)
git clone https://github.com/nafeu/deno-md-site.git
cd deno-md-site
Templating Your Website

Create a markdown file:

touch example-site.md

And format it like so:

---
title: [WEBSITE_TITLE]
styles: >
  /* Add Optional CSS Here */
favicon: 🦕
---
/home:Home

# Home

[Home page content]

+++
/[PAGE_PATH]:[PAGE_TITLE]

# [PAGE_TITLE]

[PAGE_CONTENT]

+++
layout:footer

[FOOTER_CONTENT]
Templating Rules
  • YAML Front Matter is used to declare a [WEBSITE_TITLE], optional css styles and an optional emoji favicon
  • Triple plus signs (+++) are used to separate pages and layout components
  • [PAGE_PATH] is the url path to a page
  • [PAGE_TITLE] is the title of the current page
  • [PAGE_CONTENT] is the content of that page (written in markdown)

Check out the example-site.md file and docs/ folder included in this repo for a clear example. Note that for the docs folder has been manually formatted the HTML so it would be easier to read, the actual build renders HTML that works but isn't as human-readable.

Generating Your Website

Target your templated .md file and specify a build path like so:

deno run --allow-read --unstable --allow-write main.ts example-site.md build

You can then use cd build to see your generated website.

Development

I recommend using denon:

deno install --allow-read --allow-run --allow-write -f --unstable https://deno.land/x/denon/denon.ts

Then you can use

denon run --allow-read --unstable --allow-write main.ts example-site.md

Download Details:

Author: nafeu

Source Code: https://github.com/nafeu/deno-md-site

deno nodejs node javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

AEM Querybuilder for JavaScript (Browser, Node, Deno)

Helix Querybuilder .AEM Querybuilder for JavaScript (Browser, Node, Deno)

NKeys for JavaScript - Node.js, Browsers, and Deno

A public-key signature system based on Ed25519 for the NATS ecosystem system for JavaScript. The nkeys.js library works in Deno, Node.js, and the browser!

Javascript module for easily generating mazes,compatible with both Deno and Node

A work-in-progress Javascript maze generator module, compatible with both Deno and Node.

Deno Tutorial for Beginners: Deno vs. Node: Better Than NodeJS?

Deno is released, it’s time to find out if it can prove a worthy competition for Node.js. What is Deno? Why Deno can be considered an alternative to Node? The main differences between Deno and Node. Write a simple Deno app.

What is Deno? The Node.JS Killer? The Deno-minator to Node?

What is Deno? The Node.JS Killer? The Deno-minator to Node? Deno is the new hype and will it be better than node.js? Deno is a secure runtime for JavaScript and TypeScript that is based on the V8 JavaScript engine and the Rust programming language that addresses Node’s shortcomings