不折腾了, 决定使用Ghost写博客

用了很多博客,也换了很多博客,所以到处发博文,一直没有满意的,也就没能在一个集中地方的坚持下来。直到最近重新细细的用了一下 Ghost,决定就是它了。

不折腾了, 决定使用Ghost写博客

用 Markdown 写博客

很早就计划搭建自己的博客,但一直找不到美观、合适的博客系统,计划也就一直搁置着。

  • 使用 Markdown 写文章
    在折腾了无数的的笔记软件/博客系统后,终于顿悟,markdown才是最佳的笔记记录方式。

    语法简洁,一处编写,多处发布 的特性,使得我写文档已经离不开markdown了。

    使用 Markdown 最大的问题是不能直接插入图片,因此图床就是必须的了。

  • 使用图床存储图片
    选择图床的三要素:

    • 稳定(不能时而能打开时而打不开,尤其是使用国外图床会遇到)
    • 能够长久提供服务(不能像大多数国内云盘那样,没几年就 GG 了)
    • 尽量大的存储空间(无论是限制数量还是容量,七牛云提供 10G 免费存储,感兴趣的可以注册使用)

    目前选择了新浪微博相册,容量 1000 张,省着点勉强可以撑好几年。
    选择新浪微博算是临时和折中方案。
    图床工具:新浪微博图床

    也有人使用 base64 将图片转码后存储到当前的笔记内,但这样篇幅会异常的大,并不是好的方案。

为什么要使用 Ghost

在决定使用 ghost 之前,我用过 Jekyll + Minimal-Mistakes 主题,做了很多定制修改,最后发现这个主题不支持二级目录,因此就放弃了。

放弃了 Jekyll,我发现 Jimmy Song(宋净超) 的博客部署得非常好,存在二级目录,于是我转投了 hugo,但还是发现它需要大量的自定义和修改,已经不想折腾了。

于是我重拾 ghost,感觉它的默认主题页面就很好,关键是支持后台管理。同时,它也支持生成静态目录,将其提交到 github 就可以使用 github pages 来发布博客,比较完美。

ghost 其它特性:

  • 开源、免费
  • 虽有数据库但可以用 docker-compose 编排启动
  • 社区活跃

使用 docker 运行 ghost

在 local 测试环境下,Ghost 默认使用 SQLite3 作为数据库,但在生产环境一般使用 MySQL 作为数据库。
因此,我们使用 docker-compose 来一并管理 MySQL 和 Ghost 是比较合适的选择。

ghost 由 Docker 官方社区维护:https://hub.docker.com/_/ghost/

安装 Docker-CE

mkdir /etc/docker/
cat > /etc/docker/daemon.json << EOF
{
  "bip": "10.0.0.1/20",
  "registry-mirrors": ["https://h9vtw6kz.mirror.aliyuncs.com"],
}
EOF

systemctl daemon-reload

yum -y install https://mirrors.ustc.edu.cn/docker-ce/linux/centos/7/x86_64/stable/Packages/docker-ce-18.06.1.ce-3.el7.x86_64.rpm
systemctl restart docker
systemctl enable docker

安装 docker-compose

host 主机安装docker-compose 1.23.2或更高版本。
最新发布版本:https://github.com/docker/compose/releases

version=1.23.2
curl -SL https://github.com/docker/compose/releases/download/${version}/docker-compose-`uname -s`-`uname -m` \
-o /usr/bin/docker-compose
chmod +x /usr/bin/docker-compose
  • ghost的 docker 容器创建一个网络设备
    为了避免 docker-compose 创建的默认网络和我们现有办公环境冲突,我先手动创建一个 docker 网络:

    docker network create --driver bridge ghost_default --subnet 10.0.1.0/24
    

    指定 ghost 使用的网络设备名为ghost_default

  • 创建 docker-compose yaml 文件

    version: '3.1'
    services:
      ghost:
        image: ghost:2.10-alpine
        restart: always
        container_name: ghost
        ports:
          - 3001:2368
        depends_on:
          - mysql
        links:
          - mysql
        environment:
          database__client: mysql
          database__connection__host: mysql
          database__connection__user: root
          database__connection__password: xxxxyyyy
          database__connection__database: ghost
          url: https://www.itsfun.top
        volumes:
          - ./ghost-data:/var/lib/ghost/content
        network_mode: bridge
      mysql:
        image: mysql:5.7
        restart: always
        container_name: mysql
        volumes:
          - ./mysql-data:/var/lib/mysql
        environment:
          MYSQL_ROOT_PASSWORD: xxxxyyyy
        network_mode: bridge
    
  • 使用 docker-compose 启动集群

    mkdir -p ghost-data mysql-data
    docker-compose up -d
    

    -d 表示在后台运行。
    最后就可以通过访问本机的 2368 端口访问到 ghost 服务了。

  • 升级 ghost
    Ghost 是一个很活跃项目,版本更新较快,新功能增多的同时也会引入一些bug, 这时候我们就可以通过升级来解决。比如 ghost 2.11 中引入的 https 加载 http 图片问题,目前是通过降级到 ghost 2.10 来解决。此问题是 ghost 自带的主题 Casper 在 casper-v2.9.0(ghost 2.11内置) 版本中将 ghost API 版本默认设置成了 v2, 导致一些兼容问题出现,我们可以将 docker-compose.yaml 中 ghost 的 URL 设置成 https 来解决(详见我提的 issue):

    url: /

    升级方法如下:

    docker-compose stop
    docker rmi -f ghost:2-alpine
    
    # 修改docker image
    vim docker-compose.yaml
      image: ghost:2.16
    #重新启动
    docker-compose up -d
    

    在一步中,我们停止了 docker-compose 编排服务,清理掉 ghost 旧的 docker 镜像 ghost:2-alpine,然后重新启动 docker-compose,这时候 docker-compose 就会因为本地没有 ghost:2-alpine 而重新拉取最新镜像,达到升级目的。docker-compose 会检测到久有的挂载目录并直接使用,而不是重新生成目录,这样升级过程中不会丢失数据。

