Markdown based Document Site for GitHub Pages

More than 1 year has passed since last update.

Designed for GitHub Pages (especially for /docs option).

A demo: Docs of Ark


<!DOCTYPE html>

<html lang="en">
<meta charset="UTF-8">
<title>Introduction to Ark</title>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<link rel="stylesheet" href="//">
<script src="//"></script>

<script src=""></script>
<link rel="stylesheet" href="">

<link rel="stylesheet"
.layout {
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;

.layout-logo {
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
line-height: 30px;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: white;
text-align: center;

.layout-nav {
width: 255px;
margin: 0 20px 0 auto;

#markdown {
font-size: 1.2em;
<div id="app">
<div class="layout">
<Header style="position: fixed;top:0;height: 60px;width: 100%">
<i-menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo">Ark</div>
<div class="layout-nav">
<menu-item name="1">
An universal framework for PHP 7
<Sider hide-trigger :style="{background: '#fff', minHeight:'80vh',position:'fixed',left:0,top:'60px'}">
<i-menu theme="light" @on-select="onMenuSelected" width="auto">
<template v-for="(menuGroupItem,menuGroupKey) in menuGroupList">
<Submenu v-if="menuGroupItem.type=='sub-menu'" :key="menuGroupKey"
<template slot="title">
{{ menuGroupItem.title }}
<menu-item v-for="(menuItem,menuKey) in menuGroupItem.items" :key="menuKey"
{{ menuItem.title }}
<menu-item v-if="menuGroupItem.type=='menu'" :key="menuGroupKey" :name="">
{{ menuGroupItem.title }}
<Layout :style="{padding: '0 24px 24px',marginLeft:'200px',marginTop:'60px'}">
<Content :style="{margin: '24px 0',padding: '24px', minHeight: '70vh', background: '#fff'}">
<div id="markdown" class="markdown-body" v-html="compiledMarkdown" v-highlight></div>
<Footer style="text-align: center">
Copyright 2018 <a href="">Sinri Edogawa</a>
Vue.directive('highlight', function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block) => {
let app = new Vue({
el: '#app',
data: {
markdownContent: '> LOADING...',
menuGroupList: [],
computed: {
compiledMarkdown: function () {
return marked(this.markdownContent, {sanitize: true})
methods: {
onMenuSelected: function (name) {
console.log("onMenuSelected", name);

axios.get("./markdown/" + name + ".md")
.then((response) => {
this.markdownContent =;
.catch((error) => {
this.markdownContent = "# Page '" + name + "' is not found";
mounted: function () {
.then((response) => {
let menuGroupList = [];
for (let k1 in {
if (! continue;
let item1 =[k1];
if (typeof item1 === 'string') {
type: 'menu',
name: k1,
title: item1,
} else {
let submenu = {
type: 'sub-menu',
title: k1,
items: []
for (let k2 in item1) {
if (!item1.hasOwnProperty(k2)) continue;
let item2 = item1[k2];
name: k2,
title: item2,
this.menuGroupList = menuGroupList;
}).catch((error) => {
this.markdownContent = "# Menu is not found";
This docs index.html, menu.json and markdown files would be also a good sample for GitHub Pages, ha ha ha~




"path": "title-of-first-level-page",
"title-of-sub-menu": {
"path": "title-of-second-level-page"

The path might be foo or foo/bar, which would each be linked to ./markdown/ or ./markdown/foo/

Directory markdown

Your contents here stored inside as .md files to be referred.