后面不用看了，我现在的博客也是放在七牛，见：http://tangzx.qiniudn.com/
可以在 GitHub 上看到源码：https://github.com/district10/blog
看效果：http://gnat.qiniudn.com （Gist 已经被墙。）
（域名还是挺棒的~~）
第一篇文章： [Pandoc Introduction][pandoc-intro]
关于这篇文章的源码：
- [MD 源码（用 Pandoc 转换成 HTML 传到七牛）][md-src]
- [网页渲染 CSS 源码][css-src]
原理
Part I. About 七牛
- 七牛可以存放文档，包括 HTML 文档，所以可以把 HTML 文档放到七牛上分享
- 七牛允许你自己新建 Bucket，所以可以自定义一个 URL，比如上面我的 Bucket 叫
gnat，如果作为我的博客，地址就是http://gnat.qiniudn.com - 只要在你的 Bucket 里放入一个文档：
index.html，（以我的情况为例）访问http://gnat.qiniudn.com就会直接打开事先写好并传到七牛上的http://gnat.qiniudn.com/index.html，这就是你的博客首页 - 由于七牛是静态网盘，所以不方便一直这样修改，所以在你的
index.html中加上一个 Markdown 的 Gist 来填充内容，每次就改你的 Gist 即可更新主页 - 由于 七牛允许添加的内容可以自定义前缀，包括
/。虽然你的文档不是树状结构（就像你电脑里的文档一样），但是浏览器会以为这是一个树状结构，所以你的七牛博客中可以相对链接可以索引跳转。比如：写一个文档叫Pandoc-Intro.html，上传七牛并给它前缀posts/2014/（在你的 Gist 里），它的实际地址就成了 （以我的为例）：http://gnat.qiniudn.com/posts/2014/Pandoc-Intro.html 从你的主页只需要用相对路径posts/2014/Pandoc-Intro.html即可转入此文档（就是一个网页）
Part II. About Gist
- 在上传七牛的网页文档中加入你的 Markdown Gist，可以呈现 Gist 中的内容，比如：我的主页的内容只是一个 [Gist（Gnat main）][gist-me]
- 在页面中还可以使用自定义的 CSS（在网页中加入自己的 CSS 地址），我也使用了 [Gist（CSS）][gist-me]。 CSS 链接不要使用 页面上
Raw那个（那只是现在的版本），要使用https://gist.githubusercontent.com/+<你的ID>+/+<Gist ID>+/raw/+<文件名>。即在 Markdown 源码中加入：
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/district10/ad8cdbf68052b70cddf0/raw/qiniu-css-pandoc-intro.css"></link>
**Part III. About Pandoc**
1. 用 Pandoc Markdown 写你的博客（加上必要的 Gist 连接），然后转换成 HTML，传到 七牛
2. 转化的代码为
~~~
pandoc.exe --ascii src.md -o src.html
~~~
3. Pandoc 语法十分丰富，可以参考我的 [Pandoc Introduction][pandoc-intro]
---
**附**
index.html
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<script src="你自己的 Gist 地址"></script>
</body>
</html>
~~~
---
P.S. `favicon.ico` 可用
P.P.S. Gist，Pandoc，七牛 实在太棒了
P.P.P.S. 轻喷 CSS 风格，我只是试试样式和可行性
P.P.P.P.S. MathJax 可以显示矩阵，要在 MD 源码中加入：
~~~
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
~~~
---
**Refs**
* [Pandoc a universal document converter](http://johnmacfarlane.net/pandoc/)
* [Fonts Family | Wikipedia][font-family]
* [网页设计的12种颜色 | 阮一峰](http://www.ruanyifeng.com/blog/2010/09/12_colors_used_in_web_design.html)
* [PHP Markdown Extra](https://michelf.ca/projects/php-markdown/extra/)
* [使用Pandoc转换markdown等文本文档
](http://higrid.net/c-art-pandoc.htm)
* [Favicon | Wikipedia](http://en.wikipedia.org/wiki/Favicon)
[pandoc-intro]: http://gnat.qiniudn.com/posts/2014/Pandoc-Intro.html
[md-src]: https://gist.github.com/district10/caf9df9de0d41a97589e#file-qiniu-posts-2014-pandoc-intro-txt
[css-src]: https://gist.github.com/district10/ad8cdbf68052b70cddf0#file-qiniu-css-pandoc-intro-css
[gist-me]: https://gist.github.com/district10/ad8cdbf68052b70cddf0
[font-family]: http://en.wikipedia.org/wiki/Font_family_(HTML)
---
~~~
log: $1. Thu Sep 4 14:21:53 2014; $2. Sat Jan 10 20:23:54 CST 2015;
~~~
网友评论