DEV Community

Casualwriter
Casualwriter

Posted on • Edited on

3 1

Build web page/Site by markdown files

Dear All,

Now you can use casual-markdown-page to, which
directly use markdown files as web page or web site (ie. markdown-as-webpage).

It is a single html file index.html to load markdown file into web page by the syntax of index.html?file={markdown-file.md}

It is very handy to build static web-site from markdown files, and host on free web hosting. For example,

github (self-host): https://raw.githack.com/casualwriter/casual-markdown-page/main/source/index.html
all-in-one version: https://raw.githack.com/casualwriter/casual-markdown-page/main/source/index-one.html
github page: https://casualwriter.github.io/casual-markdown
github page: https://casualwriter.github.io/

Usage Guide

  • copy index.html or index-one.html to web server
  • copy markdown files index.md and other files (*.md) to the folder

that's it!

  • by default, it will load index.md as home page.
  • hotkey [alt-k] to show page in dark mode
  • for mobile, click on title to show/hide TOC.

It use frontmatter for page configuration (title, menu, navigation), for example

-----------------------------------------------------------
github  : https://github.com/casualwriter/casual-markdown 
title   : Casual-Markdown 
style   : #header { background: RoyalBlue } // additional style
menu    :    
  Home            : index.md
  Supported Syntax: md-syntax.md
  md-as-Doc       : md-as-doc.md
  md-as-Page      : md-as-page.md
  md-as-Blog      : md-as-blog.md
  [DarkMode]      : javascript:darkmode()
----------------------------------------------------------

## {{ title }} 

markdown content .....

Enter fullscreen mode Exit fullscreen mode

it is the first release, looking forward to your comments for enhancement,

thanks,

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs