不折腾的 Ghost 博客搭建方法

简介

本文总结了我搭建本博客的方法,包括:

  1. 基于 DigitalOcean 的 Ghost Server 搭建与配置。
  2. 通过 Code Injection 扩展 Ghost。
  3. 监控与备份。
  4. 其他。

搭建 Ghost Server

DigitalOcean 支持一键搭建 Ghost Server 的流程,非常方便,基本的 Nginx、Node 环境、MySQL 环境、服务脚本都给你配好了,只需要做一些小的修改就可以直接使用,非常方便。

do-ghost.png

搭建完成后,主要需要完成两件事情:

  1. 将你的域名指向 Ghost Server。
  2. 修改 Nginx 与 Ghost 的配置,启用你的域名。

具体操作细节,见 How To Use the DigitalOcean Ghost Application | DigitalOcean

至此,你的 Ghost 博客已经可以提供服务了。

通过 Code Injection 扩展 Ghost

为了使 Ghost 博客支持以下功能,需要对博客进行扩展:

  • LaTeX 渲染。
  • 代码高亮。
  • Disqus 评论。
  • Archive 动态页面。
  • Style 微调。

Ghost 提供了 Code Injection 功能,可以在 Header 与 Footer 里注入代码片段。通过这种方式可以对 Ghost 进行扩展的好处是不需要修改 Ghost 的主程序。

TL;DR, 在 Blog Footer 中插入以下代码,即可实现 LaTeX 渲染代码高亮Disqus 评论 功能:

<!-- mathjax -->  
<script type="text/javascript"  
        src="https://ogkj5pyeh.qnssl.com/mathjax.js" async>
</script>

<!-- prism -->  
<!-- attach line-numbers class to code blocks -->  
<script type="text/javascript">  
for (let e of document.querySelectorAll('pre > code')) {  
  e.className += " line-numbers";
}
</script>  
<!-- load resource -->  
<script type="text/javascript"  
        id="load-prism"
        src="https://ogkj5pyeh.qnssl.com/prism.js"
        data-prism-theme="solarizedlight"
        data-prism-plugins="line-numbers"
        async>
</script>


<!-- disqus -->  
<!-- injected code -->  
<div class="post">  
<div id="disqus_thread"  
     data-shortname="huntzhanorg">
</div>  
</div>  
<!-- load resource -->  
<script type="text/javascript"  
        src="https://ogkj5pyeh.qnssl.com/disqus.js" async>
</script>  

通过 MathJax 支持 LaTeX 渲染

往 Blog Footer 中插入以下代码,可以实现 MathJax 的动态加载。需要注意的是,在识别到页面内包含 $ 字符的时候才会加载 MathJax。

通过 Prism 支持代码高亮

往 Blog Footer 中插入以下代码,实现 Prism 的动态加载。需要注意的是:

  • 在识别到页面内存在 Code Block 的时候才会加载 Prism。
  • data-prism-theme 配置样式,data-prism-plugins 配置插件。
  • Components 会根据页面内容自动加载。

支持 Disqus 评论插件

往 Blog Footer 中插入以下代码支持 Disqus 的动态加载。需要注意的是,你需要把 data-shortname 换成你的 shortname。需要注意的是,在窗口滚动到靠近底部的时候才会加载 Disqus,如果有其他需求,请自己魔改。

Archive 动态页面

Ghost 默认主题并没有 Archive 页面。基于 Ghost API 可以简单的做一个 Archive 页面,具体效果见 Archive

这个页面的制作方法:

  1. 进入「Ghost 配置页面 -> Labs」,勾选「Public API」。
  2. 「New Post」,勾选「Turn this post into a static page」。
  3. 复制以下代码,然后发布页面。以下代码会调用 Ghost API 生成 Archive List。
  4. 在「Navigation」中加入新发布的页面
<div>  
  <p id="customized-archive-loading"><em>Loading......</em></p>
  <ul id="customized-archive"></ul>
</div>

<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.0/jquery.min.js"></script>  
<script type="text/javascript" src="https://ogkj5pyeh.qnssl.com/archive.js"></script>  

Style 微调

通过往 Blog Header 加入以下代码,可以调整默认主题的 Style。

