Why "git-hub pages" are blank when using my local babylon project

Hello all,

I found this tutorial: Introduction To Creating Games | Babylon.js Documentation
and this Git repository of the game: GitHub - BabylonJS/SummerFestival: Source code for game tutorial written by capucat
Inside the games’ repository, in the readme file, there’s a link to the game, the game is played using github.io - this means the game is hosted with github pages (please correct me if I’m wrong).
And I think it is possible to host the local babylon.js projects with GitHub Pages, right?

What I’ve done so far:
Based in the project above, I’ve created a public repository for testing: GitHub - EcoEditor/pages_test
Made sure the “main” branch is called master%20on%20GitHub.),
Renamed the “public” folder to “docs” - as the github pages can reference root or docs directories.
Added theme from the Settings/Github pages, and _config.yml file was added to the docs folder.
pushed to the master, and clicked on the link: Particle system test | pages_test

and one of two things would happen:

  1. the webpage would display the ReadMe file
  2. the webpage would be blank

I looked at the console in dev tools, and there were no errors, no 404 or anything - not even the log I’ve added to the app.ts.
I opened the test project of mine in the local host, and the project loaded correctly.

I tested with another index.html file I’ve created based on simple web page tutorial I did, (with the content being inside the .html file), and it worked - the content I’ve added to the .html (such as header and etc…) were displayed and hosted with github pages.

Another question I have, how come the game tutorial is using github pages but didn’t rename their “public” folder to “docs”, and it is still working?

I heard people use jekyll to upload their projects to github pages.
Is that the solution you’d recommend in such case?
How do you upload your local babylon projects to github pages?

Thank you

The page won’t render in Github, because the entry file does not reference a compiled version of the appication (which lives in /src).

When you run npm start, Webpack runs a webserver, complies your application and puts a script file to it in the index.html served (because it is instructed so in webpack.config.js, the inject: true part). It also recompiles the application on each file change.

Check View Page Source of Github version and local version and you’ll notice the difference.

I don’t think this tutorial covers publishing of the game, it focuses on the creation part.

If you want to publish it, an easy way is to run npm run build, copy the contents of /build directory in /docs and push the resulting /docs to Github. This is not considered a good practice since it requires putting the build artifacts in git thus muddying the version history, but that certainly should not stop you from seeing your application published on the Internet :slight_smile:

3 Likes

Thank you! it worked.