Why my React markdown previewer won't work with GitHub Pages?

JavaScript
1

I wasn’t going to ask this and just move on to using Netlify or Vercel. But, the question came up here:
https://forum.freecodecamp.org/t/best-place-to-host-react-projects-for-fcc

So, I thought maybe there might still be hope for github pages. Here goes. The following is a paste of my answer on the above thread.

Here is probably the closest to my issue. But, I’m not using Router or BrowserRouter and I’m not familiar with either one of those yet.

I did not try his #1 attempt. But, I had already tried #2 before I found that thread.
#2 here: GitHub - rafgraph/spa-github-pages: Host single page apps with GitHub Pages

I was about halfway through trying the below solution when I realized I’d probably have to undo everything I’ve tried up to this point first and I thought maybe I’m wasting my time and I should ask where other people put these things.

And, here’s the repo:

The built site is in the gh-pages branch because that’s how several tutorials suggested deploying from “create-react-app” to gh pages.

And, here’s the list of everything I’m using:

It could be one of these plugins or it could just be the urls in the links in index.html from what I’ve read. Sadly commenting out the links didn’t seem to do anything. But, maybe github pages is just very very slow to update and I had it fixed and never noticed because I went on to try something else?

2

Today I finished setting up the .env file suggested in that tutorial here:

# Leave blank or use PUBLIC_URL for running locally
REACT_APP_PATH = PUBLIC_URL

# Github Pages location
# REACT_APP_PATH = "https://markrusselldev.github.io/markd"

Everything works without errors when I run it locally using the PUBLIC_URL.

But, when I switch to the github address by commenting the local path and enabling the github path, saving the file, making sure all files are saved, then pushing to github and then running npm run deploy again… no joy.

Unless github is taking longer than 10 minutes to display updates. I can wait that long between tries but any longer would really take forever.

3

Something weird is going on. Even though I have this in package.json:

 "homepage": "https://markrusselldev.github.io/markd",

And, I have the .env path set to:

REACT_APP_PATH = "https://markrusselldev.github.io/markd"

And, I’m calling it in index.html like so:

<link rel="icon" href="%REACT_APP_PATH%/favicon.ico" />

When I check the network tab of dev tools it says:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). moz-extension:2132:49
and
Content Security Policy: The page’s settings blocked the loading of a resource at https://markrusselldev.github.io/favicon.ico (“img-src”). 2 resource:184:19

Huh? Anyone know what’s up with that? It doesn’t seem to be getting the directory right.

Though, if I edit the request and send it again, the favicon isn’t there either:

Content Security Policy: The page’s settings blocked the loading of a resource at https://markrusselldev.github.io/markd/favicon.ico (“img-src”). 2 resource:146:14

Edit: One last thing… When run locally, while there are no errors on the favicon.ico file, it also doesn’t display.

4

Crickets? Is this the wrong place to ask about this or something?

6

Your build is failing because of the .md file inside the assets folder and some issue with the Jekyll build process.

Liquid Exception: Liquid syntax error (line 96): Variable '{{ // Use h2s instead of h1s h1: 'h2', // Use a component instead of hrs hr: ({node, ...props}' was not properly terminated with regexp: /\}\}/ in static/media/demo.3bb7939089ef07fde638.md

  1. The .nojekyll file needs to be inside the public folder.

  2. You need to add the -t flag to the deploy script to force it to push dotfiles.

"deploy": "gh-pages -d build -t"

I also deleted the .env file and all redirect code you had (you are not using a router) and changed it back to using %PUBLIC_URL%. But I’m pretty sure the main issue was with the .md file and the Jekyll build process.

I’m guessing if you change the .md file to a .js file and just imported the markdown it would work as well.

Example repo and live site

But I would still suggest you just use Vercel, Netlify, or Surge.sh. There always seems to be some random issue with GitHub pages.

1 Like
7

Thank you lasjorg!!!

I had to ask what to do with your help. But, I’m probably just overthinking it.

1 Like
8

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