[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-使用-github-action-部署-github-pages":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":22,"minRead":23},3615,"使用-github-action-部署-github-pages","使用 Github Action 部署 Github Pages","使用 Github Action 部署 Github Pages (node) 記錄一下使用 Github A […]","\u003Ch1>使用 Github Action 部署 Github Pages (node)\u003C\u002Fh1>\n\u003Cp>記錄一下使用 Github Action 部署 Github Pages 的流程\u003Cbr \u002F>\n我這邊需求是 node + vue\u003C\u002Fp>\n\u003Cp>步驟很簡單：\u003C\u002Fp>\n\u003Col>\n\u003Cli>設定個人用的 token\u003C\u002Fli>\n\u003Cli>撰寫 Action 的 yml\u003C\u002Fli>\n\u003Cli>設定 repo\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>設定個人token\u003C\u002Fh2>\n\u003Cp>記得一兩年前 Github 就棄用輸入密碼的方式允許外部方式連線 repo，都必須要用 token。設定方式如下\u003C\u002Fp>\n\u003Cp>先在大頭像找到 setting\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F%E6%88%AA%E5%9C%96-2024-01-05-%E4%B8%8A%E5%8D%8811.34.14-694x1024.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>接著在左側欄找到 Developer Settings\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F%E6%88%AA%E5%9C%96-2024-01-05-%E4%B8%8A%E5%8D%8811.34.34.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>選擇 Token(classic)\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F%E6%88%AA%E5%9C%96-2024-01-05-%E4%B8%8A%E5%8D%8811.35.09.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>選擇 Generate new token (classic)\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F%E6%88%AA%E5%9C%96-2024-01-05-%E4%B8%8A%E5%8D%8811.36.11-1024x232.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>scopes 至少要勾以下範圍\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F%E6%88%AA%E5%9C%96-2024-01-05-%E4%B8%8A%E5%8D%8811.37.21.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Ch2>設定 yml\u003C\u002Fh2>\n\u003Cp>這邊就不解釋 Action 的做法\u003Cbr \u002F>\n請參考 \u003Ca href=\"https:\u002F\u002Fdocs.github.com\u002Fen\u002Factions\" title=\"文件\">文件\u003C\u002Fa>\u003Cbr \u002F>\n我用的是這組 action ：JamesIves\u002Fgithub-pages-deploy-action@4.1.5\u003C\u002Fp>\n\u003Cp>相關參數寫在這邊:\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FJamesIves\u002Fgithub-pages-deploy-action\">https:\u002F\u002Fgithub.com\u002FJamesIves\u002Fgithub-pages-deploy-action\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3>部署在自己的的專案\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-yaml\">name: Deploy\n\non:\n  push:\n    branches:\n      - main\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n\n    steps:\n    - name: Checkout\n      uses: actions\u002Fcheckout@v2\n\n    - name: Install & Build\n      run: |\n        npm install\n        npm run build \n\n      - name: Deploy\n        uses: JamesIves\u002Fgithub-pages-deploy-action@4.1.5\n        with:\n          branch: gh-pages\n          folder: dist\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>部署到其他專案\u003C\u002Fh3>\n\u003Cp>${{ secrets.ACCESS_TOKEN }} 就是從 ACCESS_TOKEN 的設定取值，不要將 token 暴露在明碼上\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-yaml\">name: Deploy\n\non:\n  push:\n    branches:\n      - main\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n\n    steps:\n    - name: Checkout\n      uses: actions\u002Fcheckout@v2\n\n    - name: Install & Build\n      run: |\n        npm install\n        npm run build \n\n    - name: Deploy Antoher Repo\n      uses: JamesIves\u002Fgithub-pages-deploy-action@4.1.5\n      with:\n        branch: gh-pages\n        folder: dist\n        token: ${{ secrets.ACCESS_TOKEN }}\n        repository-name:  Sakasky\u002FSEZ\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>要另外在專案中設定 token\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F%E6%88%AA%E5%9C%96-2024-01-05-%E4%B8%8A%E5%8D%8811.42.37.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F%E6%88%AA%E5%9C%96-2024-01-05-%E4%B8%8A%E5%8D%8811.42.46-1024x612.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F%E6%88%AA%E5%9C%96-2024-01-05-%E4%B8%8A%E5%8D%8811.42.53-1024x478.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n以 yml 為例子\u003Cbr \u002F>\nName就設定 ACCESS_TOKEN\u003Cbr \u002F>\n然後將 token 放到 Secret 裡面\u003C\u002Fp>\n\u003Ch3>打開 Github Pages 設定\u003C\u002Fh3>\n\u003Cp>測試過要先設定或不設定都可以，若不先設定，而直接部署的話也可以\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F%E6%88%AA%E5%9C%96-2024-01-05-%E4%B8%8A%E5%8D%8811.43.16.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Ch1>完成\u003C\u002Fh1>\n\u003Cp>只要每次 commit \u002F push 完，Action 就會自動幫部署網頁啦，超級方便！\u003C\u002Fp>\n","2024-01-08T10:03:34","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F01%2F7430fe6a-8f97-43ae-89ab-85f8bde95b18.jpeg",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,18,20],{"name":16,"slug":17},"Devops","devops",{"name":19,"slug":19},"frontend",{"name":21,"slug":21},"node","\u002Fblog\u002F使用-github-action-部署-github-pages",1]