# 使用 GitHub Pages

您可以使用 GitHub Pages 的網站發布遊戲。GitHub Pages 允許您免費託管 HTML、CSS 和 JavaScript 文件。此外, GitHub Actions 使您能夠在每次推送更改到 GitHub 儲存庫時自動更新遊戲。

以下是使用 GitHub Actions 設置自動部署到 GitHub Pages 的步驟指南。 <br>

## 步驟

### 步驟 1: 設置 GitHub Actions

在您的儲存庫中創建一個路徑為 `.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
```

### 步驟 2: 啟用 GitHub Pages

在推送更改之前,您需要啟用 GitHub Pages。在 GitHub 的儲存庫中, 進入設置, 選擇 Pages, 然後在構建和部署下選擇 GitHub Actions 作為源。

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

### 步驟 3: 推送您的代碼

下次您推送任何commit到名為 main 的分支時,GitHub Action 會運行,構建您的項目並部署到 GitHub Pages。

### 步驟 4: 設置域名/domain

雖然不是必需的,但您可以為您的遊戲設置自定義域名(custom domain)。您可以在此連結閱讀更多相關信息。

{% 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: 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:

```
GET https://docs.hology.app/zh-tw/release/you-xi-fa-xing/shi-yong-github-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.