> For the complete documentation index, see [llms.txt](https://docs.hology.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hology.app/release/distribution/host-with-github-pages.md).

# Host with GitHub Pages

You can deploy your game as a website using GitHub Pages. GitHub Pages allows you to host your HTML, CSS, and JavaScript files for free. Also, GitHub actions enable you to automatically update your game whenever you push changes to your GitHub repo.

Here's a step-by-step guide for how to set up deployment to GitHub Pages with automatic deployment using GitHub Actions. \\

## Steps

### Step 1: Setup GitHub Actions

Create a file with the following contents in your repository with the path `.github/workflows/deploy.yaml`\\

```yaml
name: GitHub Pages Deploy
on: 
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
      - name: Install dependencies
        working-directory: ./
        run: |
          npm ci
      - name: Compile
        working-directory: ./
        run: |
          npx tsc && npx vite build --base=./
      - uses: actions/upload-artifact@main
        with:
          name: page
          path: dist
          if-no-files-found: error
  deploy:
    runs-on: ubuntu-latest
    # Add a dependency to the build job
    needs: build

    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write      # to deploy to Pages
      id-token: write   # to verify the deployment originates from an appropriate source

    # Deploy to the github-pages environment
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/download-artifact@main
        with:
          name: page
          path: .
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: .
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
```

### Step 2: Enable GitHub Pages

Before pushing your changes, you need to enable GitHub pages. On your repository in GitHub, go to settings, pages, and select GitHub Actions as a source under Build and deployment.

<figure><img src="/files/OrmAT50aTUpPWopdigkK" alt=""><figcaption></figcaption></figure>

### Step 3: Push your code

Next time you now push any commit in the branch called `main`, the GitHub Action will run, build your project and deploy to GitHub Pages.

### Step 4: Setup a domain

While not necessary, you can setup a custom domain name for your game. You can read more about this at this link.

{% embed url="<https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.hology.app/release/distribution/host-with-github-pages.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.