BeWithYou

胡搞的技术博客

  1. 首页
  2. 生活/吐槽
  3. 用hexo搭了一个静态博客

用hexo搭了一个静态博客


昨天把博客从阿里云搬家到了搬瓦工。阿里云虽好,可惜太贵,因为早已不是学生了,也没法享受优惠。
不得不说搬瓦工还是挺良心的,虽然之前的各种优惠没有拿到,但是现在用的这个也还算凑合。19.9刀一年,512M内存,1T流量每月,佛利蒙机房,略卡。
搭了一个SS和一个anyconnect服务端试了下,可以fq看网页,但是视频还是挺卡,可能跟自己的网络环境有关吧。以后每个月买VPN的花费也省了。
把lnmp环境的博客搬过来以后,机器512M的内存占了一半,还是可以接受的。
原来的博客没有用wp等框架,而是以折腾为目的自己简单搭建。后端Codeigniter+前端AmazeUI,日志放在mySQL中。
其实现在看来,前端效果还是挺丑的。所以文章看起来怪怪的。所以试着搭一个静态的博客吧,然后就选了最近比较火的hexo。记录一下遇到的问题吧。
hexo的安装配置之类的就不记录了。

怎么把日志从DB导出来变成md文件是第一个问题。

开始想用shell写个简单脚本,然后放弃了。因为shell水平捉急,比较难组织语言。遂用PHP实现,在CI里新建一个controller,读取所有日志,放到模板里写入文件即可。

foreach($archives as $row){
    $data = array();
    $data['title'] = $row['title'];
    $data['time'] = date("Y-m-d H:i:s" ,$row['create_time']);
    $data['content'] = str_replace(" ","",$row['content']);
    $data['tags'] = explode(",",$row['tags']);
    $data['category'] = $row['category'];
    $md = $this->load->view("hexo" , $data, true);
    write_file("$myHexoPath/source/_posts/".$row['title'].".md", $md, "w");
}

以前总觉得模板这种东西很鸡肋,但是在这种时候还是挺有用的。现在的工作用的smarty。虽然现在越来越多人提出去smarty化了,但是用它来写个xml文件还是蛮爽的。

markdown语法差异怎么破

我本地用的是MacDown写日志的。然后PHP博客里用ParseDownExtra来解析成html。但是发现效果与hexo里用的markdown.js略有不同。
比如###标题以前会被当做标题显示,但在hexo里却会显示井号。原来hexo里要求###后跟一个空格才能加标题正文。无奈只能批量修改以前的文章。还好写的不多,擦。
还有为了强制段首缩进,我以前的文章有的会使用几个特殊的空白字符来缩进,好像是全角空格。但是TMD在hexo里他会将这种文字解析成code,进行渲染。虽然markdown语法里缩进的文字确实是code,但全角空格一般不会被误认呀。不管了,批量替换,把全角空格去掉了。不需要缩进也挺好看。
还有个不是markdown的问题,文章里有表格的话可能会把父元素撑开,需要手动修复下css。于是在自定义主题的style文件里加入以下css。解决表格样式问题。

.article-entry > table {
    word-break:break-word;
    padding: 0;border-collapse: collapse; }
.article-entry > table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
.article-entry > table tr:nth-child(2n) {
    background-color: #f8f8f8; }
.article-entry > table tr th {
    font-weight: bold;
    border: 1px solid #cccccc;
    margin: 0;
    padding: 6px 13px; }
.article-entry > table tr td {
    border: 1px solid #cccccc;
    margin: 0;
    padding: 6px 13px; }
.article-entry > table tr th :first-child, table tr td :first-child {
    margin-top: 0; }
.article-entry > table tr th :last-child, table tr td :last-child {
    margin-bottom: 0; }

怎么访问

因为我没有打算把hexo部署到github之类的平台上,就打算放在本地。所以怎么访问时一个问题。hexo server以后,默认开启4000端口监听。只需要访问http://www.bewithyou.me:4000即可访问。
但是这样很丑啊,不是么。

于是我们用nginx做反代呗。新加入以下规则:

server {
    listen       80;
    server_name  hexo.bewithyou.me;
    location / {
       proxy_pass http://localhost:4000;
       proxy_redirect default;
    }
    location ~ /ueditor.*\.(html|htm|gif|jpg|jpeg|bmp|png|txt)$
    {
        root /usr/share/nginx/html/www;
        expires      7d;
    }
}

绑定hexo.bewithyou.me的域名,将请求转发给本地的4000端口处理。因为文章里有些图片资源是用ueditor截图上传的,所以加一个规则,以ueditor开头的图片资源等定位到老博客目录。

新问题,hexo如何后台运行

hexo server&会在terminal关闭以后死掉。
nohup hexo server&也不行,不知道为啥也会死掉。 forever参考网上说法用npm装了forever,结果还是不行。

既然是静态博客,为毛不静态访问呢?遂hexo g,将所有文件静态生成到public文件夹下,同时修改nginx配置。

server {
    listen       80;
    server_name  hexo.bewithyou.me;
    location / {
       root /usr/share/nginx/html/hexo;
    }
    location ~ /ueditor.*\.(html|htm|gif|jpg|jpeg|bmp|png|txt)$
    {
        root /usr/share/nginx/html/www;
        expires      7d;
    }
}

所以如何后台运行的问题就不用解决了。每次写完文章,命令行跑下CI的脚本,然后重新生成下静态资源即可。

如何共享老博客的多说?

我用的主题里添加了多说的支持,但是如何让文章与老博客共享多说评论呢?
多说使用data-thread-key来标记是否是同一片文章。我用的hexo主题里把文章的data-thread-key设置为了文章标题,而老的站点是文章id。我们只需要将hexo里的data-thread-key设为文章id即可。
hexo里模板用的ejs,我们在文章的md文件头部加上id: $id的tag。然后修改主题的ejs文件。

<%- partial('post/duoshuo', {
    key: post.id,
    title: post.title,
    url: config.url+url_for(post.path)
  }) %>
<% } %>
回到顶部