github自动化部署在线预览环境及github，gitee代码同步实战全攻略
2022-12-13 18:09:24
GitHub 和 Gitee 上实现自动部署和代码同步的实战教程
准备工作
踏入自动部署和代码同步的旅程之前，你需要注册一个 GitHub 或 Gitee 账户并创建一个新的代码仓库。做好这些准备工作后，你就可以进入下一步了。
步骤 1：连接代码仓库
就像连接两个点一样，你需要将本地代码仓库与 GitHub 或 Gitee 上的远程仓库连接起来。在命令行中，按照以下步骤进行操作：
- 初始化本地代码仓库：
git init - 将本地代码添加到暂存区：
git add . - 提交本地代码到暂存区：
git commit -m "Initial commit" - 将远程仓库添加到本地代码仓库中：
git remote add origin https://github.com/<your_username>/<your_repository_name>.git - 将本地代码推送到远程仓库：
git push -u origin master
步骤 2：创建部署文件
现在，让我们创建一个名为 .github/workflows/main.yml 的部署文件。这个文件就像一个蓝图，它告诉 GitHub 或 Gitee 如何自动部署你的代码。将以下内容复制到文件中：
name: CI/CD
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '16.x'
- run: npm install
- run: npm run build
- uses: akashyap2013/gh-pages@v2
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
步骤 3：设置在线预览环境
给你的代码一个舞台！在 GitHub 或 Gitee 仓库的“Settings”页面中，找到“Pages”或“GitHub Pages”选项，选择“master”分支并保存设置。此时，GitHub 或 Gitee 会自动创建一个在线预览环境。你可以通过点击仓库中的“Pages”或“GitHub Pages”选项来访问它。
步骤 4：设置代码同步
为了让本地和远程仓库同步，你需要定期在本地代码仓库中执行以下命令：
- 获取远程仓库的最新代码：
git fetch - 合并远程仓库的代码到本地代码仓库：
git merge origin/master
常见问题解答
1. 如何解决部署失败的问题？
部署失败可能是由各种原因造成的。检查你的部署文件是否有语法错误或配置不当。你还应该确保你有权访问远程仓库。
2. 代码更改是否会自动部署？
只要你将代码推送到“master”分支，它就会自动部署。如果你希望在不同的分支上部署，你需要修改部署文件。
3. 如何预览未部署的代码？
你可以使用在线代码编辑器或 IDE 来预览未部署的代码。这样，你就可以在部署前发现并修复任何问题。
4. 为什么我的在线预览环境显示错误？
在线预览环境中的错误可能是由代码错误或配置不当造成的。检查你的代码是否有语法错误或逻辑问题。你还可以尝试清除浏览器的缓存。
5. 如何自定义部署过程？
部署文件中的“steps”部分允许你自定义部署过程。你可以添加、删除或修改步骤以满足你的特定需求。
结论
通过这四个步骤，你已经解锁了在 GitHub 或 Gitee 上自动部署和代码同步的强大功能。这将为你节省大量时间和精力，让你专注于更重要的事情，比如编写出色的代码。现在就开始使用这个教程，让你的代码部署和管理变得更加轻松高效！
