Markdown-as-blog: Build blog site by markdown files.

  • By Casualwriter
  • Last update: Nov 27, 2022
  • Comments: 1


Build blog site by markdown files and single index.html.

What we need is config home page at, then start write post in markdown!

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


  • single html
  • no dependence in vanilla javascript
  • support all browser
  • dark mode or dark theme
  • responsive, support mobile
  • customized theme (by css style)

Usage Guide

simply copy index.html to web server, or fork this repo.

  • config site at (title, subtitle, header-color, navigation, etc..)
  • start to write blog post using markdown
  • to publish, just add the post in by syntax
* yyyy/mm/dd: [post-title](md-file) { #tags } is also shown as HOME page of blog site.

below is sample setup from Sample Blog:

title      : Casual-Markdown's Blog 
subtitle   : Simple is the best
nav-group  : featured, new-3, tags, months
nav-width  : 320px
css-header : background:linear-gradient(to bottom right, #06c, #fc0); color:white
menu       : 
   Home    : ?
   Github  :
   Dark    : javascript:darkmode()
   About   : ?

<style comment="additional style">

<div id="md-post">

home page in markdown syntax...

## Archive

* yyyy/mm/dd: [Post Title](md file)  { #tag1, #tag2 }
* yyyy/mm/dd: [Post Title](md file)  { #tag1, #tag2 }
* yyyy/mm/dd: [Post Title](md file)  { #tag1, #tag2 }


frontmatter for blog setup

  • title := blog title
  • subtitle := subtitle
  • nav-group := featured // show blogs tagged by featured
  • nav-group := new-n // show new posts (n=number of new post)
  • nav-group := tags // show tags list
  • nav-group := months // show archive by month
  • nav-width := 320px // width of nav-panel
  • css-header := background:green // css style for header
  • theme := dark // show by dark theme (only dark theme available now)
  • menu := ... // top-menu

URL Parameters

  • index.html?post={} show post of
  • index.html?tag={tag-name} list posts for specified tag
  • index.html?month=2022-08 list posts for specified month
  • index.html?theme=dark show in dark theme
  • index.html? show blog site using as home/index
  • index.html? show using in dark mode.


  • [alt-k] to toggle dark mode
  • [alt-s] to view in html code (for developer)
  • [ctrl-p] to print post
  • in mobile mode (width<900), click on title to toggle nav panel


  • 2022/08/24: 0.60, first release
  • to-do, more themes



  • 1

    Css themes

    Hello, I am watching your amazing work in creating super ligth sites.

    I am wondering about customizing styles and creating repo with some fun and default themes that will be available for everyone ?