How to upload H5 demo link on GitHub Page

question

I have tried other people's mini-games before, but I did not access them through other platforms such as WeChat or Byte, but through H5 links. At that time, I was thinking about how to realize it. Now I have studied it and recorded it in this article. Here we mainly discuss how to upload the H5 version of CocosCreator to GitHub Page for trial play .

accomplish

step 1:

First, you need to build the H5 version in CocosCreator. After packaging , web-mobile will exist in the build directory , as shown in the figure below.


It is best to change the packaged folder (web-mobile) to the project name here, because there may be multiple projects uploaded to GitHubPage.

Step 2:

Create a project on GitHub and make the project public. For this step, please refer to the official documentation . But the official documentation may be different from the reader's current GitHub.
The current author's Github Page settings page is shown below:

• Note: If the text description in the above picture does not appear, please wait patiently and refresh it from time to time . When the content in the red box appears, it means that the personal static website can be accessed. You can try to click on the personal static address.

Step 3:

The next step is the most important step. Upload the web-mobile folder built in the first step to Git. The reader's local file structure should look like this:

The structure on GitHub should look like this:

Finally we can access our packaged index.html. If readers follow the above steps, the access address should be as follows:
https://username.github.io/myTestProject/index.html
(username.github.io should be replaced with the address in the red box in step 2 )

• Note: Finally, it should be noted that since the access speed of Github is not as fast as that of domestic websites, there may be a phenomenon of freezing during the trial play.
  Solution:
  1. You can try to use the domestic gitee to upload the H5 link (since the author has not tried it, so I can’t guarantee that there will be no lag).
  2. Use paid static websites of Alibaba Cloud and Tencent Cloud