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

GitLab is a partially open source Git-based hosting and DevOps platform with roots in 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 Pages

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 your 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. The .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 necessary for the deployment to Cloudflare Pages. These variables are called $CLOUDFLARE_API_TOKEN and $CLOUDFLARE_ACCOUNT_ID. 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 (Memberships:Read).

Then you can create the CI deployment script in your GitLab project.

You can use this script as an example:

.gitlab-ci.yml

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

This script statically generates a static JavaScript website using Gatsby and deploys it to Cloudflare Pages using wrangler. 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 ./public.

Conclusion

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.

References

• GitLab: https://gitlab.com/

• Cloudflare Pages: https://pages.cloudflare.com/

• Cloudflare Wrangler: https://developers.cloudflare.com/workers/wrangler/