Error with 404 page styles

Bootstrap Studio Help
1

Hello everyone!

Here’s a working example with working styles:
https://gregoryam.com/test-404.html

Here’s an example with broken styles:
https://gregoryam.com/test-404/index.html

I am testing this because I was checking out an older link I posted before redesigning my site and realized the styles were not working.

Is there a way to fix this?

I do use the Custom 404 Pages, and I did notice the info box at the bottom mentioning this is supported on Bootstrap Studio hosting platform and for other platforms, it may need to be configured differently / done in a different way.

I use Cloudflare as my Nameserver
I bought the domain from Network Solutions
I upload my files to GitHub and Cloudflare workers publish the page

2

You can use the following approach to handle a 404 Not Found page in your Cloudflare Worker:

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function fetchAndStreamNotFoundPage(resp) {
  const { status, statusText } = resp;
  const { readable, writable } = new TransformStream();

  const response = await fetch("https://gregoryam.com/404.html");
  const { headers } = response;

  response.body.pipeTo(writable);

  return new Response(readable, {
    status,
    statusText,
    headers
  });
}

function isHTMLContentTypeAccepted(request) {
  const acceptHeader = request.headers.get("Accept");
  return (
    typeof acceptHeader === "string" && acceptHeader.indexOf("text/html") >= 0
  );
}

async function handleRequest(request) {
  const response = await fetch(request);

  if (response.status === 404 && isHTMLContentTypeAccepted(request)) {
    return fetchAndStreamNotFoundPage(response);
  }

  return response;
}
1 Like
3

7 Hours late to reply!

But, just wondering:
Would I just create this file within Bootstrap Studio, and have it linked to every page?
or
Is there a specific place on Cloudflare that I could put this?

4

I guess your site isn’t on Cloudflare Workers.
If your website is on Cloudflare Pages, enable “Use Absolute Paths” in the export settings of Bootstrap Studio. This will ensure that the link to your assets folder is /assets/* instead of assets/*, which should resolve the issue of assets not being found.

5

I’ll try that and see if it works!

I made the post on my phone as I was away from the laptop.
I meant Cloudflare Pages, and I connect to GitHub.

Sorry for the confusion :sweat_smile:

Thank you, @kuligaposten