Hosted Plenti CMS to Cloudflare Pages

[jamestagal]

Hi all

Just wanted to share a win with being able to successfully deploy and host a Plenti CMS site with Cloudflare Pages.

Assumptions:

1. Site was hosted using GitLab Pages and DNS managed with Cloudflare with a custom domain name https://jellybeanjourney.com/

My .gitlab-ci-yml file is as follows:

image: node:20.11.0

stages:
  - deploy

deploy_prod:
  stage: deploy
  before_script:
    - apk add --update curl wget && rm -rf /var/cache/apk/*
  script:
    - wget https://github.com/plentico/plenti/releases/download/v0.6.62/plenti_0.6.62_linux_64-bit.tar.gz
    - tar -zxvf plenti_0.6.62_linux_64-bit.tar.gz
    - ./plenti build
    - npm install wrangler -g
    - mkdir -p ~/.wrangler
    - echo "{\"api_token\":\"$CLOUDFLARE_API_TOKEN\"}" > ~/.wrangler/config.json
    - wrangler pages deploy ./public --project-name="$CLOUDFLARE_PROJECT_NAME" --branch=main --commit-message="Deployed via GitLab CI $(date)"
  artifacts:
    paths:
      - public
  only:
    - main

Steps to configure:

In Cloudflare:

1. Go to Pages > Create a project
2. Choose "Direct Upload" because we're using GitLab CI
3. Create a name for your project
4. from My Profile > API Tokens
5. Click "Create Token"Create a User API Token & Copy the generated token
6. Use "Edit Cloudflare Pages" create custom with:
   • Account: Pages: Edit permission

In your GitLab project:

1. Go to Settings > CI/CD > Variables
2. Add these variables:
   • CLOUDFLARE_ACCOUNT_ID (from your Cloudflare dashboard URL)
   • CLOUDFLARE_PROJECT_NAME (the name you gave your Pages project)
   • CLOUDFLARE_API_TOKEN (the API token you just created)

In your local project:

1. update or add a redirect_url with your Cloudflare Pages dev url (plentifyplumbing.pages.dev) **(initially and later with custom domain) in your plenti.json config file
2. update or add this redirect url to your Application ID in Applications in GitLab
3. update and push new .gitlab-ci.yml config to remote
4. verify it works at your Pages dev url (plentifyplumbing.pages.dev)
5. Update the DNS records for custom domain
   -- CNAME jellybeanjourney.com -> plentifyplumbing.pages.dev
   -- CNAME www -> plentifyplumbing.pages.dev
6. Add the custom domains in Cloudflare Pages settings
   -- jellybeanjourney.com
   -- www.jellybeanjourney.com

**Note: After adding my custom domain, I had to update my redirect_url in the App ID in GitLab and in my Plenti CMS config custom domain otherwise the authentication didn't direct to the custom domain when using the Cloudflare Page dev url.

Hope that helps folks looking at using Cloudflare Pages to host a Plenti CMS site.

Best regards,
Ben

[jimafisk]

Thanks for putting together this guide @jamestagal, I think it will be helpful to a lot of folks! This illustrates a really good point that you can deploy to any number of static hosting solutions, and as long as you're using a Plenti supported OAuth + CI/CD combo, in this case GitLab, the CMS will still work (you can build in any CI if you don't care about the CMS).

Your site looks awesome too, another great project!

[jamestagal]

Thanks @jimafisk

Yes indeed and the CMS does work as expected. 😁 It nice to have a range of deployment options with or without using the CMS. And hosting with Cloudflare Pages is great because you can manage your site's DNS and take advantage of their CDN and security features for free and email routing just to mention a few.

I did notice that the build step seems to take a little longer (maybe a minute) and it's probably because it takes longer to install node than the docker image. But maybe you can adjust the script to install node in the before script and keep the image as docker like this>? BTW deploying with Cloudflare Pages requires Node.js to run Wrangler (Cloudflare's CLI tool).

image: docker:stable

deploy_prod:
  stage: deploy
  before_script:
    - apk add --update curl wget nodejs npm && rm -rf /var/cache/apk/* 

[jimafisk]

Yeah additional services can definitely slow things down in CI. If the package is included in the project, you could just do a plenti npm install to avoid adding Node / NPM to the container at all, but in this case it seems like you need Wrangler installed globally so that probably won't help. If you look at your build logs, it should give you profiling info on each build step so you can see what is slowing things down.