因為靜態資源是可以部署到 GitHub 上，自己順便學習部署網站

因為我使用的是 Vite 工具，官方有提供相應 Demo

部署靜態站點 | Vite 官方中文文檔

新建文件夾 .github 然后再建一個文件夾?workflows

新建文件 main.yml 文件

直接使用官方文檔 demo?

# 將靜態內容部署到 GitHub Pages 的簡易工作流程
name: Deploy static content to Pageson:# 僅在推送到默認分支時運行。push:branches: ['main']# 這個選項可以使你手動在 Action tab 頁面觸發工作流workflow_dispatch:# 設置 GITHUB_TOKEN 的權限，以允許部署到 GitHub Pages。
permissions:contents: readpages: writeid-token: write# 允許一個并發的部署
concurrency:group: 'pages'cancel-in-progress: truejobs:# 單次部署的工作描述deploy:environment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v4- name: Set up Nodeuses: actions/setup-node@v4with:node-version: 20cache: 'npm'- name: Install dependenciesrun: npm ci- name: Buildrun: npm run build- name: Setup Pagesuses: actions/configure-pages@v4- name: Upload artifactuses: actions/upload-pages-artifact@v3with:# Upload dist folderpath: './dist'- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v4

著重注意！base 地址

打開項目 GitHub 地址，點擊 Settings

設置 page?

然后提交代碼。因為在 yml 文件中是監控 push 事件，所以會自定發布

在 Actions 里可以查看進度，成功以后就會生成一個地址

記錄自己的第一個 GitHub 部署項目

項目地址

預覽地址