ghost blog 安装过程

ghost做纯粹的博客系统,基于nodejs,支持markdown,相比wordpress的臃肿,ghost写博客更简洁方便,本文介绍在debian下部署ghsot过程

1. 安装node
用nodejs官方deb源安装

apt-get install curl  
curl -sL https://deb.nodesource.com/setup | bash -  
apt-get update  
apt-get install nodejs  


2. 安装ghost
使用npm安装ghost

npm install ghost  


3. 配置运行环境
创建ghost目录

mkdir -pv /data0/ghost  

复制文件到/data0/ghost

cp -v -r /usr/lib/node_modules/ghost/content /data0/ghost/  
cp -v /usr/lib/node_modules/ghost/config.js /data0/ghost/  

创建运行文件/data0/ghost/server.js, 并设置配置文件为/data0/ghost/config.js

var ghost = require('ghost'),  
    path = require('path');

ghost({  
    config: path.join(__dirname, 'config.js')
});

ghost().then(function (ghostServer) {  
    ghostServer.start();
});


4. 启动ghost
设置node路径环境变量

export NODE_PATH=/usr/lib/nodejs:/usr/lib/node_modules:/usr/share/javascript  

默认ghost启动使用"development"配置,通过"NODE_ENV=production"启动使用"production"配置

NODE_ENV=production /usr/bin/node /data0/ghost/server.js  


5. 设置nginx代理
如果机器上跑着nginx,可以通过nginx代理访问ghost

location / {  
        proxy_pass http://127.0.0.1:2368$request_uri;
}


6. 美化代码语法高亮
1) 下载prism, http://prismjs.com/download.html, 自定义选择后下载

2) 复制下载文件到主题目录, 默认casper主题

cp prism.css /data0/ghost/content/themes/casper/assets/css/  
cp prism.js /data0/ghost/content/themes/casper/assets/js/  


3) 加载,编辑文件/data0/ghost/content/themes/casper/default.hbs,将prism.css和prism.js分别添加到css和js加载部分,修改后如下

    {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

    ...

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>


4) 使用代码高亮效果
例如

```language-markup
<h1>Hello World!</h1>
```

高亮效果

<h1>Hello World!</h1>  


7. 添加Disqus评论系统
1) 注册Disqus帐号, http://disqus.com/, "install"平台选择"Universal Code", 复制代码

2) 添加代码至post.hbs,/data0/ghost/content/themes/casper/post.hbs,放在content之后

        <section class="post-content">
            {{content}}
        </section>

        {{! disqus }}
        <div id="disqus_thread"></div>


3) 添加Disqus评论计数,返回Disqus复制评论计数部分代码,将代码添加至/data0/ghost/content/themes/casper/default.hbs的"<\/body>"之前

    {{! disqus }}
    <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'freetg'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
    </script>

</body>  

编辑/data0/ghost/content/themes/casper/partials/loop.hbs,修改"post-meta"部分

    <footer class="post-meta">
        {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}}
        {{author}}
        {{tags prefix=" on "}}
        <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
        <a href="{{url}}#disqus_thread">Comments</a>
    </footer>


8. 添加新浪微博分享
1) 使用Font Awesome添加微博图标,打开/data0/ghost/content/themes/casper/default.hbs,在加载css部分添加

    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


2) 编辑/data0/ghost/content/themes/casper/post.hbs,在"share"部分添加

                <a class="icon-weibo" href="http://service.weibo.com/share/share.php?url={{url absolute="true"}}&searchPic=true"
                    onclick="window.open(this.href, 'weibo-share', 'width=440,height=395');return false;">
                    <i class="fa fa-weibo">
                    <span class="hidden">Sina Weibo</span>
                    </i>
                </a>
            </section>


3) 修改/data0/ghost/content/themes/casper/assets/css/screen.css,
把"share"宽度增加到180px

.post-footer .share {
    position: absolute;
    top: 6rem;
    right: 0;
    width: 180px;
}


9. 添加LaTex支持
使用mathjax,打开/data0/ghost/content/themes/casper/default.hbs,在body之前添加

    {{! mathjax LaTex }}
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
        });
    </script>

</body>  

例:

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are  
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$


效果

When $a \ne 0$, there are two solutions to (ax^2 + bx + c = 0) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

10. 修正图片宽于文章主体
图片过大时,图片的宽度会大于文章主体的宽度,影响美观
修改文件/data0/ghost/content/themes/casper/assets/css/screen.css 的 "full-img"

/* Break out larger images to be wider than the main text column
   the class is applied with jQuery */
.post-content .full-img {
    /* width: 126%; */
    width: 100%;
    max-width: none;
    /* margin: 0 -13%; */
    margin: 0;
}

注: 1) "/data0/ghost"替换成自己目录,2) "casper"替换成自己使用的主题