javascript - 在github上写博客，文章内容数据怎么存放获取，有什么好的解决方法？

Question

这几天在github上搭建了博客，但是遇到了这个问题。
本来我是把数据都放在json文件里的，然后。。。我发现这就是在虐待自己，这样写过的人应该都知道，以下是部分代码

这个text对象里就是正文内容，很长很长。。然后就悲剧了！
所以我就又把里面的内容单独放到一个html文件了，向下面这样：

然后就感觉性能也不够好，而且每一篇博文，难道都要新建一个html文件。。汗。。

有没有什么好的解决办法？下面是博客的地址：
https://yuyao1994.github.io/blog

希望有高手能够指点一下。

还有，我的页面除了导航logo外，所有内容都是ajax动态获取的。我的这种写法是不是有问题，
感觉性能有很大的问题！以下附上javascript的源码：

//request方法获取文章内容
$(function(){
function request(title){

var msg="";
$.ajax({
  url: 'text/content.json',
  type: 'GET',
  cache:false,
  dataType: 'json',
  data:"",
})
.done(function(data) { 
  if(title==undefined) {
    var maxNum=data.blog[data.blog.length-1];
    msg+="<header><h2>"+maxNum.title+"</h2><h5>"+maxNum.time+"</h5></header>";
    msg+="<p class='text'></p>";
    $(".content").html(msg); 
    eval("("+maxNum.text+")");
  }else{
    var i=0,j=data.blog.length;
    for(;i<j;i++){
      if(title==data.blog[i].title){
        break;
      }
    }
    var charNum=data.blog[i];
    msg+="<header><h2>"+charNum.title+"</h2><h5>"+charNum.time+"</h5></header>";
    msg+="<p class='text'></p>";
    $(".content").html(msg); 
    eval("("+charNum.text+")");
  };
})
.fail(function() {
  $(".content").html("<h2 style='text-align:center;'>抱歉，没有找到该篇文章！</h2>");
})

}
request();
//获取最新文章列表
$(function(){
var titleList="";
$.ajax({

url: 'text/content.json',
type: 'get',
cache:false,
dataType: 'json',

})
.done(function(data) {

var num=data.blog.length;
if (num<6) {
  var i,j=data.blog.length-1;
  for(i=j;i>-1;i--){
    titleList+="<li><a href='javascript:void(0)'>"+data.blog[i].title+"</a><span>--"+data.blog[i].style+"</span><span class='time'>"+data.blog[i].time+"</span></li>"
  }
  $(".leftNav .newsList").html(titleList);
}else if(num>5){
  var i,j=data.blog.length-1;
  for(i=j;i>(num-6);i--){
    titleList+="<li><a href='javascript:void(0)'>"+data.blog[i].title+"</a><span>--"+data.blog[i].style+"</span><span class='time'>"+data.blog[i].time+"</span></li>"
  }
  $(".leftNav .newsList").html(titleList);
};

})
.fail(function() {

$(".leftNav .newsList").html("<li>获取文章列表失败！</li>");

})
})
//最新文章列表点击事件
$(".container .leftNav .newsList").delegate("li a","click",function() {

var title=$(this).text();
request(title);

});
//获取分类列表
function styleList(style){

var msg="";
$.ajax({
  url: 'text/content.json',
  type: 'get',
  cache:false,
  dataType: 'json',
})
.done(function(data) {
  var i,j=data.blog.length-1;
  for(i=j;i>-1;i--){
    if (style==data.blog[i].style) {
      msg+="<ul class='styleList'><li><a>"+data.blog[i].title+"</a><p class='text'>"+data.blog[i].profile+"</p></li><ul>";
    }; 
  }
  if(msg==""){
    msg+="<h2>本博客"+style+"系列目前没有文章，请看其他系列的文章！</h2>"
  };
  $(".content").html(msg);
})
.fail(function() {
  $(".content").html("<h2 style='text-align:center;'>抱歉，获取文章列表失败！</h2>");
})    

}
//styleList列表点击事件
$(".content").delegate('.styleList li a', 'click', function() {

var title=$(this).text();
request(title);

});
//导航按钮点击事件
$(".container .leftNav .btn li").click(function() {

var style=$(this).find('a').text();
styleList(style);

});
})

Answer 1

你需要Jekyll，这是一个简单的，针对博客设计的静态网站生成器

Answer 2

no zuo no die

用 jekyll 或 hexo

Answer 3

写issue里

Answer 4

如果你只用JavaScript，你也可以用JavaScript写一个程序来动态生成文件。

Answer 5

不要用拼接字符串的方式产生html，而是应该使用前端的模板引擎

Answer 6

hexo，附带我的博客

Answer 7

其实如果是静态博文…为何不直接用MD...很多静态博文的博客系统都是这么做的

Answer 8

hexo 简单易用

Answer 9

为什么要这么做...
直接把文章写成md格式，用jekyll或者Hexo生成静态页面不就好了？

例如：Ahonn' Blog

Answer 10

有git的基础，用一下hexo会简单很多
YzzBlog