Using Pages With Self Hosted Git or Not Renowned Git Hosting

This is not a question but a answer to the question I had. I was using codeberg.org for hosting my blog’s source code but I wanted to deploy it to Cloudflare Pages where you have to either connect to a GitHub/GitLab repository or just directly upload your assets.

There’s a third way which I found in the documentation, that was using wrangler

Make sure you have bun or npm installed, I will be using bunx that is provided by bun but if you have npm then you need to simply replace bunx with npx

  1. Login to Wrangler using your Cloudflare Account

    $ bunx wrangler login
    
  2. List Cloudflare Pages Project

    $ bunx wrangler pages project list
    ┌──────────────┬─────────────────┬──────────────┬───────────────┐
    │ Project Name │ Project Domains │ Git Provider │ Last Modified │
    ├──────────────┼─────────────────┼──────────────┼───────────────┤
    │ 0ref         │ 0ref.pages.dev  │ No           │ 5 minutes ago │
    └──────────────┴─────────────────┴──────────────┴───────────────┘
    

    Here I Already Have a project named 0ref, For the sake of this guide, I will create a new one but If you already have created a new one, you can skip the next step.

  3. Create Cloudflare Pages Project

    • You can create a new project using this command:
      •  bunx wrangler pages project create your-project-name --production-branch master
        
      1. Here your-project-name is obviously the name of your project but this will also determine the .pages.dev subdomain you’ll get, If there’s no existing project with the name you’re trying to get then you’ll simply get that subdomain, else there will be some random string attached to it.
        • To make sure your subdomain is available simply goto your-project-name.pages.dev and If it is available then you should see a 404 message that site could not be found.
        • Subdomains are not changeable, meaning after creating a project if you want to change the subdomain you will have to create a new project.
      2. The --production-branch is the branch that your project will use in production, any changes to this branch will be directly available on your website, This branch doesn’t have to match with your git repository’s branch because you can configure which branch to push your website to using wrangler.
      3. I created a project for this guide
        $ bunx wrangler pages project create pages-guide-using-wrangler --production-branch master
        ✨ Successfully created the 'pages-guide-using-wrangler' project. It will be available at https://pages-guide-using-wrangler.pages.dev/ once you create your first deployment.
        
  4. One-time Configuration Done, It’s Time To Deploy
    Deploying is as easy as running the command below:

    $ bunx wrangler pages deploy your-project-build/ --project-name your-project-name --branch your-branch
    
    1. Here your-project-build/ is path to the directory where your website’s built assets are, NOT the source code, but the built assets.
    2. The your-project-name is the name of your project you want to deploy to.
    3. And your-branch is the branch the project will be deployed to, If you want to deploy it directly to be visible to everyone you can deploy it to the branch you chose when creating the project, in our case that was master.
      • But you can deploy to other branches like beta, and your website will be deployed to beta.your-project-name.pages.dev, which can be useful for preview builds.
    4. Finally Deploying My Example Site:
      $ bunx wrangler pages deploy website/ --project-name pages-guide-using-wrangler --branch master
      🌏 Uploading... (1/1)
      ✨ Success! Uploaded 1 files (1.75 sec)
      ✨ Deployment complete! Take a peek over at https://86dcb715.pages-guide-using-wrangler.pages.dev
      
      It will give you a URL you can view your site on, or If you deployed to production then you can simply visit your site on your-project-name.pages.dev.

You can view my deployment here: https://pages-guide-using-wrangler.pages.dev, But I can’t confirm If it will be available in future or not, but this Guide surely will be.

I might not be able to update this guide but you can always refer to official Cloudflare docs for It: Commands - Wrangler · Cloudflare Workers docs

Finally, The Step 4. is the step you will be using the most, and In my case I wrote a shell script which automatically built and deployed my website to cloudflare pages:

#!/bin/bash

# deploy.sh

set -eu

COMMAND="${1:-deploy}"

if [ "$COMMAND" == "install-hook" ]; then
	ln -v $0 ".git/hooks/pre-push"
	exit 0
fi

# Check if there are commits to push: https://stackoverflow.com/a/48354942/14516016
if git merge-base --is-ancestor HEAD @{u}; then
	echo "Nothing to deploy"
	exit 0
fi

BUILD="./build/"

rm -rf $BUILD

# Build Process
DENO_ENV=production deno task build --dest $BUILD

# Deploy to Cloudflare Pages
bunx wrangler pages deploy $BUILD --env production --project-name 0ref --branch master --commit-dirty true --no-bundle

rm -rf $BUILD

exit 0

The script is simple, you can either run it as:

  • ./deploy.sh install-hook in which it will install a pre-push git hook which will run this script everytime you run git push.
  • or you can run it as ./deploy.sh or ./deploy.sh deploy in which case it will deploy your website

NOTE: the script only deploys your website if there are commits that haven’t been pushed yet.
NOTE: this script is written for my use case, but for your use case you will have to update the section where build happens and also you will have to update the project name in the deploy section of the script.

1 Like

Thanks for sharing this!

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.