神刀安全网

用七牛搭建个人博客

后面不用看了,我现在的博客也是放在七牛,见:http://tangzx.qiniudn.com/

可以在 GitHub 上看到源码:https://github.com/district10/blog


看效果:http://gnat.qiniudn.com (Gist 已经被墙。)

(域名还是挺棒的~~)

第一篇文章: Pandoc Introduction

关于这篇文章的源码:


原理

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)
  2. 在页面中还可以使用自定义的 CSS(在网页中加入自己的 CSS 地址),我也使用了 Gist(CSS)。 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

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


log: $1. Thu Sep  4 14:21:53     2014; $2. Sat Jan 10 20:23:54 CST 2015;

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 用七牛搭建个人博客

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址