关于 ghost 环境变量的定义和传入,参考:https://docs.ghost.org/concepts/config/#running-ghost-with-config-env-variables

docker 官方文档:https://docs.docker.com/samples/library/ghost/

Nginx 配置

由于我们将 ghost 的默认端口 2368 映射到了本机的 2368,通常情况下我们不会直接将这个主机端口开放到公网使用,这时候就可以通过配置 nginx 反向代理,统一由 nginx 的 80/443 端口接收请求,再根据反向代理配置转发到后端的 2368 端口去。

关于 nginx 的安装,请参考:
/upgrade-nginx-from-1-12-to-1-14

  cat /etc/nginx/conf.d/blog.conf
  server {
    listen 80;
    server_name itsfun.top www.itsfun.top;
    client_max_body_size 50M;
    access_log  /var/log/nginx/itsfun.top.access.log  main;
    error_log /var/log/nginx/itsfun.top.error.log     warn;

    location / {
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   X-Forwarded-Proto https;
        proxy_connect_timeout   30;
        proxy_read_timeout      30;
        proxy_send_timeout      30;
        proxy_pass http://127.0.0.1:2368;
    }
}

# 检查 nginx 配置并 reload nginx   
nginx -t
nginx -s reload

Ghost 的一些优化配置

Ghost 的后台非常强大,首次登录注册好账户后(第一个账户是 Admin 账户),我们就可以在后台做一些优化配置了。

  • 指定使用 highlight.js 处理代码高亮
    Ghost 默认主题 casper 的代码块高亮功能很弱,尤其是 markdown 对文档支持很差,建议修改。
    Ghost 后台的 Code InjectionBlog Footer 框中

    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.1/highlight.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.1/languages/yaml.min.js"></script>
    <script >hljs.initHighlightingOnLoad();</script>
    
  • 修改 highlight.js 主题
    Ghost 默认主题 casper 的代码块高亮背景是白色,与正文区别不大,我希望使用一款对比鲜明一点的主题。
    我们可以在以下这个页面选择一款主题:https://highlightjs.org/static/demo
    然后去 cdnjs 搜索对应的 css style 文件:https://cdnjs.com/libraries/highlight.js
    最后去 Ghost 后台的 Code InjectionBlog Header 框中,填写如下并保存即可:

    <link rel="stylesheet"
        href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.1/styles/atom-one-dark-reasonable.min.css">
    

    代码高亮和主题设置参考: https://bironthemes.com/blog/how-to-add-syntax-highlighting-to-ghost

  • 修改文章页面宽度
    文章正文两边留白较多导致文章显得很很窄,每行的字数较少阅读起来不是很方便,尤其是有较长代码块的情况下。
    同样在 Code InjectionBlog Header 框中,追加如下部分就能适当调整宽度:

    <style>
    .post-full-content { padding: 60px 60px 0; }
    .post-content { display: contents; }
    </style> 
    
  • 修改字体
    Ghost 的默认字体显示英文还不错,但是对于中文来说就有点惨了,同样可以修改。
    Code InjectionBlog Header 框中,在 <style> </style> 之间插入如下部分就能修改全局字体了:

    html *
    {
       font-family: "Source Code Pro",Consolas,Menlo,Monaco,"Microsoft YaHei",monospace; !important;
    }
    

    关于字体选择,参考:
    https://blog.csdn.net/chenmoquan/article/details/8207452
    https://segmentfault.com/a/1190000006110417
    http://www.zreading.cn/ican/2014/10/css-font-family

使用虚拟机运行Ghost[已放弃]

依赖较多不建议使用。

Ghost is not recommended run as root user.

  • Create user and grant sudo permission
adduser ghost
usermod -aG sudo ghost
su -ghost
  • Install nginx
    [Nginx 配置](#Nginx 配置)

  • install mysql

  • Install node.js
    目前 ghost 支持用于生产环境的 node 是 v8.x
    说明详见:Supported Node versions

    Installation instructions

    curl -sL https://rpm.nodesource.com/setup_8.x | bash -
    yum -y install nodejs
    
  • Install Ghost-CLI

    npm install [email protected] -g
    
  • Install Ghost

    ghost install local
    

New site: http://localhost:2368
Ghost admin: http://localhost:2368/ghost

That's it! You're done.