如何使用Ghost + Cloudinary？

Ghost 博客平台 Jan 31, 2021

因为Cloudinary在WordPress上的体验真的很棒也很方便，这也是为什么从WordPress移民到Ghost后我还想要继续在Ghost平台上使用Cloudinary的原因。

什么是Cloudinary？

Coudinary是一款云平台媒体管理服务，Cloudinary的媒体管理解决方案除了一般图床之外，还根据观看装置最佳化以达到理想的图片解析度，上传的媒体支援将会使用Cloudinary CDN最佳化带宽，不会因网站主机位置只有小部分地区用户顺畅预览。同时我们也可在Cloudinary平台上进行编辑管理照片，修改完成后，Cloudinary即时地更新到网络，站长也不需要更该图片链接以免“破图”，这也是为什么转换部落格平台后，也不会图片无法显示的问题。

为什么使用Cloudinary？

早在去年本站就是Cloudinary的用户了，使用Cloudinary提供的WordPress插件就能使用Cloudinary图片托管服务，好处是将图片托管给第三方服务除了能减少图片因为网站挂点的风险之外，还能节省网站的流量。

Cloudinary每月免费额度

Cloudinary提供免费方案新注册的用户可享用每月25点的点数，每一点代表：1 点 = 1,000Transformations 或 1 GB存储空间或 1 GB频宽

当然免费用户也可以透过推广获得更多的每月额度

注册Cloudinary

我们也可以透过官方的推广方式增加每月额度，可以点击我的链接注册Cloudinary。

如何在Ghost使用Cloudinary？

这里使用的是Ghost官方推荐的Ghost Storage Cloudinary，有兴趣也可以到Github查看代码：

本站是使用Digital Ocean的Ghost一键安装脚本安装的，如果有兴趣也可以参考这篇：

Ghost - DigitalOcean - 安装篇

延续前篇文章 [/2020/05/02/digital-ocean-review/]已经介绍如何在 Digital Ocean[https://m.do.co/c/1b223479fa8c] 创建 Droplet，今天示范如何在 Digital Ocean 上的 Marketplace的一键安装 Ghost 博客平台。 Ghost 介绍Ghost 是由前 WordPress 设计师开发，计划开发更简洁的博客程序，而不是内容管理系统。 > Ghost 是用 JavaScript 编写的博客平台，基于 MIT 许可证开放源代码。Ghost 的设计主旨是简化个人网站发布以及网上出版的过程。…

💻 Everblogger 📸yong13579

安装Ghost Storage Adapter

接着安装 ghost storage adapter ，建议在Ghost的根目录安装 cd /var/www/ghost/

安装Ghost Storage Cloudinary指令

$ yarn add [email protected]

将Ghost Storage Cloudinary搬运到Ghost server目录中

$ mv node_modules/ghost-storage-cloudinary versions/3.x.x/core/server/adapters/storage

由于安装的版本的不同 3.x.x 文件夹为运行Ghost版本。

更改Ghost设置让它预设使用Ghost Storage Cloudinary Adapter

在根目录 /var/www/ghost/里可以看到Ghost的设置文档 config.production.json 添加Storage以及将imageOptimization关闭。

除了用你的方式进行修改之外，还可以使用指令 $ nano config.production.json 添加设置，完成后 ctrl + x 退出 Enter 储存皆可。

    "storage": {
        "active": "ghost-storage-cloudinary",
        "ghost-storage-cloudinary": {
            "useDatedFolder": false,
            "auth": {
                "cloud_name": "名称",
                "api_key": "cloudinary api",
                "api_secret": "cloudinary api密钥"
            },
            "upload": {
                "use_filename": true,
                "unique_filename": false,
                "overwrite": false,
                "folder": "blog-images",
                "tags": ["blog"]
            },
            "fetch": {
                "quality": "auto",
                "secure": true,
                "cdn_subdomain": true
            }
        }
    },
    "imageOptimization": {
        "resize": false
    }

在 Fetch 的 secure 我将它改成 true，我发现如果我没做更改的话，在主流浏览器会不显示，因为图片并不是以加密连接。

我们也可以在 "folder": "blog-images" 更改目录名称，更方便管理。

可别忘了 auth 更改Cloudinary的名称，api以及金钥