-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
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): Create cloudflare.mdx #9050
base: main
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for astro-docs-2 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
Hello! Thank you for opening your first PR to Astro’s Docs! 🎉 Here’s what will happen next:
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
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.
哈喽,Eric!欢迎你给 Astro 繁中提的第一个 PR!
还有一些 缩进、大小写、链接
的小问题需要修改哦。
ps: 最后一次 commit 的 type: deploy
那行代码 应该也包含在文件里面,不用删掉。
Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Nin3 <[email protected]>
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.
还有三处需要修改哈,原因我注释在其中了,欢迎你加入文档翻译的大家庭。
title: 部署你的 Astro 網站至 Cloudflare Pages | ||
description: 如何使用 Cloudflare Pages 將你的 Astro 網站部署到網路上。 | ||
i18nReady: true |
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.
title: 部署你的 Astro 網站至 Cloudflare Pages | |
description: 如何使用 Cloudflare Pages 將你的 Astro 網站部署到網路上。 | |
i18nReady: true | |
title: 部署你的 Astro 網站至 Cloudflare Pages | |
description: 如何使用 Cloudflare Pages 將你的 Astro 網站部署到網路上。 | |
type: deploy | |
i18nReady: true |
这行 type: deploy
目的是用来表示属于 deploy(部署你的网站)文档的,不需要删除。
Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Nin3 <[email protected]>
這個用語似乎不太符合台灣習慣 |
import ReadMore from '~/components/ReadMore.astro'; | ||
import { Steps } from '@astrojs/starlight/components'; | ||
|
||
你可以將你的Astro項目部署在 [Cloudflare Pages](https://pages.cloudflare.com/),一個供前端開發人員協作和部署靜態(JAMstack)或 SSR 網站的平臺。 |
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.
你可以將你的Astro項目部署在 [Cloudflare Pages](https://pages.cloudflare.com/),一個供前端開發人員協作和部署靜態(JAMstack)或 SSR 網站的平臺。 | |
你可以將你的 Astro 項目部署在 [Cloudflare Pages](https://pages.cloudflare.com/),一個供前端開發人員協作和部署靜態(JAMstack)或 SSR 網站的平臺。 |
還有一點空格的小問題
|
||
本指南包含: | ||
|
||
- [如何使用 Git 部署一個站點](#如何使用-Git-部署一個站點) |
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.
我看原文是 How to deploy through the Cloudflare Pages Dashboard
,這邊的譯文是誤植了嗎?
- [如何使用 Wrangler 部署一個站點](#如何使用-Wrangler-部署一個站點) | ||
- [如何部署 SSR 站點](#如何部署-SSR-站點) |
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.
稍微調整得更符合臺灣用語~
- [如何使用 Wrangler 部署一個站點](#如何使用-Wrangler-部署一個站點) | |
- [如何部署 SSR 站點](#如何部署-SSR-站點) | |
- [如何使用 Wrangler 部署網站](#如何使用-Wrangler-部署網站) | |
- [如何部署 SSR 網站](#如何部署-SSR-網站) |
|
||
開始之前,你需要: | ||
|
||
- 一個 Cloudflare 賬戶,如果你沒有已經擁有一個,你可以創建一個免費的 Cloudflare 賬戶在過程中 |
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.
這句的語法感覺不那麼像中文,我調整了一下前後順序和一些用詞
- 一個 Cloudflare 賬戶,如果你沒有已經擁有一個,你可以創建一個免費的 Cloudflare 賬戶在過程中 | |
- 一個 Cloudflare 帳號,如果還沒有的話,可以在過程中建立免費的 Cloudflare 帳號 |
開始之前,你需要: | ||
|
||
- 一個 Cloudflare 賬戶,如果你沒有已經擁有一個,你可以創建一個免費的 Cloudflare 賬戶在過程中 | ||
- 你的代碼存儲在一個 [Github](https://github.com/) 或者 [Gitlab](https://about.gitlab.com/) 賬戶裡 |
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.
- 你的代碼存儲在一個 [Github](https://github.com/) 或者 [Gitlab](https://about.gitlab.com/) 賬戶裡 | |
- 把程式碼推到 [Github](https://github.com/) 或者 [GitLab](https://about.gitlab.com/) 儲存庫 |
- 一個 Cloudflare 賬戶,如果你沒有已經擁有一個,你可以創建一個免費的 Cloudflare 賬戶在過程中 | ||
- 你的代碼存儲在一個 [Github](https://github.com/) 或者 [Gitlab](https://about.gitlab.com/) 賬戶裡 | ||
|
||
## 如何使用 Git 部署一個站點 |
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.
## 如何使用 Git 部署一個站點 | |
## 如何使用 Git 部署網站 |
## 如何使用 Git 部署一個站點 | ||
|
||
<Steps> | ||
1. 在 Cloudflare 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.
1. 在 Cloudflare Pages 創立一個新項目 | |
1. 在 Cloudflare Pages 建立新專案 |
<Steps> | ||
1. 在 Cloudflare Pages 創立一個新項目 | ||
|
||
2. 將你的代碼提交到一個 Git 倉庫中(Github,Gitlab) |
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.
2. 將你的代碼提交到一個 Git 倉庫中(Github,Gitlab) | |
2. 將程式碼推到 git 倉儲(GitHub、GitLab) |
|
||
2. 將你的代碼提交到一個 Git 倉庫中(Github,Gitlab) | ||
|
||
3. 登錄 Cloudflare Dashboard 並在 **Account Home** > **Workers & Pages** > **Overview** 中選擇你的賬戶 |
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.
3. 登錄 Cloudflare Dashboard 並在 **Account Home** > **Workers & Pages** > **Overview** 中選擇你的賬戶 | |
3. 登入 Cloudflare Dashboard 並在 **Account Home** > **Workers & Pages** > **Overview** 中選擇你的帳號 |
|
||
3. 登錄 Cloudflare Dashboard 並在 **Account Home** > **Workers & Pages** > **Overview** 中選擇你的賬戶 | ||
|
||
4. 選擇 **Create application**,然後選擇 **Pages** 標籤頁,接著選擇 **Connect to Git** 選項。 |
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.
4. 選擇 **Create application**,然後選擇 **Pages** 標籤頁,接著選擇 **Connect to Git** 選項。 | |
4. 選擇 **Create application**,接著選 **Pages** 標籤,最後選 **Connect to Git** 選項。 |
稍微調整了一下,減少同一個詞「選擇」重複出現的狀況
|
||
4. 選擇 **Create application**,然後選擇 **Pages** 標籤頁,接著選擇 **Connect to Git** 選項。 | ||
|
||
5. 選擇你想部署的 Git 專案並點選 **Begin setup**(初始設定)。 |
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.
5. 選擇你想部署的 Git 專案並點選 **Begin setup**(初始設定)。 | |
5. 選擇你想部署的 git 專案並點選 **Begin setup**。 |
專有的文字我傾向統一維持原文~
6. 使用以下的構建設定: | ||
|
||
- **Framework preset(框架預設):** `Astro` | ||
- **Build command(構建命令):** `npm run build` | ||
- **Build output directory(構建輸出目錄):** `dist` |
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.
6. 使用以下的構建設定: | |
- **Framework preset(框架預設):** `Astro` | |
- **Build command(構建命令):** `npm run build` | |
- **Build output directory(構建輸出目錄):** `dist` | |
6. 使用以下的建構設定: | |
- **Framework preset:** `Astro` | |
- **Build command:** `npm run build` | |
- **Build output directory:** `dist` |
構建
->建構
(詳見此處討論:https://github.com/withastro/docs/pull/7559#issuecomment-2016716600)- 專有的文字我傾向統一維持原文~
- **Build command(構建命令):** `npm run build` | ||
- **Build output directory(構建輸出目錄):** `dist` | ||
|
||
7. 點選 **Save and Deploy**(儲存並部署)按鈕。 |
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.
7. 點選 **Save and Deploy**(儲存並部署)按鈕。 | |
7. 點選 **Save and Deploy** 按鈕。 |
專有的文字我傾向統一維持原文~
7. 點選 **Save and Deploy**(儲存並部署)按鈕。 | ||
</Steps> | ||
|
||
如何使用 Wrangler 部署一個站點 |
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.
如何使用 Wrangler 部署一個站點 | |
## 如何使用 Wrangler 部署網站 |
1. 安裝 [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/)。 | ||
|
||
2. 使用 `wrangler login` 在 Wrangler 登陸 Cloudflare 賬號並授權。 | ||
|
||
3. 執行你的構建命令(比如 `npm run build`)。 | ||
|
||
4. 使用 `npx wrangler pages deploy dist` 進行部署。 |
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.
1. 安裝 [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/)。 | |
2. 使用 `wrangler login` 在 Wrangler 登陸 Cloudflare 賬號並授權。 | |
3. 執行你的構建命令(比如 `npm run build`)。 | |
4. 使用 `npx wrangler pages deploy dist` 進行部署。 | |
1. 安裝 [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/)。 | |
2. 使用 `wrangler login` 登入 Cloudflare 帳號並授權 Wrangler。 | |
3. 執行你的建構命令。 | |
4. 使用 `npx wrangler pages deploy dist` 部署。 |
# 安裝 Wrangler CLI(命令列) | ||
npm install -g wrangler | ||
# 在 CLI 中登陸 Cloudflare 賬號 | ||
wrangler login | ||
# 執行你的構建命令 | ||
npm run build | ||
# 建立新的部署 | ||
npx wrangler pages deploy dist |
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.
# 安裝 Wrangler CLI(命令列) | |
npm install -g wrangler | |
# 在 CLI 中登陸 Cloudflare 賬號 | |
wrangler login | |
# 執行你的構建命令 | |
npm run build | |
# 建立新的部署 | |
npx wrangler pages deploy dist | |
# 安裝 Wrangler CLI(命令列) | |
npm install -g wrangler | |
# 透過 CLI 登入 Cloudflare 帳號 | |
wrangler login | |
# 執行你的建構命令 | |
npm run build | |
# 建立新的部署 | |
npx wrangler pages deploy dist |
# 建立新的部署 | ||
npx wrangler pages deploy dist | ||
|
||
上傳完所有的檔案後,Wrangler 將為你提供一個預覽 URL 以檢查你的站點。當你登入 Cloudflare 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.
上傳完所有的檔案後,Wrangler 將為你提供一個預覽 URL 以檢查你的站點。當你登入 Cloudflare Pages 儀表板時,你將看到你的新專案。 | |
上傳完所有檔案後,Wrangler 會提供一個預覽網址讓你檢查網站。登入 Cloudflare Pages 儀表板時,你就會看到新專案。 |
|
||
### 使用 Wrangler 在本地啟用預覽 | ||
|
||
要使預覽版正常工作,你必須安裝 `wrangler` |
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.
要使預覽版正常工作,你必須安裝 `wrangler` | |
要使預覽正常運作,你必須安裝 `wrangler` |
"preview": "wrangler pages dev ./dist" | ||
``` | ||
|
||
## 如何部署 SSR 站點 |
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.
## 如何部署 SSR 站點 | |
## 如何部署 SSR 網站 |
|
||
## 如何部署 SSR 站點 | ||
|
||
你可以使用 [`@astrojs/cloudflare` 介面卡](/zh-tw/guides/integrations-guide/cloudflare/)將 Astro SSR 站點部署到 Cloudflare 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.
你可以使用 [`@astrojs/cloudflare` 介面卡](/zh-tw/guides/integrations-guide/cloudflare/)將 Astro SSR 站點部署到 Cloudflare Pages。 | |
你可以使用 [`@astrojs/cloudflare` 轉接器](/zh-tw/guides/integrations-guide/cloudflare/)將 Astro SSR 站點部署到 Cloudflare Pages。 |
|
||
你可以使用 [`@astrojs/cloudflare` 介面卡](/zh-tw/guides/integrations-guide/cloudflare/)將 Astro SSR 站點部署到 Cloudflare 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.
請按照以下步驟設定介面卡。完成後,你可以使用上述文件中的任何方法進行部署。 | |
請按照以下步驟設定轉接器。完成後,你可以使用上述文件中的任何方法進行部署。 |
|
||
### 快速安裝 | ||
|
||
使用以下 `astro add` 命令新增 Cloudflare 介面卡以在你的 Astro 專案中啟用 SSR。這將安裝介面卡並一步對你的檔案 `astro.config.mjs` 進行適當的更改。 |
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.
使用以下 `astro add` 命令新增 Cloudflare 介面卡以在你的 Astro 專案中啟用 SSR。這將安裝介面卡並一步對你的檔案 `astro.config.mjs` 進行適當的更改。 | |
使用以下 `astro add` 命令新增 Cloudflare 轉接器以在你的 Astro 專案中啟用 SSR。這將安裝轉接器並一併對 `astro.config.mjs` 進行適當的更改。 |
如果你想要手動安裝介面卡,請完成以下兩個步驟: | ||
|
||
<Steps> | ||
1. 使用你喜歡的包管理器將 `@astrojs/cloudflare` 新增到專案的依賴項中。如果你正在使用 npm 或不確定是哪個包管理器,請在終端中執行: | ||
|
||
```bash | ||
npm install @astrojs/cloudflare | ||
``` | ||
|
||
2. 將以下內容新增到你的 `astro.config.mjs` 檔案中: | ||
|
||
```js title="astro.config.mjs" ins={2, 5-6} | ||
import { defineConfig } from 'astro/config'; | ||
import cloudflare from '@astrojs/cloudflare'; | ||
|
||
export default defineConfig({ | ||
output: 'server', | ||
adapter: cloudflare() | ||
}); | ||
``` | ||
</Steps> | ||
|
||
<ReadMore>閱讀更多關於 [Astro 中的 SSR(服務端渲染)](/zh-tw/guides/server-side-rendering/) 的資訊。</ReadMore> |
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.
如果你想要手動安裝介面卡,請完成以下兩個步驟: | |
<Steps> | |
1. 使用你喜歡的包管理器將 `@astrojs/cloudflare` 新增到專案的依賴項中。如果你正在使用 npm 或不確定是哪個包管理器,請在終端中執行: | |
```bash | |
npm install @astrojs/cloudflare | |
``` | |
2. 將以下內容新增到你的 `astro.config.mjs` 檔案中: | |
```js title="astro.config.mjs" ins={2, 5-6} | |
import { defineConfig } from 'astro/config'; | |
import cloudflare from '@astrojs/cloudflare'; | |
export default defineConfig({ | |
output: 'server', | |
adapter: cloudflare() | |
}); | |
``` | |
</Steps> | |
<ReadMore>閱讀更多關於 [Astro 中的 SSR(服務端渲染)](/zh-tw/guides/server-side-rendering/) 的資訊。</ReadMore> | |
如果你想要手動安裝轉接器,請完成以下兩個步驟: | |
<Steps> | |
1. 使用你喜歡的套件管理器將 `@astrojs/cloudflare` 加到專案的相依套件中。如果你使用 npm 或不確定是哪個管理器,請在終端機執行: | |
```bash | |
npm install @astrojs/cloudflare | |
``` | |
2. 將以下內容新增到 `astro.config.mjs` 檔案中: | |
```js title="astro.config.mjs" ins={2, 5-6} | |
import { defineConfig } from 'astro/config'; | |
import cloudflare from '@astrojs/cloudflare'; | |
export default defineConfig({ | |
output: 'server', | |
adapter: cloudflare() | |
}); | |
``` | |
</Steps> | |
<ReadMore>進一步了解 [Astro 的 SSR(伺服器端算繪)](/zh-tw/guides/server-side-rendering/)。</ReadMore> |
|
||
### 客戶端 hydration | ||
|
||
由於 Cloudflare 的 Auto Minify(自動壓縮)功能,客戶端 Hydration 可能會失敗。如果你在控制檯中看到 `Hydration completed but contains mismatches`,請確保在 Cloudflare 設定中禁用 Auto Minify。 |
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.
由於 Cloudflare 的 Auto Minify(自動壓縮)功能,客戶端 Hydration 可能會失敗。如果你在控制檯中看到 `Hydration completed but contains mismatches`,請確保在 Cloudflare 設定中禁用 Auto Minify。 | |
Cloudflare 的 Auto Minify(自動壓縮)功能可能導致客戶端 hydration 失敗。如果你在控制檯中看到 `Hydration completed but contains mismatches`,請確保在 Cloudflare 設定中停用 Auto Minify。 |
### Node.js 執行時 API | ||
|
||
如果你正在構建一個使用 [Cloudflare 服務端渲染介面卡](/zh-tw/guides/integrations-guide/cloudflare/) 的按需渲染專案,並且伺服器在構建時失敗,出現如 `[Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.` 的錯誤資訊: | ||
|
||
- 這意味著你在伺服器端環境中使用的某個包或匯入項與 [Cloudflare 執行時 API](https://developers.cloudflare.com/workers/runtime-apis/nodejs/) 不相容。 | ||
|
||
- 如果你直接匯入了一個 Node.js 執行時 API,請參考 Astro 關於 Cloudflare 的 [Node.js 相容性](/zh-cn/guides/integrations-guide/cloudflare/#nodejs-相容性) 文件,瞭解如何解決這個問題的進一步步驟。 | ||
|
||
- 如果你匯入的包中包含了 Node.js 執行時 API,請檢查該包的作者是否支援 `node:*` 的匯入語法。如果不支援,你可能需要找到一個替代的包。 |
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.
### Node.js 執行時 API | |
如果你正在構建一個使用 [Cloudflare 服務端渲染介面卡](/zh-tw/guides/integrations-guide/cloudflare/) 的按需渲染專案,並且伺服器在構建時失敗,出現如 `[Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.` 的錯誤資訊: | |
- 這意味著你在伺服器端環境中使用的某個包或匯入項與 [Cloudflare 執行時 API](https://developers.cloudflare.com/workers/runtime-apis/nodejs/) 不相容。 | |
- 如果你直接匯入了一個 Node.js 執行時 API,請參考 Astro 關於 Cloudflare 的 [Node.js 相容性](/zh-cn/guides/integrations-guide/cloudflare/#nodejs-相容性) 文件,瞭解如何解決這個問題的進一步步驟。 | |
- 如果你匯入的包中包含了 Node.js 執行時 API,請檢查該包的作者是否支援 `node:*` 的匯入語法。如果不支援,你可能需要找到一個替代的包。 | |
### Node.js runtime API | |
如果你用 [Cloudflare SSR 轉接器](/zh-tw/guides/integrations-guide/cloudflare/) 的隨需算繪建立專案,而伺服器在建構時失敗,出現如 `[Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.` 的錯誤資訊: | |
- 這意味著你在伺服器端環境中使用的某個套件或匯入與 [Cloudflare runtime API](https://developers.cloudflare.com/workers/runtime-apis/nodejs/) 不相容。 | |
- 如果你直接匯入 Node.js runtime API,請參考 Astro 關於 Cloudflare 的 [Node.js 相容性](/zh-cn/guides/integrations-guide/cloudflare/#nodejs-相容性)文件,瞭解如何進一步解決這個問題。 | |
- 如果你匯入的套件中包含 Node.js runtime API,請檢查該套件的作者是否支援 `node:*` 的匯入語法。如果不支援,你可能需要找到其他替代套件。 |
Thanks @ERIC-ZHAO-3366, I see Ming-ju Lu gave you a few suggestions, could you address them so we can proceed with the review and merge proccess? |
Description (required)
Create zh-tw to deploy Astro Site To Cloudflare Pages
ZH-TW
Related issues & labels (optional)
eric.zhao.3366(Eric Z.)