網站設計及經營
個人開發首頁是Cloudflare + GitHub。如何建立一個用AI更新的靜態網站以及成本
在獲得鄧白氏編號並介紹該應用程式後,我準備了一個用於個人發展的商業網站。我們將解釋靜態網站和 CMS 之間的差異、使用 AI 更新文章、使用 GitHub Actions 發布以及 Cloudflare Pages 的註冊過程和費用。
如果您自己創建一個應用程序,除了開發應用程式本身之外,您還需要一個主頁來介紹您的業務並提供支援。
SANGE Studio 還需要一個網站,以便準備好取得 D-U-N-S 編號並準備應用程式的介紹頁面。我想創建一個花費盡可能少的錢並且花更少的時間進行日常管理的配置。此選項是使用 Cloudflare 發布靜態網站並使用 GitHub 管理文件。
更新文章時,人工智慧幫助創建和修改 HTML,人類在發布之前檢查內容和顯示。我們相信這種配置在許多情況下對於個人商業網站來說已經足夠了。
在這篇文章中,我們將解釋選擇其中一個的原因、發布程序和成本。價格和規格資訊截至 2026 年 10 月 27 日。
1. 取得D-U-N-S編號並引入應用程式後準備站點。
D-U-N-S 編號是標識公司或商業實體的 9 位數字。一般來說,您在建立 Google Play 組織帳戶時將需要此號碼。
除了 D-U-N-S 編號外,Google Play 還需要「組織網站」作為組織帳戶的註冊資訊。 [1]
這是很容易混淆的地方。 Google Play 需要一個網站是一回事,另一回事又是一回事。對於所有鄧白氏編號申請來說統一需要一個網站是另一回事。 有關申請 D-U-N-S 編號所需的信息,請查看您使用的櫃檯的說明。
無論如何,解釋您的業務實際情況的頁面和應用程式介紹/支援頁面將對後續操作有用。您可以從小事做起,準備以下內容:
| 頁面 | 待發佈內容 |
|---|---|
| 頂部 | 有關商店名稱、我們涉及的業務以及應用程式的信息 |
| 業務介紹 | 與申請資訊不矛盾的說明,例如運營商和業務詳細信息 |
| 應用介紹 | 功能、螢幕圖像、Google Play 鏈接 |
| 支援 | 如何聯絡我們以及常見問題 |
| 隱私權政策 | 基於實際資料取得和使用外部服務的解釋 |
這並不意味著僅僅準備一個網站就能通過考試。您發布的信息與實際業務和應用細節保持一致非常重要。
2. 如果您想降低成本和管理工作量,靜態網站是一個不錯的選擇。
為了擁有主頁,您不一定需要租用伺服器或安裝 WordPress。
Cloudflare Pages 是一項可讓您發佈 HTML、圖片等的服務。它可以透過免費方案取得,也可以使用該服務提供的 URL 進行發布:○○.pages.dev。 [2]
GitHub 將用作管理網站文件和更改歷史記錄的地方。您可以檢查修復問題的時間和地點,如果出現問題,您可以留下線索以返回到先前的狀態。
組織角色如下圖所示:
| 角色 | 使用什麼 |
|---|---|
| 建立和修改句子和 HTML | 人工智慧和人類 |
| 管理文件和更改歷史記錄 | GitHub |
| 確認後自動發布流程 | GitHub Actions |
| 將頁面傳送給查看者 | Cloudflare Pages |
Cloudflare 並不是唯一最便宜的服務。還有免費的服務。此外,它也是適合您以低成本創建個人發展介紹網站的目的的選擇。
- AI + 人類建立和檢查文章/HTML
- GitHub管理文件和更改歷史記錄
- GitHub Actions發布核准的變更
- Cloudflare 頁面分發 HTML 和圖片給讀者
在 GitHub 上管理並在 Actions 上發布。 Cloudflare Pages 提供讀者頁面。
3. 靜態託管和CMS的差別
靜態託管是一種將按原樣向檢視者提供預先建立的 HTML 和圖片的系統。
CMS 是一個可以輕鬆管理和更新文章和圖像的系統。 WordPress 就是一個典型的例子。您可以在管理畫面上撰寫文章並設定發布日期和時間。
嚴格來說,兩者並不是反義詞。還有一種配置可以使用 CMS 管理文章並將完整的頁面作為靜態網站提供。為了更容易理解,這裡我們將比較在 GitHub 上管理 HTML 的配置和您自己安裝和操作通用 WordPress 的配置。
| 比較項目 | 管理 HTML 的靜態站點 | 一般WordPress自操作 |
|---|---|---|
| 如何更新 | 修改並發布文件 | 從管理螢幕編輯和發布 |
| 查看時處理 | 交付準備好的文件 | 適用於 PHP、資料庫等。某些配置使用快取。 |
| 維護 | 管理文件、發布路徑、使用工具等 | 管理主體、主題、外掛、執行環境等。 |
| 預定的帖子 | 準備一個單獨的機制來控制發布 | 提供標準的預定發布功能 |
| 應用適合於 | 業務介紹、APP介紹、小組博客 | 具有許多編輯器、頻繁更新的網站以及編輯功能很重要的網站 |
HTML 是描述頁面結構的檔案。傳統上,每次新增文章時都要修改程式碼對於靜態網站來說是一個負擔。讓人工智慧幫助你完成這項任務將使你更容易做出選擇。
4. 考慮到漏洞的因應和人工智慧的演化,我們希望將揭露機製做得更小。
發佈網站並不是結束。如果您使用的軟體中發現漏洞,您將需要更新或檢查它。 WordPress官方文件也說明如何更新主體、外掛程式等,以及管理權限和身分驗證。 [3]
在個人發展中,可用於維護的時間是有限的。如果重點是業務介紹和應用程式介紹,我想減少我操作瀏覽時運行的程式和資料庫的需要,以及向公眾開放的編輯文章的登入畫面。
透過專注於純靜態檔案分發,您可以減少針對此類區域的攻擊的入口點數量。然而,如果 GitHub 或 Cloudflare 帳戶被劫持或混入惡意 JavaScript,即使是靜態網站也可能被損壞。安全性由配置和操作共同決定。
我之所以選擇靜態站點,並不是因為現在所有的漏洞都是由 CMS 造成的。這是因為需要管理的功能較少。
此外,AI現在可以協助建立HTML和CSS,減輕直接編輯檔案的負擔。這簡化了安全性配置並減少了更新所需的工作量。這種組合在個人層面上很有吸引力。
5. 使用人工智慧將文章轉換為 HTML,由人工檢查,然後發布。
預期的更新流程是以下六個步驟。
- 組織好文章的主題、想要傳達的內容、體會。
- 要求 AI 建立一個與現有設計相符的文章頁面。
- 在 GitHub 上註冊提議的變更。
- 人類檢查文字、證據、螢幕顯示和更改。
- 將確認的變更合併到
main分支中進行發布。 - GitHub Actions 發佈到 Cloudflare Pages。
在 GitHub 上檢查建議更改的機制稱為“拉取請求”,合併已確認更改的操作稱為“合併”。即使您單獨運行它,您也可以設定一個步驟來檢查建立和發布之間的情況。
例如,對AI的請求可以指定如下。
請使用現有文章頁面作為參考將此手稿轉換為 HTML。整理您的標題、表格和參考鏈接,以便在智慧型手機上輕鬆閱讀。另請更新文章清單和網站地圖。請不要加入任何稿件中沒有的經驗或數字,並指出任何需要確認的陳述。
在發布之前,我們會檢查文字的準確性、智慧型手機上的顯示、連結目的地、圖像權利以及是否混入個人或機密資訊。人工智慧審閱也可以提供幫助,但僅僅讓人工智慧相互檢查並不能保證準確性。
如果您有更多文章,您可以繼續使用 Markdown 編寫正文並產生 HTML。我認為最好不要從一開始就創建一個大系統,當更新成為負擔時才引入它。
- 1.準備稿件整理想要傳達的內容
- 2.使用 AI 轉換為 HTML與現有設計相符
- 3.人工確認檢查文字、證據和顯示
- 4.反映在主要發佈到頁面的操作
在人工智慧創作和發布之間,會有一個由人類檢查內容和展示的階段。
6.如果需要發布預約或編輯功能,請新增服務。
對於靜態站點,僅在 HTML 中寫入未來日期並不會保留該站點進行發布。如果您上傳文件,即使該文件未在文章清單中列出,您也可以從 URL 查看該文件。
如果需要計劃發布,請考慮可以管理發布日期和時間的無頭 CMS,或支援計劃部署的服務。無頭CMS是一種提供文章管理功能並且可以與頁面外觀和分發分開使用的CMS。
在這種情況下,您不應該在指定的日期和時間之前將文章包含在發布文件中,並在指定的時間將其與發布過程結合。還要確保私人手稿不會在預覽或公共存儲庫中公開。
還有一種方法可以設定 GitHub Actions 的定期執行,但執行可能會延遲,因此不適合需要嚴格時間保證的應用程式。 [8]
如果多人需要每天編輯、批准、管理圖像並安排發布,那麼 CMS 將具有很大的價值。我們計劃在必要的編輯功能增加時審查配置。
7. 從註冊Cloudflare到網頁發布
在這裡,我們將向您展示如何使用 Cloudflare Pages 的「直接上傳」從 GitHub Actions 進行發布。 Cloudflare官方也提供了這種組合的說明。 [4]
Cloudflare 也有一個名為 Workers Static Assets 的靜態指派選項,但本文中的設定和指令適用於 Pages。螢幕名稱可能會更改,因此請在繼續之前檢查服務名稱和設定。
步驟 1:建立 Cloudflare 和 GitHub 帳戶
使用 Cloudflare 和 GitHub 建立帳戶並完成電子郵件驗證。在兩者上設定多重身份驗證。
您可以從免費計劃開始。即使您有現有的原始網域,您也可以從頁面提供的 URL 開始檢查出版物。
步驟 2: 取得您自己的域名
自訂網域是您取得並繼續使用的網路名稱,例如 example.com。這是與 Cloudflare Pages 分開的合同,Cloudflare Pages 儲存您網站的檔案。取得自己的網域需要花錢,並且在取得網域後您需要支付續約費用才能繼續使用它。您可以使用免費的 pages.dev 發布它,但如果您想繼續將其用作企業網站,那麼如果您準備一個與您的企業名稱相符的唯一網域,將會更容易指導您。如果您已經擁有它,則無需購買新的。
來源包括 Cloudflare Registrar 和其他域名註冊服務。如果您想使用 Cloudflare 一次性管理它們,您可以使用下列流程來取得它們。 [11]
- 登入 Cloudflare 並開啟「網域註冊」下的「註冊網域」。
- 搜尋您所需的網域名稱並查看可用的選項。選擇一個與您的公司名稱接近、簡短且易於輸入的名稱。
- 檢查購買費用、合約年資和下次續約日期。我們不僅比較第一年的低價,還比較續約費用、稅金和付款貨幣。
- 準確輸入註冊人的姓名、地址、電話號碼和電子郵件地址,並註冊付款方式。 Cloudflare 註冊者資訊必須以 ASCII 字元輸入,因此請以羅馬字元輸入日文名稱和地址等。
- 查看條款和付款金額並確認您的購買。
- 檢查您的註冊確認電子郵件並完成要求的電子郵件地址驗證。請同時檢查您的自動續約設定和付款方式的到期日。
透過 Cloudflare Registrar 取得的網域使用 Cloudflare 的名稱伺服器。它不是一項允許您在獲取後自由切換到另一家公司的 DNS 名稱伺服器的服務。此外,如果所需的網域後綴不可用,請從相容的第三方服務取得。 [11]
僅透過取得網域將無法顯示您的網頁。 此後,將您的網站發佈到 Pages 並在步驟 8 中將其與您自己的網域連接。即使您從其他公司獲得了網域,您也可以將其與 Pages 結合使用,而無需將網域註冊轉移到 Cloudflare。
域訂閱不一定包含該網域的郵箱。如果您想透過 info@example.com 等發送和接收電子郵件,請考慮單獨的電子郵件服務。
步驟 3:在 GitHub 上建立儲存庫
存储库是站点文件和更改历史记录的存储库。从 GitHub 的“新存储库”创建它,名称例如 sange-studio-web。
如果您處理的是私人稿件,選擇「私人」將更易於管理。但是,即使在私人儲存庫中,放置在公用資料夾中的檔案也會傳送到網站。
僅將您想要公開的檔案放入 public 資料夾中。例如,public/index.html 是首頁,public/apps/index.html 是應用程式列表,public/privacy/index.html 是隱私權政策。這可以讓您縮小手稿和設定檔被錯誤分發到網站的範圍。
您可以從 public/index.html 開始。讓 AI 建立一個業務介紹頁面並檢查瀏覽器上的顯示。
第 4 步:建立 Cloudflare Pages 項目
在 Cloudflare 管理畫面上,前往「Workers & Pages」建立應用程序,然後為頁面選擇檔案上傳(直接上傳)。確定專案名稱並上傳 public 資料夾中的內容以進行首次發布。 [5]
造訪此時顯示的https://project name.pages.dev並查看首頁。項目名稱和Account ID將在後續設定中使用。
使用直接上傳建立的項目以後無法切換為 Git 連結類型。如果您想切換,則需要建立一個新專案。 [5]
第 5 步:建立公共 API 令牌
API 令牌是從 GitHub Actions 發佈到 Cloudflare 的憑證。
從 Cloudflare API 令牌畫面建立自訂令牌,並將權限設定為「帳戶 → Cloudflare 頁面 → 編輯」。將您的目標帳戶縮小到您需要的帳戶。 [4]
您建立的令牌不會直接寫入 HTML 或 GitHub 檔案。
步驟6:在GitHub Secrets中註冊身份驗證訊息
在 GitHub 儲存庫中,開啟“設定 → 秘密和變數 → 操作”,然後新增以下兩項作為儲存庫秘密。
| 姓名 | 要註冊的值 |
|---|---|
CLOUDFLARE_API_TOKEN | 建立 API 令牌 |
CLOUDFLARE_ACCOUNT_ID | 要發佈到的 Cloudflare 帳戶 ID |
Secrets 是儲存發布過程中使用的身份驗證資訊的功能。 [4]
第 7 步:新增 GitHub Actions 的可見性設置
在儲存庫中建立 .github/workflows/deploy.yml 並儲存以下內容:將 your-pages-project 取代為您的 Pages 專案名稱。
name: Deploy website
on:
push:
branches: [main]
workflow_dispatch:
permissions:
contents: read
concurrency:
group: production-website
cancel-in-progress: false
jobs:
deploy:
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Check entry page
run: test -f public/index.html
- name: Deploy to Cloudflare Pages
uses: cloudflare/wrangler-action@v4
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
command: pages deploy public --project-name=your-pages-project --branch=main
根據官方範例,我們有一個最小配置,僅在更新 main 時公開。 [4] 沒有 HTML 產生過程,因此不需要建置設定。在本例中,檢查只是為了確認首頁是否存在,因此內容和顯示的審核將分開進行。
請同時確保第一次使用 Pages 端的生產分支是 main 。在main中反映設定檔後,在GitHub的「Actions」中查看執行結果,成功後開啟網站。
以上是優先考慮可讀性的版本標籤規格。為了繼續操作,您可以透過將操作固定到已確認的提交 SHA 並檢查更新來加強對公共路徑的控制。
步驟8:將取得到的原始網域設定為Pages
從頁面項目中的「自訂網域 → 設定網域」新增您要使用的網域。 [6]
透過 Cloudflare Registrar 取得的網域配置為使用 Cloudflare 的 DNS。如果您使用其他公司收購的根網域,例如 example.com,請將該網域新增至 Cloudflare 並將其變更為註冊商管理畫面中指定的名稱伺服器。如果您使用現有的電子郵件,則 MX 和 TXT 等 DNS 記錄也會在變更之前保留。
對於 www.example.com 等子網域,您也可以在外部 DNS 服務中設定 CNAME。無論哪種情況,都不要僅新增 DNS 記錄,而是先將它們與頁面中的自訂網域相關聯。 [6]
啟動後,檢查是否可以使用 HTTPS 打開,並且圖像、連結和智慧型手機顯示是否正確。如果您想讓自己的網域成為官方 URL,也可以包含規格 URL 和網站地圖 URL。
還有一種方法可以從較少的設定開始。
如果您不需要使用 GitHub Actions 進行發布控制,則可以更輕鬆地將 GitHub 儲存庫直接與 Pages 集成,這需要較少的設定。配置是在Pages建立畫面上選擇匯入Git儲存庫,將生產分支設定為main,無框架,建構指令為exit 0,並將輸出目的地設定為public。 [9]
透過此方法,Cloudflare 會偵測 GitHub 的變更並發布它們,因此您無需設定公共 API 令牌和操作。無需同時運行Actions方法和直接連結方法自動發布。
- 唯一網域範例:example.com
- DNS 設定指定網域連接目的地
- 設定頁面與自訂網域關聯
- 查看網站使用 HTTPS 驗證發布
取得網域和發布頁面是兩個不同的任務。對齊 DNS 設定和頁面側的關聯。
8. 費用是多少?
如果您有一個像本文一樣分發 HTML、CSS 和圖像的小型網站,則每月只需 0 日元即可開始託管和檔案管理。
| 專案 | 成本 | 補充品 |
|---|---|---|
| Cloudflare Pages Free | 每月 0 美元 | 用於發布靜態站點 |
| GitHub Free | 每月 0 美元 | 管理文件和更改歷史記錄 |
| GitHub Actions | 免費限額內0美元 | GitHub 免費私有儲存庫每月限制為 2,000 分鐘和 500MB 的工件儲存。與其他用途共享您的帳戶 |
| 頁面提供的 URL | 追加費用0日圓 | ○○.pages.dev |
| 自己的域名 | 需要單獨的購買/續訂費用 | 因網域結尾、註冊商和合約條款而異 |
| AI | 取決於所使用的服務 | 免費方案、包月合約、API使用費等 |
| 預約揭露/表格等 | 取決於所使用的服務 | 僅添加您需要的功能 |
Cloudflare表示Pages的請求數量和頻寬是無限的,但有檔案數量和使用條件等限制。免費方案允許每月 500 個 Git 連結的建立和最多 20,000 個文件。使用 GitHub Actions 進行處理和直接上傳時,請區分 Cloudflare 端的建置框架和 GitHub 端的執行框架。 [2][7]
GitHub Actions 可免費在公共儲存庫的標準 GitHub 託管執行器上運作。請注意不要超出私有儲存庫中的免費套餐。其他要求還包括大型滑道和儲存容量。 [10]
例如,如果您每月在私人儲存庫上執行每次 3 分鐘的發布流程 30 次,則總時間為 90 分鐘。如果您沒有將配額用於其他用途,並且您的儲存容量在配額內,則每月可使用 2,000 分鐘。
如果您已經擁有自己的網域,則在新增網站時無需支付新網域的費用。但是,現有網域的續約費用將繼續適用。不要只根據第一年的折扣來判斷自己網域的價格;也要檢查續約價格。
請注意,新增 API、資料庫、頁面功能等的成本不包含在此靜態網站估算中。
對於個人發展,請選擇允許您繼續操作的配置。
業務介紹、應用介紹、支援、少數人更新的部落格。出於這些目的,使用 Cloudflare 和 GitHub 運行靜態網站是一個不錯的選擇。
人工智慧幫助創建和修改頁面,人類審查和批准內容,然後自動發布。當必要的編輯功能增加時,在該階段新增CMS或外部服務。
對於像 SANGE Studio 這樣的個人規模運營,我們希望選擇一種配置,使我們能夠繼續提供業務信息,同時確保應用程式開發時間。