用七牛搭建个人博客

后面不用看了，我现在的博客也是放在七牛，见：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 七牛

1. 七牛可以存放文档，包括 HTML 文档，所以可以把 HTML 文档放到七牛上分享
2. 七牛允许你自己新建 Bucket，所以可以自定义一个 URL，比如上面我的 Bucket 叫 gnat，如果作为我的博客，地址就是 http://gnat.qiniudn.com
3. 只要在你的 Bucket 里放入一个文档：index.html，（以我的情况为例）访问 http://gnat.qiniudn.com 就会直接打开事先写好并传到七牛上的 http://gnat.qiniudn.com/index.html，这就是你的博客首页
4. 由于七牛是静态网盘，所以不方便一直这样修改，所以在你的 index.html 中加上一个 Markdown 的 Gist 来填充内容，每次就改你的 Gist 即可更新主页
5. 由于 七牛允许添加的内容可以自定义前缀，包括 /。虽然你的文档不是树状结构（就像你电脑里的文档一样），但是浏览器会以为这是一个树状结构，所以你的七牛博客中可以相对链接可以索引跳转。比如：写一个文档叫 Pandoc-Intro.html，上传七牛并给它前缀 posts/2014/（在你的 Gist 里），它的实际地址就成了 （以我的为例）：http://gnat.qiniudn.com/posts/2014/Pandoc-Intro.html 从你的主页只需要用相对路径 posts/2014/Pandoc-Intro.html 即可转入此文档（就是一个网页）

Part II. About Gist

1. 在上传七牛的网页文档中加入你的 Markdown Gist，可以呈现 Gist 中的内容，比如：我的主页的内容只是一个 [Gist（Gnat main）][gist-me]
2. 在页面中还可以使用自定义的 CSS（在网页中加入自己的 CSS 地址），我也使用了 [Gist（CSS）][gist-me]。 CSS 链接不要使用 页面上 Raw 那个（那只是现在的版本），要使用 https://gist.githubusercontent.com/ + <你的ID> + / + + /raw/ + <文件名>。即在 Markdown 源码中加入：

**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

~~~



    
    


    


~~~


---

P.S. `favicon.ico` 可用
P.P.S. Gist，Pandoc，七牛 实在太棒了
P.P.P.S. 轻喷 CSS 风格，我只是试试样式和可行性
P.P.P.P.S. MathJax 可以显示矩阵，要在 MD 源码中加入：
~~~

~~~



---

**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;
~~~