Cloudflare pages is a service by Cloudflare® that allows you to serve static content on Cloudflare’s edge network, allowing you to serve content quickly to users all around the world. It can also be combined with Cloudflare Workers® to make the content somewhat dynamic as well. In this post I would like to share how to use it to serve .well-known files for your Matrix home server, as well as Element web, a Matrix client that runs in your browser.
First off, I assume that you have both a Cloudflare account, as well as an account on either Github or Gitlab. I will be using Gitlab in this tutorial. You will also need to have git installed on your computer. Start off by creating a new blank repository (or project as Gitlab calls it). The name doesn’t matter, but name it something descriptive so you can find it later. The visibility level shouldn’t matter. I flipped it to Public so that it can be helpful for others. Click create if you haven’t already. You should now be taken to your brand new repository. You can use an existing repository if you want as well.
Next, you will want to clone your project locally. I would recommend setting up ssh auth before cloning as this will make it easier to push your changes later. If you have already done this, you can skip this step. If you don’t know how to do so, follow these steps for Github, or these steps for Gitlab. This is especially important if you use 2 Factor Authentication. Now you can clone it. Open a terminal window on Mac or Linux, or a Powershell window on Windows. Next, change to the directory where you want your project to live (creating it if necessary), find the clone button near the top of your project page, copy the ssh link, type git clone ,and paste the link you got. Type cd <your projects name> to go into the projects repository.
.well-known files.
Now you are ready to add content. First thing is to create the .well-known files for your matrix server. Skip this if you just want to host element and use a public homeserver like matrix.org. Create a new folder named .well-known (notice the period at the front), and create a folder in that folder named matrix (no period this time). Using your favorite text editor (I personally like vim), create a file in the .well-known/matrix folder named client with the following content (replace the URL of the homserver with yours).
{
"m.homeserver": {
"base_url": "https://minecraftchest1-matrix.eastus.cloudapp.azure.com:443"
},
"m.identity_server": {
"base_url": "https://vector.im"
}
}
Next create the file .well-known/matrix/server file with the following content, again replacing the URL with your own. That’s all for the .well-known files. Run the command git add * to tell git about the files, git commit -am 'Add .well-known files' to commit the files, and do a git push to push them back to Github or Gitlab.
{ "m.server": "minecraftchest1-matrix.eastus.cloudapp.azure.com:443" }
Adding Element.
Element is also easy to add. It requires slightly more work to get working correctly, but the steps are all very easy. Download the latest release from https://github.com/vector-im/element-web/releases (the file ending in tar.gz) and extract it to the root of your site (it will extract into a new dir). On Linux, you can use tar -xvf <filename>.tar.gz to extract the file. On Windows, you will likely need a tool line 7zip to extract it. Next, rename the extracted folder if desired. You can also contents down one level if you want it at the root of your site.
Now you need to configure Element. Open the folder that Element lives in and copy config.sample.json to config.json. Open it up and change the homeserver baseurl and server name to the correct values. You can change the other settings, but those are the ones that you are most likely going to want to change.
You can now do git add, git commit and git push if you want, but there is one more thing that needs to be done for Element to work right, and that it configuring CORS (Cross Origin Resource Settings) headers that allow Element to talk to the homeserver. At the root of your repository, create a file named _headers with the following content. Once that is done, add the files to git, commit your changes, and perform a git push
/*
Access-Control-Allow-Origin: *
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
X-XSS-Protection: "1; mode=block"
Content-Security-Policy: "frame-ancestors 'none'"
Serving your repository with Cloudflare pages.
Now you have everything in your repository, we need to serve the content. Login to the Cloudflare dashboard and go to the pages tab on the side, then Create a Project in the top of the middle pane. Select the tab for Github or Gitlab and Signin if you aren’t already. Select the project you want to use, then begin setup at the bottom. Change the project name (which will affect the pages.dev subdomain you get) if desired. You should be able to keep everything else at the defaults, then click save and deploy at the bottom. You should then be taken to the project deployment page. The project will likely take a few minutes to build.
Once it is done, you should get a success message. If not, read through the logs and go back through this post to see of you can figure it out. You can also comment down below and I will be happy to help. Click the Continue to Project button when done and you will be taken to your sites dashboard. And that’s all. I hope this post was helpful for you. Pleas comment below with any feedback you have. Thanks for reading.
Are you on Matrix? Discuss this post at https://matrix.to/#/#minecraftchest1-blog-matrix-elemet-cloudflare:matrix.org
MinecraftChest1's garage 