How to Deploy from GitLab to Cloudflare Pages
When you use GitLab to host your web software development project source code, you can deploy your website to Cloudflare Pages. Normally, you would use the GitLab CI pipeline to build your website project. So in this article, I show you how to configure your GitLab CI to deploy to Cloudflare Pages.
GitLab is a partially open source Git-based hosting and DevOps platform with roots in the Ukraine. With its headquarters in San Francisco, it offers issue tracking, continuous integration and a deployment pipeline. Since GitLab does not offer advanced cloud features like hosting static sites or serverless functions, you can combine GitLab with third-party offerings, for example from the Cloudflare company.
Cloudflare is a cloud hosting company that offers a CDN and other services for website creators. Cloudflare Pages is Cloudflare’s offering oriented towards frontend developers who want to quickly deploy their website. You can connect it directly with GitLab but you need to authorize Cloudflare to access your GitLab repository. When you do not want to allow Cloudflare access to your Git repository, you can deploy the code directly from you GitLab CI pipeline.
Configuring the GitLab CI pipeline
Running a CI pipeline is good practice for every web software project. A CI pipeline is a series of steps that must be performed to deliver a new version of software.
In GitLab there exists the
.gitlab-ci.yml where you configure your build and deployment steps.
.gitlab-ci.yml file is a Yaml file that contains these commands. The commands are executed in the order they are listed.
It includes a definition of
variables that are neccessary for the deployment to Cloudflare Pages. These variables are called
They are passed to the wrangler CLI tool from Cloudflare and are needed to enable authentication. The
wrangler CLI tool is a command line interface to the Cloudflare API. It is used here to deploy the frontend code to the
Cloudflare Pages server.
In order to protect these access tokens, they need to be defined directly in the GitLab settings under
CI/CD. There you need
to expand the
Variables section and add the values. They will subsequently be filled in when the CI pipeline runs.
In the Cloudflare web application, under
My Profile/API Token, you can generate these API tokens. You need to create a token that has at a minimum the rights to
to edit Cloudflare Pages (
Cloudflare Pages:Edit) and to read the membership (
Then you can create the CI deployment script in your GitLab project.
You can use this script as an example:
image: node:16.13 cache: paths: - node_modules/ - .cache/ - public/ pages: variables: CLOUDFLARE_API_TOKEN: $CLOUDFLARE_API_TOKEN CLOUDFLARE_ACCOUNT_ID: $CLOUDFLARE_ACCOUNT_ID stage: deploy script: - npm install - ./node_modules/.bin/gatsby build - npm install -g wrangler --unsafe-perm=true - wrangler pages publish ./public --project-name=your-website --branch=main artifacts: paths: - public only: - master
For this script to work in your project you need to customize the values passed to
wranger, especially the
--project-name. It is the name you chose when creating the Cloudflare Pages project.
Also, you might need to adapt the folder name where the generated frontend code that needs to be deployed is located. In the example above, it is
As I hope you could learn from this article, that integrating a deployment to Cloudflare Pages from the GitLab CI is not very complicated. A similar approach can be used for other CI build applications.
Cloudflare Pages: https://pages.cloudflare.com/
Cloudflare Wrangler: https://developers.cloudflare.com/workers/wrangler/
This work is licensed under a Creative Commons Attribution 4.0 International License.