PS：基于 jQuery、markdown 的 html 博客，无涉及后台，如此简单，你也可以拥有!!!

目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

├── js
|    ├── jquery-1.8.3.min.js
|    ├── markdown.js
|    ├── js-url.js
|    └── index.js
├── index.html
└── posts
     ├── index.md
     └── 2012/11/30
          └── hello_world.md

1、创建 index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>文翼的博客</title>
</head>
<body>
  <div id="post"></div>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/markdown.js"></script>
  <script type="text/javascript" src="js/js-url.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

分别引入

2、创建 index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

$(function() {
    'use strict';

    function getPost(url) {
        if (!url) {
            getPost('index');
            return;
        }
        $.ajax({
            url: 'posts/' + url + '.md',
            success: function(data) {
                $('#post').html(markdown.toHTML(data));
            },
            error: function(data) {
                getPost('index');
            }
        });
    }

    getPost(url('?'));
});

3、创建 index.md

1
2
3

## 文章列表

* [我的第一篇文章哦](/2012/11/30/hello_world) (2012-11-30)

4、增加第一篇文章 hello_world.md

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

## 我的第一篇文章哦

分类：分类 | 发布时间：2012-11-30 02:20:00

___

### hello world!

这是我的第一篇文章哦
我的文章内容

注：这里的目录结构以日期来命名，以防止冲突，如：2012/11/30/文章名称.md

5、大功告成

最后，将整个 blog 目录放到服务器上（nodejs, apache2, nginx, IIS, …）,输入地址便可以看到:

index

hello_world

6、最后的最后>>>

  • 你可以加入自己的 CSS 进行美化，以及其他信息
  • 你可以考虑将 md 文件内容存在数据库（例如：mongodb）中，并加入评论等其他的功能

附件下载：

blog.zip