Use GitHub Actions and Pages to Host your Godot Engine Game

What are GitHub Pages?

GitHub Pages is a static site hosting service provided by GitHub, a popular platform for hosting software projects using the Git version control system. GitHub Pages allows users to create websites directly from their GitHub repositories.

Why Use GitHub Pages?

GitHub Pages offers several benefits, including free hosting for static websites, seamless integration with GitHub repositories for version control and deployment, support for custom domains, and the ability to leverage Jekyll for simplified site generation with Markdown. With access to the broader GitHub ecosystem, users can tap into a wealth of community support, documentation, and integrations. GitHub Pages also provides security and reliability through GitHub's infrastructure, making it an attractive option for developers, open-source projects, and individuals seeking an easy-to-use platform for publishing content online.

Contents

1. Create a GitHub repository
2. Create a Godot project
3. Configure Godot project
4. Enable GitHub Pages
5. Conclusion

1. Create a GitHub Repository

1. Navigate to https://github.com/new . Enter your repository name. Optionally, enter a description, gitignore, and license. Select "Create repository".

2. Select "Code" > "Open with GitHub Desktop" (assuming you use GitHub Decktop )

3. Select "Clone"

2. Create a Godot Project

1. Select "+ New"

2. Name your project and then select "Create & Edit". Select "OK" when prompted that the folder is not empty.

3. Select "2D Scene"

4. Select "+" and search for Label. Select the label control and then "create".

5. For "Text", enter Hello, Godot!

6. Press [Ctrl]+[S] to save the scene as main.tscn

7. Open Project Settings

8. Select "Application" > "Run" and then select the folder icon next to "Main Scene"

9. Select "main.tscn" and then "Open"

3. Configure Godot Project

1. Select "Project" > "Export..."

2. Select "Add.."

3. Select "Web"

4. Select the folder icon next to "Export Path"

5. Select "Create Folder"

6. For "Name", enter docs and then select "OK"

7. For "File:", enter index.html and then select "Save"

8. For "Head Include", enter <script src="coi-serviceworker.js"></script>

9. Select "Export Project..."

10. Select "Save" (ensuring the File is still "index.html")

11. Download coi.js and move it to /docs. The coi.js library gets us around a Pages hosting issue involving Cross-Origin Isolation and SharedArrayBuffer.

12. In GitHub Desktop, enter a commit message and then select "Commit to main"

13. Select "Push Origin"

4. Enable GitHub Pages

1. On the repo's main page, select "Settings"

2. Under "Code and automation", select "Pages"

3. For "Branch", select "main"

4. For "Folder", select "/docs"

5. Select "Save"

6. Select the gear icon next to "About"

7. Select "Use your GitHub Pages website" and then "Save changes". My URL has my website because I also host my portfolio on GitHub Pages.

5. Conclusion

Now each time the repo is updated, a GitHub Action will build and deploy the website in the /docs directory. You can go to the "Actions" tab of your repo to see the progress and troubleshoot any issues.