Repository navigation
Deploying to GitHub Pages and using %PUBLIC_URL% #2513
Description
I have followed the directions in the readme to successfully set up and deploy my app to GitHub Pages for a website with a custom domain. When I run npm run deploy it runs everything smoothly and pushes it out to the correct gh-pages branch. The one question I have is related to the %PUBLIC_URL% prefix. It seems like those are being omitted or ignored and instead I see a relative path. Is that something I can add in a config other than in my package.json? As it stands now the following URL will not get output correctly:
Example:
In public/index.html
<meta property="og:image" content="%PUBLIC_URL%/example.jpg" />
this gets output as:
<meta property="og:image" content="/example.jpg" />
Obviously I can simply "hardcode" the actual URL as an easy workaround but I was just curious as to why this was happening.
Thanks,
Ryan
Activity
Timer commentedon Jun 10, 2017
Have you added the
homepagefield to your package.json?ryanwiemer commentedon Jun 10, 2017
@Timer Yes, I have the URL in the homepage field on my package.json.
https://github.com/ryanwiemer/cal-factor/blob/master/package.json#L4
Timer commentedon Jun 10, 2017
That is the correct path, as
/will be the root-most of your domain, disregarding any sub-paths you use for client-side routing. Why do you need the full URL to be displayed?ryanwiemer commentedon Jun 10, 2017
Great question. I suppose it doesn't matter too much. The only thing in particular that seemed to require an absolute path was the following:
I was more interested to see if something was wrong with how I was using the %PUBLIC_URL% prefix or if it was a bug.
Thanks,
Ryan
Timer commentedon Jun 10, 2017
Nope, you're using it correctly!
If you try setting
homepagetohttp://www.example.com/fooyou'll see the path change to/foo/example.jpg.We ask for the full URL but only the path matters.
ryanwiemer commentedon Jun 11, 2017
Got it. I appreciate the help!
aeciolevy commentedon Jul 13, 2017
Hi, guys.
I deployed to GitHub Pages but it can't load the static files, the js and css.
I tried a log of things but it does not work.. If a set a custom domain in Github, should I change homepage on the package.json to my custom domain?
CNAME = www.herbertviana.com
"homepage": "https://aeciolevy.github.io/HerbertBlog/"Timer commentedon Jul 13, 2017
Yes, your
homepageshould bewww.herbertviana.com.aeciolevy commentedon Jul 13, 2017
@Timer I changed the homepage but it does not work.
I don't know what I can do.
My domain is from GoDaddy, on CNAME www I pointed to aeciolevy.github.io
I tried to change it to aeciolevy.github.io/herbertblog however it is not allowed.
I guess the the dns it is ok, because it can get the index.html file font awesome that is there too.
But never get the files inside static file.
https://github.com/aeciolevy/HerbertBlog/tree/gh-pages
Timer commentedon Jul 14, 2017
Sorry, I didn't include the
http://portion in my comment -- make sure it's prefixed correctly (npm startshould yell at you right now)!Timer commentedon Jul 14, 2017
Yeah, it should be because of the missing
http://.aeciolevy commentedon Jul 14, 2017
@Timer it works, thanks a lot!!!!
hauph commentedon Aug 9, 2018
@Timer So sorry for reopening this. I have the same issue like @aeciolevy and @ryanwiemer.
I added 'homepage' to my package.json already, which is
"homepage": "http://hauph.github.io/#/currency-converter"
I added '#' in between 'http://hauph.github.io/' and '/currency-converter' because I followed a solution in this link: https://stackoverflow.com/questions/46056414/getting-404-for-links-with-create-react-app-deployed-to-github-pages
I did so and I also have 'http://' like @Timer said, but it still can not work. Do I have to change it to 'https://'?
It only works after I have fixed the routes to my css, js and images in 'index.html' file and the static folder manually (hardcore way) on gh-pages branch (https://hauph.github.io/currency-converter/)
What must I do to make github pages understand all the routes to my css, js and image files at the first place instead of fixing them manually on gh-pages branch?
The image problem is the worst since github pages get completely wrong route. Instead of 'https://hauph.github.io/currency-converter/static/media/Loading_icon.f4404720.gif', it becomes 'https://hauph.github.io/static/media/Loading_icon.f4404720.gif', which lost the route 'currency-converter' and therefore make it unable to load the image.
I am grateful for any support out there.