How to publish a Ionic 5 website on GitHub pages? - github

Question

I already had published some website on GitHub pages with no issue. My common workflow is to build a website, upload in the root (/) or docs (/docs) directory of my repository and set up GitHub Pages in the settings.
This is my first time using Ionic. I wrote a website and I build it by running ionic build --prod.
Than I uploaded my contents to the /docs directory of the repo.
When I visit the website https://<nickname>.github.io/<myrepo>/ it leaves me in a blank page. Inspecting with Google Chrome dev tools, I can see that scripts are referred to https://<nickname>.github.io/script.js instead of https://<nickname>.github.io/<myrepo>/script.js
How can I make it work? What I am doing wrong?
You can find the full source code of my project here. You can build it by yourself and try if there is something wrong. The site is functional when I execute it on my local web server for testing.

Answer 1

How to make any React website work with GitHub Pages
Prerequisites
npm installed
directory containing the React project
git repository set on this directory and linked to the remote on GitHub
Steps to follow
Run npm install gh-pages --save-dev
Edit the package.json file:
Add this line: "homepage": "http://githubname.github.io/repository". Use your nickname and repository name
Add these lines in the scripts section:
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Push a commit
git add .
git commit -m "Create a React app and publish it to GitHub Pages"
git push origin master
Your website is available at http://githubname.github.io/repository
For more info see this page
Additional steps for Ionic 5
If you are using Ionic 5, some errors can still occur.
In this case, visit the website on http://githubname.github.io/repository and open the Chrome Inspector Tools (CTRL + SHIFT + I).
Look at the Console: some JS or TS script could be not loaded. You can see that the browser is looking at the scripts in a wrong path.
By manually editing the index.html you can point the script to the right URLs.
Upload the edited index.html in the gh-pages branch of your GitHub repo and you are good to go.