How to publish a Ionic 5 website on GitHub pages?

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.