作者:刘欢
前言
方法并不高端，但是：
1.简单易行不要钱。！
好了，废话稍止，进入正文。
原理就一句话
github pages
基本介绍
·githubpages
Github 提供的托管静态网页的服务，基本使用方法是建立一个名为YOUR_USER_NAME.github.io的repo, 并把代码push到masterbranch。注意其只支持静态内容。另外，如果你有自己的域名，也可以将域名指向github pages
·github issues
每个github repo自带的tracking系统，支持markdown,代码高亮，图片，表格，emoji表情
·githubAPI
Github提供的API,可以拿到你的内容，可以rendermarkdown…更多请看文档
为何不直接使用issues作为博客
事实上，直接使用issues作为博客也是可行的，从这个角度，就是把github issues当成博客平台。这个方案的缺陷是：等都是没有的2. 你将受限于github的UI和用户（需要注册才能评论），无法自由的定义你想要的UI和交互而使用github API来构建nobackend app, 即可以合理利用github提供的强大功能，又能随心所欲的定义自己的网站，还能集成任意的第三方服务（评论、分享等），十分潇洒
我的玩法
前端快速开发框架，主要技术为angularJS +bootstrap + grunt + coffeeScript，有兴趣的朋友可以看看。
上酸菜和代码
YOUR_USER_NAME.github.io,比如我的martin-liu.github.io。
angular.forEach(Config.routes, function(route) {if (route.params && !route.params.controller) {route.params.controller = 'BaseCtrl';}$routeProvider.when(route.url, route.params);});$routeProvider.otherwise({templateUrl: 'partials/404.html'});
[{ "url": "/", "params": {"name": "home","label": "Home","templateUrl": "partials/home.html","controller": "HomeCtrl" }},{ "url": "/article/:id", "params": {"name": "article","hide": true,"templateUrl": "partials/article.html","controller": "ArticleCtrl" }},{ "url": "/about", "params": {"name": "about","label": "About","templateUrl": "partials/about.html" }}]
2. Home页面的实现
code如下，BlogRemoteService.getBlogs()就是ajax call数据。
BlogRemoteService.getBlogs().then((function(_this) {return function(blogs) {return _this.data.blogs = _this.processBlogs(blogs);};})(this));processBlogs = function(blogs) {return _.map(blogs, BlogService.decorateBlog); };
<!–{"summary":"渺小如我们，是风吹动水面，，是蝴蝶一次振翅。在正确的位置，也能掀起远方的风暴；找到那个支点，也能撬动地球。"}–>BlogService.decorateBlog的内容如下，用来解析注释内容，赋值给blog.metadecorateBlog: function(blog) {var e, meta, metaStr;if (!blog.body) {return blog;}metaStr = blog.body.substring(0, blog.body.indexOf('–>'));metaStr = metaStr.replace(/\n|\r|<!-{2,}/gm, ' ');try {meta = JSON.parse(metaStr);} catch (_error) {e = _error;console.log(e);}blog.meta = meta;if (blog.meta.summary) {BlogRemoteService.renderMarkdown(blog.meta.summary).then(function(data) {return blog.meta.summary = data;});}return blog;}<m-loading ng-if="!vm.data.blogs"></m-loading><div ng-if="vm.data.blogs" ng-repeat="blog in vm.data.blogs"><div style="cursor:pointer"ng-click="Util.redirect('/article/' + blog.number)"> <h3 ng-bind="blog.title"></h3> <p class="summary" ng-bind-html="blog.meta.summary"></p> <span ng-bind="blog.created_at | date:'yyyy-MM-dd'"</span>></div><hr/></div>要么读书、要么旅行，灵魂和身体，必须有一个在路上。
