博客

如何搭建自己的 Ghost 博客

Yukee

2017年4月6日 • 3 min read

当初我是参考这篇博文搭建哔哩萌的 → Snowz的独立博客-手把手教你搭建一个属于自己的Ghost博客。

环境

LEMP & Node.js 6.9.0 & Ghost ~~0.11.7~~ ~~0.11.8~~1.1.0 （建议 Ghost 用新版，下载地址，原博用的 Ghost 版本有点太旧了 )
GCC 4.8 + （否则 Node.js 不能通过编译）

Node.js yum install nodejs
我的 Nginx 配置：哔哩萌的 Nginx 完整配置

安装

基本过程参考原博

需要注意的是，官方版需要自行安装 npm 的依赖模块，很简单，npm install --production一条命令即可。

Emoji

0.11.7 版本对 emoji 的支持有问题，见下图，嗯，~~我在等 1.0 的稳定版（官方各种跳票(-_-メ)　）。~~ 临时的解决方法见：解决 Ghost 博客不能显示 Emoji 😀

404 页面

根据主题可能有不同的地方，本博客所用的 Vno 主题，编辑error.hbs即可，与 HTML 页面没什么不同，Nginx 中无需配置404。

哔哩萌的404页面

归档

归档页面的实现见：Ghost博客文章归档实现

表格

一般主题按照Ghost Blog表格语法支持基本就可以了,但是本博客所用的主题Vno的作者应该是把table的CSS没有写完？所以得补充点CSS。

table {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.75em 0;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
}

table th,
table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: #EFEFEF 1px solid;
}

table th { color: #000;border-bottom: 2px solid #848484;}

table thead:first-child tr:first-child th {
    border-top: 0;
}

table tbody + tbody { border-top: #EFEFEF 2px solid; }

table table table { background-color: #FFF; }

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
    background-color: #F6F6F6;
}

搜索

参考：gsearch是一款为Ghost量身打造的搜索插件，效果如图

哔哩萌使用的评论系统为搜狐畅言，post.hbs中取消对comment的注释，comments.hbs中写入以下内容，由于本站启用了HTTPS，所以代码中修改为HTTPS资源，保存重载博客后即可呈现评论。

<section class="post-comments">
<div id="SOHUCS" sid="{{slug}}"></div>
<script type="text/javascript">
(function(){
var appid = '嗯';
var conf = '嗯';
var width = window.innerWidth || document.documentElement.clientWidth;
if (width < 960) {
window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>
</section>

其它

如果 Node.js 版本不符合某版本 Ghost 对其的要求，GHOST_NODE_VERSION_CHECK=false npm start --production，可用这条语句启动博客。