Pm2022: Pm2022 moved page BOSS/Hosting/Cloudflare to Cloudflare

2026-08-26T08:06:41Z

Pm2022 moved page BOSS/Hosting/Cloudflare to Cloudflare

← Older revision	Revision as of 08:06, 26 August 2026
(No difference)

Pm2022: cat

2026-08-26T07:52:30Z

cat

← Older revision		Revision as of 07:52, 26 August 2026
Line 72:		Line 72:

	* See [https://developers.cloudflare.com/workers/ Cloudflare documentation]		* See [https://developers.cloudflare.com/workers/ Cloudflare documentation]

			[[Category:BOSS hosting methods]]
			[[Category:Bath Open Source Society]]

Hw2210: Translate from boss.bathcs.com

2026-06-04T08:40:41Z

Translate from boss.bathcs.com

New page

Cloudflare offers free hosting (with unlimited access) using their “Pages” (for static pages) and “Workers” (for non-static pages).

{{Note|text=
If you are wanting to do this for <code>bathcs.com</code> you need super-admin access to the BathCS account.
}}

== Pages ==

We will be using Cloudflare Pages for all static pages (due to the university not allowing static page hosting on their GitLab instance due to security concerns).

We integrate these into the CI (using secrets to make sure people cannot just access our account).

We will explain the setup required for this to work, the Pages docs can be found on [https://developers.cloudflare.com/pages/ Cloudflare documentation on pages].

=== Setup ===

{{Note|text=
A student with super-admin access to the Cloudflare account will have to perform these steps. This means a BathCS admin is needed.
}}

We will be directly uploading the output directory to Cloudflare, explained on [https://developers.cloudflare.com/pages/get-started/direct-upload/ Cloudflare’s direct upload documentation] and [https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/ continuous deployment documentation]

<ol style="list-style-type: decimal;">
<li>You could add <code>wrangler</code> as a development package, but there is usually no point and just using <code>deno</code>
<syntaxhighlight lang="sh">deno add npm:wrangler --dev --frozen=false</syntaxhighlight></li>
<li>You will then have to add a project to Cloudflare. This can be done via the CLI or the dashboard (which will ask you to login to Cloudflare):
<syntaxhighlight lang="sh">deno run --no-lock npm:wrangler pages project create</syntaxhighlight>
Please make sure you set the production branch to <code>main</code> – it will default to the current branch, which might be an issue later. See [https://www.geeksforgeeks.org/how-to-change-git-default-branch-from-master/ geeksforgeeks] for how to change this.</li>
<li>You will then have to create a new API token for the BCSS account which is explained by [https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/#generate-an-api-token Cloudflare API token documentation]. Please make sure that “BCSS” is the only account included (and created with the shared Cloudflare account and not simply by a member of BCSS).

{{Note|text=
Each website/project should have its own API key for security reasons
}}

Please save this API token in the Admin organisation on VaultTub with its respective name (it will not be shown again).</li>
<li>Add the API token to the GitLab CI/CD variables (go to Settings > CI/CD > Variables).
There should be two variables added:
<ul>
<li><code>CLOUDFLARE_ACCOUNT_ID</code>: Set to the BCSS account id</li>
<li><code>CLOUDFLARE_API_TOKEN</code>: Set this to the API token generated</li></ul>

These should be marked as “Protected” and “Masked”
This is sadly less secure than a secrets manager, however we have yet to find a free one, so please limit Maintainer access to the project.</li>
<li>Update the pipeline to a build script
If you want some good example structures, we use [https://gitlab.bath.ac.uk/cs/components GitLab CI components] for standardised checks and deployment, please see the pipeline in [https://gitlab.bath.ac.uk/cs/services/froom/-/blob/dev/.gitlab-ci.yml?ref_type=heads froom] or [https://gitlab.bath.ac.uk/cs/services/wiki/-/blob/main/.gitlab-ci.yml?ref_type=heads our policies wiki] for examples of how to use them. Below is a raw example of how it works behind the hood (note building should be separated into its own pipeline)
<syntaxhighlight lang="yaml">deploy:
stage: deploy
tags:
- shared_runner
before_script:
- deno install
script:
- deno run build
- deno run -A npm:wrangler pages deploy <out-dir> --project-name=<project-name>
rules:
- if: '$CI_COMMIT_BRANCH == "$CI_DEFAULT_BRANCH"
when: always</syntaxhighlight>
The production branch name should be the branch name you chose in part <code>2.</code>, which hopefully should be <code>main</code>.</li>
<li>Add custom domain for Cloudflare pages. Go to the Cloudflare dashboard and find the project in the “Workers & Pages” section. And then select “Custom domains” and click “Set up a custom domain”. If you type a hostname on the domain “bathcs.com”, it should do everything for you 🎉.</li></ol>

== Workers ==

We have yet to implement Workers properly and so there is a summary of [https://developers.cloudflare.com/workers/ Cloudflare workers documentation]

This has the downside that projects normally need to be written mostly from the ground up to work with workers (so it’s great if you are just about to start a new project).

If you are going to write a project for Workers, we recommend checking out their [https://developers.cloudflare.com/workers/languages/rust/ Rust support] (and using that if you can) as JavaScript is still really bad for security.

You may also want to design your project in a way that you can easily host it as a docker container (e.g. using <code>axum</code> and refactoring significantly). This mostly just makes it easy for debugging and is a backup if Cloudflare decides to make Workers cost money.

=== Resources ===

* See [https://developers.cloudflare.com/workers/ Cloudflare documentation]

Cloudflare - Revision history

Pm2022: Pm2022 moved page BOSS/Hosting/Cloudflare to Cloudflare

Pm2022: cat

Hw2210: Translate from boss.bathcs.com