-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
base: main
Are you sure you want to change the base?
Changes from 5 commits
69f6c85
040ee01
1d33307
eeba682
60b16ea
65822e7
b3f86f9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,154 @@ | ||||||||||
--- | ||||||||||
title: 將您的Astro網站部署到GitHub Pages | ||||||||||
description: 如何透過GitHub Pages將您的Astro網站部署到網際網路上 | ||||||||||
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)。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 这里的 ‘README’ 在我看来是不需要翻译的,但我不清楚在zh-tw 的语境中如何。 另外这里似乎缺少了 with very little configuration 的翻译 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 是有這個翻譯,我不會用,但不反對別人用 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 我是都會翻譯成讀我檔案啦,所以不需要嗎? 如果不用的話我就刪掉,沒關係 |
||||||||||
|
||||||||||
## 為 GitHub Pages 配置 Astro 專案 | ||||||||||
|
||||||||||
為了將 Astro 網站部署至 GitHub Pages,我們需要先對原本的 Astro 配置文件做些許變更。按照下方的說明即可,如果你不知道自己該怎麼做的話。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 这一部分是所说的新加的部分? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 可以看一下这里的写作指南部分,https://contribute.docs.astro.build/guides/writing-style/ |
||||||||||
|
||||||||||
### 部署至一個 `github.io` 的網址 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
不用加一個,英文如果沒加 a 就會是文法錯誤,但中文因為沒有單複數的概念,所以只會在需要強調數量的時候才會加上數量,這個剛好就是不加數量也沒差的狀況。 |
||||||||||
|
||||||||||
請在`astro.config.mjs` 的配置文件中設定 [`site`](/zh-tw/reference/configuration-reference/#site) 與 [`base`](/zh-tw/reference/configuration-reference/#base) 兩個選項。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
配置文件應改成設定檔以貼近台灣習慣。原文沒有所以去掉也沒關係,但留著也沒關係。 |
||||||||||
|
||||||||||
```js title="astro.config.mjs" ins={4-5} | ||||||||||
import { defineConfig } from 'astro/config' | ||||||||||
|
||||||||||
export default defineConfig({ | ||||||||||
site: 'https://astronaut.github.io', // 你的 GitHub Pages 網址 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 这里注释也是多余的,因为下面有具体的说明 |
||||||||||
base: 'my-repo', | ||||||||||
}) | ||||||||||
``` | ||||||||||
|
||||||||||
#### `site` | ||||||||||
|
||||||||||
請確保你的 `site` 值應為以下的其中之一: | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
感覺確保跟應只能二選一 |
||||||||||
|
||||||||||
- 以你的使用者名稱產生的 GitHub.io 網址,如:`https://<username>.github.io` | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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/` | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
這裡的 private 應該是與 public 相對的,不公開給大家看的意思。或許應該翻成不公開比較適合。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 我是照簡體版本翻譯的 |
||||||||||
|
||||||||||
#### `base` | ||||||||||
|
||||||||||
可能需要為 `base` 設定一個值,以便 Astro 將你的儲存庫名稱(例如 `/my-repo`)視為你網站的根目錄。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
純建議,以便也可以 |
||||||||||
|
||||||||||
:::note | ||||||||||
如果你的情況符合以下其中之一,請不要為 `base` 參數設定值: | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
我覺得為 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 看起來果然不能逐字逐句的翻呢... |
||||||||||
|
||||||||||
- 如果你的頁面由根資料夾所提供。 | ||||||||||
- 如果你的原始碼儲存庫在 `https://github.com/<USERNAME>/<USERNAME>.github.io`. | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||
::: | ||||||||||
|
||||||||||
`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` 檔案來設定自訂網域名稱: | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
不用加一個 |
||||||||||
|
||||||||||
```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)。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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', // 你的自訂網域名稱 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 这里也不需要注释 |
||||||||||
}) | ||||||||||
``` | ||||||||||
|
||||||||||
## 配置 GitHub Action | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||
|
||||||||||
<Steps> | ||||||||||
1. 在你專案中的 `.github/workflows/` 資料夾中建立一個名為 `deploy.yml` 的新文件,並將以下 YAML 配置信息貼進其中。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
更貼近台灣用語 |
||||||||||
|
||||||||||
```yaml title="deploy.yml" | ||||||||||
name: Deploy to GitHub Pages | ||||||||||
|
||||||||||
on: | ||||||||||
# 在每次推送到 `main` 分支時觸發部署 | ||||||||||
# 如果你想要在其他分支上觸發部署,請將 `main` 替換成你想要的分支名稱 | ||||||||||
push: | ||||||||||
branches: [ main ] | ||||||||||
# 允許你在 GitHub 上的 Actions 標籤中手動觸發此部署 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
後面是用分頁,我覺得分頁比較好。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 這麼說也對 |
||||||||||
workflow_dispatch: | ||||||||||
|
||||||||||
# 允許這個工作流程訪問你的儲存庫 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 自動檢測。(可選) | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
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` 或用其他方式遺漏這些檔案。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 我不知道應該把這些翻譯成甚麼,謝謝建議
510208 marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||
::: | ||||||||||
|
||||||||||
2. 在 GitHub 網站上,請切換到儲存庫中的 **Settings** 分頁,並切換進左邊的 **Code and automation** 分類中的 **Pages** 部分。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +1,如认为有必要,请提交英文PR There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 我上次發PR是被建議不要寫太細,不然如果GitHub改介面這邊就要跟著改 |
||||||||||
|
||||||||||
3. 選擇 **GitHub Actions** 作為設定中的 **Source** ,並單按 **Save**儲存設定。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +1 |
||||||||||
|
||||||||||
4. 將先前設定好的 workflow file 提交(Commit)並推送(Push)到 GitHub。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 前面都沒有標註英文,到現在才標有點奇怪。 |
||||||||||
</Steps> | ||||||||||
|
||||||||||
恭喜你!如此一來,你的 Astro 網站就會自動部署到 GitHub Pages 上了。並且如果你更改了你的網站原始碼並推送到前述的儲存庫,GitHub Actions 會自動重新構建並部署你的網站,你不需要手動構建和部署。 | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 發佈(publish)那邊好像是被第一個自動部署那邊取代了,但也不能說是錯的。 |
||||||||||
|
||||||||||
## 範例 | ||||||||||
|
||||||||||
- [Github Pages 部署範例](https://github.com/hkbertoson/github-pages) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
這邊中文與英文之間要加空格。然後絕大多數 your 即使去掉也不會更改原意,如果要加您的話,翻譯指南寫說應該用你而不是您。