Automate Plone Theme upload with Gitlab

Build and Deploy a Plone theme using Gitlab CI / CD auto-deployment.

Brief History

Before Plone 4.3, any new or updated theme would have to be uploaded manually through the ZMI portal_resources interface. In Plone 4.3 and above, the Theme Controlpanel was added to allow users to upload or modify themes without having to deal with the ugly ZMI interface. However, this approach was still somewhat manual, and it goes keep a reliable track of the version of our themes. In recent years, Asko Soukka made a command line tool, Plone Theme Uploader, which could directly upload a theme to a Plone site. There's still some manual work to be done.

The Issue

There are many instances where a development team, at least my team, want a smooth development to production pipeline with version tracked theme. Manually, this is possible with Git and Plone Theme Uploader, which a developer would pull the latest changes and execute the upload command or upload the theme via the theme control panel. The problem is, someone has to do it from the command line or manually zip it and upload it.

The Big Picture

  • A developer pushes the changes for the theme to the git repository.
  • The CI / CD tests the changes or other developers review the changes.
  • Once approved by other developers or the CI / CD, the changes merged into master.
  • Once merged, the lead developer can deploy the changes to the plone site by creating a new tag.

Also, if there is a need for redeployment of previous versions of the theme, it can just be done with a click of a button.

The Solution

  • Create a private gitlab variable by going to your CI / CD settings (<path-to-repo>/settings/ci_cd)
  • Expand the variable collapsed content, and enter your plonekey has key and the content of .plonetheme-upload-cookie has the value. Afterwards, click save variables. 
  • In your gitlab-ci.yml file, located in the root of your repository, add the following lines of code: 
image: node:latest

 stage: deploy
  - sed -i "s/title = [[Title of your theme]]/title = [[Title of your theme]] $CI_COMMIT_REF_NAME/g" manifest.cfg
  - cat manifest.cfg
  - echo $plonekey > ../.plonetheme-upload-cookie
  - npm install -g bower
  - bower install --allow-root
  - cd ..
  - npm install -g plonetheme-upload
  - plonetheme-upload --enable [[namespace-your-theme]] [[url-for-your-plone-site]]
  - tags
  • In the snippet above, replace [[Title of your theme]] placeholder with the title of your theme.
  • Replace [[namespace-your-theme]] placeholder with the short name of your repository.
  • Replace [[url-for-your-plone-site]] placeholder with the URL of your plone site.
  • Click save

Finally, create a new tag from the master branch and view the CI job for that tag to ensure it uploaded successfully.