Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(zh-tw): Update guides/deploy/github.mdx #11011

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions src/content/docs/zh-tw/guides/deploy/github.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
---
title: 將您的Astro網站部署到GitHub Pages
description: 如何透過GitHub Pages將您的Astro網站部署到網際網路上
Comment on lines +2 to +3
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
title: 將您的Astro網站部署到GitHub Pages
description: 如何透過GitHub Pages將您的Astro網站部署到網際網路上
title: 將 Astro 網站部署到 GitHub Pages
description: 如何透過 GitHub Pages 將 Astro 網站部署到網際網路上

這邊中文與英文之間要加空格。然後絕大多數 your 即使去掉也不會更改原意,如果要加您的話,翻譯指南寫說應該用你而不是您。

sidebar:
label: GitHub Pages
type: deploy
i18nReady: true
---
import { Steps } from '@astrojs/starlight/components';

你可以透過 [GitHub Pages](https://pages.github.com/) 直接從 [GitHub](https://github.com/) 的儲存庫中部署你的 Astro 網站。

## 如何部署

你可以透過 [GitHub Actions](https://github.com/features/actions) 將你的 Astro 網站自動搭建並部署到 GitHub Pages 網站上。為了這麼做,你應該將你的網站原始碼託管至 GitHub。

Astro 維護了一個官方的 `withastro/action` 幫助你部署你的專案。按照下方的說明即可讓你快速將 Astro 網站部署進 GitHub pages,並請在需要更多資訊時,可以檢視[這個讀我檔案](https://github.com/withastro/action)。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的 ‘README’ 在我看来是不需要翻译的,但我不清楚在zh-tw 的语境中如何。

另外这里似乎缺少了 with very little configuration 的翻译

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是有這個翻譯,我不會用,但不反對別人用


## 為 GitHub Pages 配置 Astro 專案

為了將 Astro 網站部署至 GitHub Pages,我們需要先對原本的 Astro 配置文件做些許變更。按照下方的說明即可,如果你不知道自己該怎麼做的話。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这一部分是所说的新加的部分?
我认为这里是不需要的。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可以看一下这里的写作指南部分,https://contribute.docs.astro.build/guides/writing-style/


### 部署至一個 `github.io` 的網址
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### 部署至一個 `github.io` 的網址
### 部署至 `github.io` 的網址

不用加一個,英文如果沒加 a 就會是文法錯誤,但中文因為沒有單複數的概念,所以只會在需要強調數量的時候才會加上數量,這個剛好就是不加數量也沒差的狀況。


請在`astro.config.mjs` 的配置文件中設定 [`site`](/zh-tw/reference/configuration-reference/#site) 與 [`base`](/zh-tw/reference/configuration-reference/#base) 兩個選項。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
請在`astro.config.mjs` 的配置文件中設定 [`site`](/zh-tw/reference/configuration-reference/#site)[`base`](/zh-tw/reference/configuration-reference/#base) 兩個選項。
請在 `astro.config.mjs` 的配置文件中設定 [`site`](/zh-tw/reference/configuration-reference/#site)[`base`](/zh-tw/reference/configuration-reference/#base) 兩個選項。

配置文件應改成設定檔以貼近台灣習慣。原文沒有所以去掉也沒關係,但留著也沒關係。


```js title="astro.config.mjs" ins={4-5}
import { defineConfig } from 'astro/config'

export default defineConfig({
site: 'https://astronaut.github.io', // 你的 GitHub Pages 網址
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里注释也是多余的,因为下面有具体的说明

base: 'my-repo',
})
```

#### `site`

請確保你的 `site` 值應為以下的其中之一:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
請確保你的 `site` 值應為以下的其中之一
請確保 `site` 值為以下的其中之一

感覺確保跟應只能二選一


- 以你的使用者名稱產生的 GitHub.io 網址,如:`https://<username>.github.io`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个 Github.io 我认为也是多余的

- 為 [GitHub 組織的專有頁面](https://docs.github.com/en/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site) 所產生的亂數網址,如:`https://<random-string>.pages.github.io/`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
-[GitHub 組織的專有頁面](https://docs.github.com/en/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site) 所產生的亂數網址,如:`https://<random-string>.pages.github.io/`
-[GitHub 組織的不公開頁面](https://docs.github.com/en/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site) 所產生的亂數網址,如:`https://<random-string>.pages.github.io/`

這裡的 private 應該是與 public 相對的,不公開給大家看的意思。或許應該翻成不公開比較適合。


#### `base`

可能需要為 `base` 設定一個值,以便 Astro 將你的儲存庫名稱(例如 `/my-repo`)視為你網站的根目錄。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
可能需要為 `base` 設定一個值,以便 Astro 將你的儲存庫名稱(例如 `/my-repo`視為你網站的根目錄
你可能需要為 `base` 設定一個值,這樣 Astro 才會將儲存庫名稱(例如 `/my-repo`視為網站的根目錄

純建議,以便也可以


:::note
如果你的情況符合以下其中之一,請不要為 `base` 參數設定值:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
如果你的情況符合以下其中之一,請不要為 `base` 參數設定值
如果你的情況符合以下其中之一,請不要設定 `base` 參數

我覺得為 base 參數設定值這說法有點怪怪的,因為這樣好像說設定有一個 base,但是不要設定值,不要設定 base 就不要加 base: "..." 就好了嘛。應該直接說「不要設定 base 參數」就好了?後面 L78 也一樣。


- 如果你的頁面由根資料夾所提供。
- 如果你的原始碼儲存庫在 `https://github.com/<USERNAME>/<USERNAME>.github.io`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- 如果你的原始碼儲存庫在 `https://github.com/<USERNAME>/<USERNAME>.github.io`.
- 如果你的原始碼儲存庫在 `https://github.com/<USERNAME>/<USERNAME>.github.io`

:::

`base` 的內容應該是你的儲存庫名稱,並以正斜線開頭,例如 `/my-blog`。這樣做是為了讓 Astro 理解你的網站根目錄是 `/my-repo`,而不是預設的 `/`。

:::caution
當設定了這個值後,你所有的內部頁面連結都必須以你的 `base` 值作為前綴:

```astro ins="/my-repo"
<a href="/my-repo/about">關於本站</a>
```

你可以在 [設定 `base` 值](/zh-tw/reference/configuration-reference/#base) 中找到更多相關資訊。
:::

### 使用自定義網域名稱的 GitHub Pages

:::tip[設定一個自訂網域]
你可以透過在專案裝建立一個 `./public/CNAME` 檔案來設定自訂網域名稱:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
你可以透過在專案裝建立一個 `./public/CNAME` 檔案來設定自訂網域名稱:
你可以透過在專案建立 `./public/CNAME` 檔案來設定自訂網域名稱:

不用加一個


```js title="public/CNAME"
sub.mydomain.com
```

這會將你的網站部署在你所指定的自訂網域名稱下,而非 `<YOUR_USERNAME>.github.io`。另外,絕對不要忘記在你的網域名稱供應商(如:GoDaddy、Namecheap 等)中設定一個 CNAME 記錄,如果需要詳細的資訊可以檢視 [為你的域名提供商設定 GitHub Pages](https://docs.github.com/cn/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain)。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
這會將你的網站部署在你所指定的自訂網域名稱下,而非 `<YOUR_USERNAME>.github.io`。另外,絕對不要忘記在你的網域名稱供應商(如:GoDaddy、Namecheap 等)中設定一個 CNAME 記錄,如果需要詳細的資訊可以檢視 [為你的域名提供商設定 GitHub Pages](https://docs.github.com/cn/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain)
這會將你的網站部署在你所指定的自訂網域名稱下,而非 `<YOUR_USERNAME>.github.io`。另外,絕對不要忘記在你的網域名稱供應商(如:GoDaddy、Namecheap 等)中設定一個 CNAME 記錄,如果需要詳細的資訊可以檢視[為你的域名提供商設定 GitHub Pages](https://docs.github.com/cn/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里我认为也是不需要的,不要在翻译上为原文增加补充说明,如果你认为是有必要的话,可以再单独提交一个 PR 对英文原文进行修改

:::

為了設定 Astro 在 GitHub Pages 上使用你的自訂網域,請將你的網域名稱設定成 `site` 的值。並請不要為 `base` 設定值:

```js title="astro.config.mjs" ins={4}
import { defineConfig } from 'astro/config'

export default defineConfig({
site: 'https://example.com', // 你的自訂網域名稱
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里也不需要注释

})
```

## 配置 GitHub Action
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## 配置 GitHub Action
## 設定 GitHub Action


<Steps>
1. 在你專案中的 `.github/workflows/` 資料夾中建立一個名為 `deploy.yml` 的新文件,並將以下 YAML 配置信息貼進其中。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. 在你專案中的 `.github/workflows/` 資料夾中建立一個名為 `deploy.yml` 的新文件,並將以下 YAML 配置信息貼進其中
1. 在你專案中的 `.github/workflows/` 資料夾中建立名為 `deploy.yml` 的新檔案,並將以下 YAML 設定貼進其中

更貼近台灣用語


```yaml title="deploy.yml"
name: Deploy to GitHub Pages

on:
# 在每次推送到 `main` 分支時觸發部署
# 如果你想要在其他分支上觸發部署,請將 `main` 替換成你想要的分支名稱
push:
branches: [ main ]
# 允許你在 GitHub 上的 Actions 標籤中手動觸發此部署
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# 允許你在 GitHub 上的 Actions 標籤中手動觸發此部署
# 允許你在 GitHub 上的 Actions 分頁中手動觸發此部署

後面是用分頁,我覺得分頁比較好。

workflow_dispatch:

# 允許這個工作流程訪問你的儲存庫
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

翻譯不精確,應為允許這個工作複製儲存庫並建立頁面部署

permissions:
contents: read
pages: write
id-token: write

jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout your repository using git
uses: actions/checkout@v4
- name: Install, build, and upload your site
uses: withastro/action@v3
# with:
# path: . # 儲存庫中 Astro 專案的根位置。(可選)
# node-version: 20 # 用於構建網站的特定 Node.js 版本,默認為 20。(可選)
# package-manager: pnpm@latest # 應該使用哪個 Node.js 包管理器來安裝依賴項和構建網站。將根據儲存庫中的 lockfile 自動檢測。(可選)
Comment on lines +120 to +121
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# node-version: 20 # 用於構建網站的特定 Node.js 版本,默認為 20。(可選)
# package-manager: pnpm@latest # 應該使用哪個 Node.js 包管理器來安裝依賴項和構建網站。將根據儲存庫中的 lockfile 自動檢測。(可選)
# node-version: 20 # 用於建構網站的特定 Node.js 版本,默認為 20。(可選)
# package-manager: pnpm@latest # 應該使用哪個 Node.js 套件管理器來安裝相依套件和建構網站,會根據儲存庫中的 lockfile 自動檢測。(可選)

build 的翻譯應該是建構/建置,選一個吧

剩下的譯名雖然先前的翻譯不拘束這個翻譯,但還是統一一下比較好,也更符合台灣習慣。


deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
```

:::note
Astro GitHub Action 允許提供幾個選項,例如 `path`、`node-version` 和 `package-manager`。這些選項是可選的,可以透過解除註解 `with:` 行與你需要啟用的選項行來改變這些選項的設定。
:::

:::caution
官方提供的 Astro [GitHub Action](https://github.com/withastro/action) 會透過掃描根目錄下的 lockfile 來檢查你所使用的 Package Manager(如`npm`, `yarn`, `pnpm`, or `bun`)。正因如此,你應該將包管理器自動產生的 `package-lock.json`、`yarn.lock`、`pnpm-lock.yaml` 或是 `bun.lockb` 檔案一起提交至你的儲存庫中,不要加入 `.gitignore` 或用其他方式遺漏這些檔案。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
官方提供的 Astro [GitHub Action](https://github.com/withastro/action) 會透過掃描根目錄下的 lockfile 來檢查你所使用的 Package Manager(如`npm`, `yarn`, `pnpm`, or `bun`)。正因如此,你應該將包管理器自動產生的 `package-lock.json``yarn.lock``pnpm-lock.yaml` 或是 `bun.lockb` 檔案一起提交至你的儲存庫中,不要加入 `.gitignore` 或用其他方式遺漏這些檔案
官方提供的 Astro [GitHub Action](https://github.com/withastro/action) 會透過掃描根目錄下的 lockfile 來檢查你所使用的套件管理器(如 `npm``yarn``pnpm` `bun`)。正因如此,你應該將套件管理器自動產生的 `package-lock.json``yarn.lock``pnpm-lock.yaml` 或是 `bun.lockb` 檔案一起提交至你的儲存庫中。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里下面的一句提示也是多余的

:::

2. 在 GitHub 網站上,請切換到儲存庫中的 **Settings** 分頁,並切換進左邊的 **Code and automation** 分類中的 **Pages** 部分。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1,如认为有必要,请提交英文PR

Copy link
Contributor

@vrabe vrabe Feb 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我上次發PR是被建議不要寫太細,不然如果GitHub改介面這邊就要跟著改


3. 選擇 **GitHub Actions** 作為設定中的 **Source** ,並單按 **Save**儲存設定。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
3. 選擇 **GitHub Actions** 作為設定中的 **Source** ,並單按 **Save**儲存設定。
3. 選擇 **GitHub Actions** 作為設定中的 **Source**,並單按 **Save** 儲存設定。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1


4. 將先前設定好的 workflow file 提交(Commit)並推送(Push)到 GitHub。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

前面都沒有標註英文,到現在才標有點奇怪。

</Steps>

恭喜你!如此一來,你的 Astro 網站就會自動部署到 GitHub Pages 上了。並且如果你更改了你的網站原始碼並推送到前述的儲存庫,GitHub Actions 會自動重新構建並部署你的網站,你不需要手動構建和部署。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
恭喜你!如此一來,你的 Astro 網站就會自動部署到 GitHub Pages 上了。並且如果你更改了你的網站原始碼並推送到前述的儲存庫,GitHub Actions 會自動重新構建並部署你的網站,你不需要手動構建和部署
恭喜你!如此一來,你的 Astro 網站就會自動部署到 GitHub Pages 上了。並且如果你更改了你的網站原始碼並推送到前述的儲存庫,GitHub Action 會自動重新構建並部署你的網站。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

發佈(publish)那邊好像是被第一個自動部署那邊取代了,但也不能說是錯的。


## 範例

- [Github Pages 部署範例](https://github.com/hkbertoson/github-pages)