<!-- Casper Style -->  
<style>  
body.nav-opened .site-wrapper {  
    -webkit-transform: translate3D(-350px, 0, 0);
        -ms-transform: translate3D(-350px, 0, 0);
            transform: translate3D(-350px, 0, 0);
}
body.nav-opened .nav-cover {  
    right: 350px;
}
.nav {
    width: 350px;
}
.nav li a {
    text-overflow: "";
    font-size: 1.7rem;
    padding: 0.7rem 5%;
}
.nav li:before {
    content: "";
}
.nav li a::after {
    content: " ";
}
.nav li a:after {
    content: " ";
}
.nav .nav-current a:after {
    border-bottom: none;
}
.nav a:hover {
    background-color: rgba(14,14,150,0.4);
    border-radius: 10px;

    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
}
code, tt {  
    font-size: 1.1em;
}
.copyright {
    display: none;
}
.poweredby {
    display: none;
}
.read-next {
    display: none;
}
</style>  

监控与备份

由于以下原因,我不打算搞一个 cluster 保证 Ghost 博客的 availability:

  • 开多个 Server 很贵。
  • 博客没人看,不太需要保证 availability。

但是,监控与数据备份还是要有的。

通过 Uptime Robot 监控 Ghost 博客

Uptime Robot 可以定期访问你的站点,如果站点挂了就通过邮件给你报警。

uptimerobot.png

自动备份 MySQL Database 到七牛云

DigitalOcean 提供的 Ghost Application 使用 MySQL 作为数据后端,于是我简单抄了一个定时备份脚本把 Database dump 出来上传到 Qiniu。

一些细节:

  • Ghost 的 MySQL Database 配置在 /var/www/ghost/config.js 可以查到。
  • 脚本需要使用 qiniu/qshell,qshell 是利用七牛文档上公开的 API 实现的一个方便开发者测试和使用七牛 API 服务的命令行工具。

备份脚本如下。需要注意的是:

  • 创建目录:mkdir -p /root/backup-tools/data
  • 把以下脚本放在 /root/backup-tools,命名为 backup-mysql.sh
  • 修改 backup-mysql.sh 关于权限验证的变量:QACCESS_KEYQSECRET_KEYQBUCKETPASS
  • qshell 命令行程序也放在 /root/backup-tools
  • 在 cron 里加入 @hourly /root/backup-tools/backup-mysql.sh 实现定时备份。
#!/bin/sh

#----------------------------------------------------
# a simple mysql database backup script.
# version 2, updated March 26, 2011.
# copyright 2011 alvin alexander, http://devdaily.com
#----------------------------------------------------
# This work is licensed under a Creative Commons 
# Attribution-ShareAlike 3.0 Unported License;
# see http://creativecommons.org/licenses/by-sa/3.0/ 
# for more information.
#----------------------------------------------------

# (1) set up all the mysqldump variables
BASE_DIR="/root/backup-tools"  
DATA_DIR="$BASE_DIR/data"

QSHELL="$BASE_DIR/qshell"  
QACCESS_KEY="your access key"  
QSECRET_KEY="your secret key"  
QBUCKET="you bucket name"

QKEY="mysql.backup.sql."`date +"%Y%m%d%H"`

FILE="$DATA_DIR/$QKEY"  
DBSERVER=127.0.0.1  
DATABASE=ghost  
USER=ghost  
PASS="your mysql database password"

# (2) in case you run this more than once a day, remove the previous version of the file
unalias rm     2> /dev/null  
rm ${FILE}     2> /dev/null  
rm ${FILE}.gz  2> /dev/null

# (3) do the mysql database backup (dump)

# use this command for a database server on a separate host:
#mysqldump --opt --protocol=TCP --user=${USER} --password=${PASS} --host=${DBSERVER} ${DATABASE} > ${FILE}

# use this command for a database server on localhost. add other options if need be.
mysqldump --opt --user=${USER} --password=${PASS} ${DATABASE} > ${FILE}

# (4) gzip the mysql database dump file
gzip $FILE

# (5) show the user the result
echo "${FILE}.gz was created:"  
ls -l ${FILE}.gz

# (6) push to qiniu.
$QSHELL account $QACCESS_KEY $QSECRET_KEY
$QSHELL zone na0
$QSHELL fput $QBUCKET $QKEY "$FILE.gz"

其他设置

墙国配置

由于总所周知的原因,墙内访问墙外的站点总是会出点问题的。如果你的站点需要服务墙内用户,建议采取以下措施:

  • 使用 DNSPod 解析你的域名。
  • 使用国内镜像源替换可能被墙的静态资源地址,推荐使用 BootCDN
  • 如果你打算使用 Casper 主题,可以考虑直接上我修改过的 huntzhan/casper-gfw

Let's Encrypt:使站点支持 HTTPS

初始化后,Ghost Server 仅支持 HTTP。通过 Let's Encrypt CA 可以使 Ghost 博客支持 HTTPS 协议。

具体配置方法见 How To Secure Nginx with Let's Encrypt on Ubuntu 16.04 | DigitalOcean

分析 webpage loading 的工具