后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 Github Actions 像专业人士一样部署到 Github Pages
GitHub Pages 是一种静态站点托管服务，旨在直接从 GitHub 存储库托管您的个人、组织或项目页面。
请注意，GitHub Pages 是一个静态站点托管服务，不支持 PHP、Ruby 或 Python 等服务器端代码。
要了解有关不同类型的 GitHub Pages 网站的更多信息，请查看此处。
🤨 理论就是这样！开始吧：🤨
复制您的项目名称。
我的 repo 名称是deploy-react-to-gh-pages。
对于 React，请在（文档）homepage中指定。package.json
{
...
"homepage": "/name-of-your-project/",
...
}
对于 Vue，在项目根目录中创建一个名为vue.config.js (Docs)的新文件并指定publicPath (Docs)。
module.exports = {
publicPath: '/name-of-your-project/'
}
现在提交并推送您的更改。
注意：如果您不提交更改，您将在下一个命令中丢失它们，因此请确保不要跳过此步骤
在您的项目中打开终端并运行：
注意：对于以下命令，如果您使用的是 Vue，只需复制粘贴即可；如果您使用的是 React，请将其替换dist为build。npm run build创建一个包含应用程序生产版本的目录。在 Vue 中，该目录名为dist，在 React 中名为build。
git checkout --orphan gh-pages文档npm run buildgit --work-tree dist add --all文档（针对 React：将 dist 替换为 build）git --work-tree dist commit -m 'Deploy'（对于 react：用 build 替换 dist）git push origin HEAD:gh-pages --forcerm -r dist（对于 react：用 build 替换 dist）git checkout -f mastergit branch -D gh-pages- 导航到您的 GitHub 项目并点击“设置”
- 滚动找到“Github Pages”部分，选择
gh-pages分支并单击“保存”
🚀🚀 恭喜 🚀🚀
您的网站已准备好发布。
您可能需要稍等片刻。此过程通常需要 2 到 10 分钟才能完成。
🤔🤔但是……等等。你可能想重新部署。肯定有更简单的解决方案，而不是一遍又一遍地重复上面的所有命令。
创建 node.js 脚本
现在，我们将创建一个 node.js 脚本，以便无论何时我们想要部署，我们只需运行一个命令。
-
scripts在项目根目录中创建一个文件夹。 -
在文件夹内
scripts创建一个gh-pages-deploy.js文件。 -
复制并粘贴以下代码：
const execa = require("execa");
const fs = require("fs");
(async () => {
try {
await execa("git", ["checkout", "--orphan", "gh-pages"]);
console.log("Building...");
await execa("npm", ["run", "build"]);
// Understand if it's dist or build folder
const folderName = fs.existsSync("dist") ? "dist" : "build";
await execa("git", ["--work-tree", folderName, "add", "--all"]);
await execa("git", ["--work-tree", folderName, "commit", "-m", "gh-pages"]);
console.log("Pushing to gh-pages...");
await execa("git", ["push", "origin", "HEAD:gh-pages", "--force"]);
await execa("rm", ["-r", folderName]);
await execa("git", ["checkout", "-f", "master"]);
await execa("git", ["branch", "-D", "gh-pages"]);
console.log("Successfully deployed");
} catch (e) {
console.log(e.message);
process.exit(1);
}
})();
- 打开
package.json并将execa(文档) 添加到您的devDependencies。
"devDependencies": {
...
"execa": "latest"
},
- 还在
scripts部分中添加一个新脚本：
"scripts": {
...
"gh-pages-deploy": "node scripts/gh-pages-deploy.js"
},
- 最后，运行
npm install。
✨🎉 就这样！🎉✨
现在，您只需运行 即可根据需要部署任意次数npm run gh-pages-deploy。
我-但是，嘿...🤫🤫！如果我们把一切都自动化，那不是更令人兴奋吗？
各位——你的意思是应用程序会自行部署吗？🤨🤨
我-😉😉
大家-😲😲
Github 页面-🤭🤭
创建 GitHub 操作以自动执行部署
如果每次推送到 master 时，应用程序都会自动部署而我们什么都不做，那岂不是很好？🧙♂️🧙♂️
我们可以通过使用...🙌🙌 Github Actions 🙌🙌 来实现这一点。
GitHub Actions 使您能够直接在 GitHub 存储库中创建自定义软件开发生命周期 (SDLC) 工作流程。文档
让我们开始吧：
-
在项目根目录中创建一个
.github（不要忘记前面的点）文件夹 -
在里面创建另一个文件夹名为
workflows -
在里面
workflows创建一个名为gh-pages-deploy.yml（名称由您决定）的文件。 -
现在将下面的代码复制并粘贴到该文件中。
name: Deploy to github pages
on:
push:
branches:
- master
jobs:
gh-pages-deploy:
name: Deploying to gh-pages
runs-on: ubuntu-latest
steps:
- name: Setup Node.js for use with actions
uses: actions/setup-node@v2
with:
version: 12.x
- name: Checkout branch
uses: actions/checkout@v2
- name: Clean install dependencies
run: npm ci
- name: Run deploy script
run: |
git config user.name "Your username" && git config user.email "your email"
npm run gh-pages-deploy
重要提示：请务必更改您的用户名和电子邮件：
-
提交并推送您的更改
-
现在，导航到您的 github 项目，首先单击“操作”（1），然后单击“部署到 github 页面”（2），最后单击“操作”（3）。
- 如果一切顺利的话，你会看到：
🌟🌟 Taadaaa!!! 您成功完成自动化部署！🌟🌟
现在，每当您合并 PR 或推送到 master 时，此操作都会运行并自动部署您的应用程序。👏👏
需要了解的事情
- React & Vue 提供了自己的在 github 页面上部署的步骤：
- 可用于部署到 gh-pages 的优秀库：
- 了解如何手动部署到 gh-pages 绝对是一件好事。此外，该脚本非常精简，易于理解。这种简洁性让您能够对其进行修改（添加颜色、表情符号和提示）。以下是一些很棒的资源，可以帮助您丰富该脚本：
- 存储库（请随意检查提交）：
🙏🙏 感谢您的阅读。如果您遇到任何问题，我很乐意为您提供帮助，请随时给我发送电子邮件至rolanddoda2014@gmail.com 🙏🙏
文章来源：https://dev.to/the_one/deploy-to-github-pages-like-a-pro-with-github-actions-4hdg