返回

Gitee Pages个人博客自动部署指南：一劳永逸解决更新烦恼

闲谈

无忧部署：轻松将博客发布到 Gitee Pages，打造自动更新流程

在数字时代，打造一个个人博客是分享想法、建立社区和展示专业技能的绝佳方式。然而，网站维护，尤其是内容发布，可能会成为一个令人头疼的障碍。Gitee Pages，作为国内领先的代码托管平台，提供了便捷的博客托管服务，并支持自动部署功能。这篇文章将详细介绍如何将个人博客项目部署到 Gitee Pages，实现自动部署，让你可以专注于内容创作，尽享轻松的博客运维体验。

首次部署：一步步指南

准备工作：

  1. 注册 Gitee 账号并创建一个个人博客项目。
  2. 本地安装 Git 并配置 SSH Key。
  3. 将博客项目代码提交到 Gitee 远程仓库。

配置 Gitee Pages：

  1. 登录 Gitee，进入个人博客项目页面。
  2. 点击 "Pages" 选项卡，选择 "部署分支"。
  3. 选择要部署的分支，通常是 main 或 master 分支。

配置自动部署：

  1. 登录 Gitee，进入个人博客项目页面。
  2. 点击 "Settings" 选项卡，选择 "Webhooks"。
  3. 点击 "Add webhook" 按钮，填写以下信息：
    • Payload URL：填写您的博客项目地址，如 https://gitee.com/your-username/your-project。
    • Content type：选择 "application/json"。
    • Secret：填写任意字符串作为密钥。
    • Events：勾选 "Push"。
    • Active：勾选 "Active"。
  4. 点击 "Create webhook" 按钮完成配置。

测试自动部署：

  1. 在本地电脑上修改博客项目代码，并提交到 Gitee 远程仓库。
  2. 等待几分钟，即可在 Gitee Pages 上看到更新后的博客内容。

持续自动部署：解锁无缝发布

为了实现持续自动部署，我们可以借助 CI/CD 工具，这里推荐使用 GitLab CI/CD。

准备工作：

  1. 在 GitLab 上创建个人博客项目。
  2. 在个人博客项目中创建 .gitlab-ci.yml 文件。
  3. 在 .gitlab-ci.yml 文件中添加以下内容：
image: node:16

stages:
  - build
  - deploy

build:
  stage: build
  script:
    - npm install
    - npm run build

deploy:
  stage: deploy
  script:
    - mkdir -p public
    - cp -r build/* public
  artifacts:
    paths:
      - public
  only:
    - master

配置 GitLab CI/CD：

  1. 登录 GitLab，进入个人博客项目页面。
  2. 点击 "Settings" 选项卡，选择 "CI/CD"。
  3. 勾选 "Enable CI/CD" 复选框。
  4. 点击 "Save changes" 按钮完成配置。

测试持续自动部署：

  1. 在本地电脑上修改博客项目代码，并提交到 GitLab 远程仓库。
  2. 等待几分钟，即可在 GitLab Pages 上看到更新后的博客内容。

常见问题解答

  1. 为什么我的博客内容没有更新？

    • 检查 Webhook 配置是否正确。
    • 确保提交的代码更改已推送到正确的分支（通常是 main 或 master）。
    • 等待几分钟，Gitee Pages 可能需要一些时间来处理更改。

  2. 我可以使用其他 CI/CD 工具进行自动部署吗？

    • 是的，Gitee Pages 支持与各种 CI/CD 工具集成，包括 Jenkins、Travis CI 和 CircleCI。

  3. 我的博客可以使用自定义域名吗？

    • 是的，您可以通过 Gitee Pages 的自定义域名功能配置自定义域名。

  4. Gitee Pages 提供哪些其他功能？

    • Gitee Pages 提供了各种其他功能，包括统计分析、SSL 证书和一键部署。

  5. 如何优化我的博客性能？

    • 使用静态网站生成器。
    • 启用 Gitee Pages 的缓存功能。
    • 优化图像并使用 CDN。