使用 GitLab CI 自动部署 Ghost 主题

2022年05月24日，居家隔离的第 N 天

今天收到了 Ghost 5.0 发布的邮件，第一时间更新了下，发现主题里有些功能已经不兼容了，于是准备对主题做下更新。在看 Ghost Integrations 的时候发现有个 GitHub 的插件特别好用，支持通过 GitHub Actions 自动部署你的主题。但是我自己的项目用的都是 GitLab，找了一圈，没有官方的插件。于是尝试自己通过 GitLab CI 来实现。

大致看了下基于 GitHub Actions 自动部署的实现方式，通过官方提供的一个 TryGhost/action-deploy-theme 的步骤，代码很简单，总共 40 行，我们来看下它做了什么：

const path = require('path');
const core = require('@actions/core');
const exec = require('@actions/exec');
const GhostAdminApi = require('@tryghost/admin-api');

(async function main() {
    try {
        const url = core.getInput('api-url');
        const api = new GhostAdminApi({
            url,
            key: core.getInput('api-key'),
            version: 'canary'
        });

        const basePath = process.env.GITHUB_WORKSPACE;
        const pkgPath = path.join(process.env.GITHUB_WORKSPACE, 'package.json');

        let zipPath = core.getInput('file');

        // Zip file was not provided - zip everything up!
        if (!zipPath) {
            const themeName = core.getInput('theme-name') || require(pkgPath).name;
            const themeZip = `${themeName}.zip`;
            const exclude = core.getInput('exclude') || '';
            zipPath = themeZip;

            // Create a zip
            await exec.exec(`zip -r ${themeZip} ${core.getInput('working-directory') || '.'} -x *.git* *.zip yarn* npm* node_modules* *routes.yaml *redirects.yaml *redirects.json ${exclude}`, [], {cwd: basePath});
        }

        zipPath = path.join(basePath, zipPath);

        // Deploy it to the configured site
        await api.themes.upload({file: zipPath});
        console.log(`${zipPath} successfully uploaded.`); // eslint-disable-line no-console
    } catch (err) {
        console.error(err); // eslint-disable-line no-console
        process.exit(1);
    }
}());

把主题打包成 zip 包，然后提供 Ghost 上创建的 Admin API Key 和 API URL，通过 API 去上传，那么我们应该也可以自己去实现。

首先，我们也需要去 Ghost 后台创建一个自定义的 Integration，比如取名叫 GitLab CI，目的是为了获得 Admin API key 和 API URL，后面在 GitLab CI 中需要用到。

下一步，去 GitLab CI 中，把这两个内容配置成变量，取名 GHOST_ADMIN_API_KEY 和 GHOST_API_URL 以便在 CI 脚本中使用。

在项目中添加 Ghost Admin API 库：

yarn add @tryghost/admin-api --dev

在 gulpfile.js 中插入部署的任务：

const { series, src, dest } = require('gulp')
const pump = require('pump')
const less = require('gulp-less')
const zip = require('gulp-zip')
const GhostAdminApi = require('@tryghost/admin-api')

const handleError = (done) => {
    return function (err) {
        if (err) {
            console.error(err)
        }
        return done(err)
    }
}

function css(done) {
    pump(
        [
            src('./assets/css/*.less', { sourcemaps: true }),
            less({}),
            dest('assets/css', { sourcemaps: './' }),
        ],
        handleError(done)
    )
}

function zipper(done) {
    var targetDir = 'dist/'
    var themeName = require('./package.json').name
    var filename = themeName + '.zip'

    pump(
        [
            src(['**', '!node_modules', '!node_modules/**', '!dist', '!dist/**']),
            zip(filename),
            dest(targetDir),
        ],
        handleError(done)
    )
}

async function deploy(done) {
    try {
        const zipFile = `dist/${require('./package.json').name}.zip`
        const api = new GhostAdminApi({
            url: process.env.GHOST_API_URL,
            key: process.env.GHOST_ADMIN_API_KEY,
            version: `v${require('./package.json').version}`,
        })

        await api.themes.upload({ file: zipFile })
        console.log(`${zipFile} successfully uploaded.`)
        done()
    } catch (err) {
        console.error(err)
        done(err)
    }
}

const build = series(css)

exports.build = build
exports.zip = series(build, zipper)
exports.deploy = deploy
exports.default = build

在 package.json 中插入脚本：

{
    /* ... */    
    "scripts": {
        "build": "gulp build",
        "zip": "gulp zip",
        "deploy": "gulp deploy"
    }
    /* ... */
}

添加 .gitlab-ci.yml 文件：

image: node:14-slim # 注意：不要用 alpine 的镜像，上传至 https 站点会有问题

stages:
    - deploy

deploy:
    stage: deploy
    script:
        - yarn install
        - yarn zip
        - yarn deploy
    only:
        - tags
    cache:
        paths:
            - node_modules/

注意，为了避免每次提交代码都部署，deploy 任务限制了只有打了 tag 的 commit 才会触发。

好了，更新代码，打个 tag 就会自动打包上传至 Ghost 后台了！