Wrangling in My Site

  2025/12/10

Category: Linux
Other Categories: Personal, Windows, All

I have been hosting my website on GitLab for a few years now. I have used Cloudflare Pages and they would receive an indication when my GitLab project is updated. The project is copied to Cloudflare and they process it using NodeJS and putting the result on their servers as a static site. This has worked great for years and I paid nothing for them to do this. I just updated my GitLab project and my site would get updated in a few minutes. However, a few days ago it started failing and the site never updated.

I searched for why this was happening. I made modifications to my CloudFlare setup like updated my NodeJS version variable in the setup. But it still did not function like before. I search on Google for answers and read that Cloudflare was going from Pages to Wrangler. I got lucky and found a man's blog post where he had went from Pages to Wrangler despite the confusing documentation on Cloudflare. I suppose if you were doing this setup for this process for the first time it would be easier. Here is what I did.

I installed Wrangler with npm i -D wrangler@latest in terminal.

Once installed, I run npx wrangler login, which will open a browser window asking you to sign in to Cloudflare and authorize wrangler.

But I wanted to maintain my work flow as before and just incorporate Wrangler in it. I use 11ty and NodeJS in docker. I covered how I do this here. I first I created a wrangler.json file and placed it in the root of my project. The date does not really matter you just need one and the 404 file handling has to be 404-page. I have DNS setup with Cloudflare I can not use .com as indicated below listed as the site name in routes.

{
  "name": "quotedstrings",
  "compatibility_date": "2025-12-10",
  "assets": {
    "directory": "_site",
    "not_found_handling": "404-page"
  },
  "routes": [{ "pattern": "quotedstrings", "custom_domain": true }],
}

You do not want the wrangler.json file to upload so add .wrangler/ to your .gitignore file.

This solved the confusing issue with all this and I really appreciated to man's post about it. Saved me a lot of research. This is my new package.json file. I only update scripts definitions. But I left "serve": "eleventy --serve", so my old process would work. Wrangler updated the file itself as far as devDependancies.

{
  "name": "quotedstrings",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "eleventy --serve",
    "11ty:build": "npx @11ty/eleventy",
    "11ty:watch": "npx @11ty/eleventy --watch --quiet --ignore-initial",
    "11ty:benchmark": "DEBUG=Eleventy:Benchmark* npm run build",
    "build": "11ty:build",
    "util:rimraf": "npx rimraf _site",
    "util:killport": "npx kill-port --port 8787",
    "start": "npm-run-all util:rimraf util:killport 11ty:build --parallel 11ty:watch wrangler:dev",
    "wrangler:dev": "npx wrangler dev --live-reload",
    "wrangler:deploy": "npx wrangler deploy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1",
    "@11ty/eleventy-navigation": "^0.3.5",
    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
    "wrangler": "^4.53.0"
  },
  "dependencies": {
    "markdown-it": "^14.1.0"
  }
}

First run a normal build until git is good and do a normally upload to your Git repository. Then run npm run start in a terminal in your project root. If using VSCodium like I do, just open a terminal in your project. But the wrangler setup will process.

Then run npx wrangler deploy and your site gets updated. Sure Cloudflare records telemetry but for something that is free how can I complain about it.

My old process is still there. I run make npm run serve to run the site locally in my browser. I run git commit -a -m "my note here" and then git push origin main to update my GitLab project. Then I just run npx wrangler deploy afterward to update the site.

GitLab does error for the build. I get an email about it. I have not figured that out yet. I will do a short post when I do figure it out or just edit this one.

Wish to add a comment? Please include your name to display in your comment or anonymous.

Your email address will never be shared with anyone.