掘金 后端 ( ) • 2024-04-26 13:41

前言

静态网页托管是一种让你的网站在互联网上可见的服务。这种服务通常用于托管那些只包含 HTML、CSS 和 JavaScript 的网站,不需要任何服务器端的处理。静态网页托管服务提供了一种简单、高效且成本低的方式来发布网站,非常适合用来发布纯文档或者工具库类型的前端应用。已经有大量的开源项目,比如element等用来发布文档项目。下面介绍两个常用的静态网页托管服务。

GitHub Pages 操作指南

GitHub Pages 是一个免费的静态网页托管服务,它可以直接从你的 GitHub 仓库中提取网页内容。以下是使用 GitHub Pages 的基本步骤:

  1. 创建一个新的 GitHub 仓库。
  2. 在仓库中添加你的静态网页文件。
  3. 在仓库的设置中,找到 GitHub Pages 部分,选择一个发布源。
  4. 点击保存,你的网站就会被发布到 https://<username>.github.io/<repository>

Gitee Pages 操作指南

Gitee Pages 是 Gitee 提供的一个免费的静态网页托管服务。以下是使用 Gitee Pages 的基本步骤:

  1. 登录你的 Gitee 账户,创建一个新的 Gitee 仓库。
  2. 在仓库中添加你的静态网页文件。
  3. 在仓库的设置中,找到 Gitee Pages 部分,点击 "创建/更新"。
  4. 你的网站就会被发布到 https://<username>.gitee.io/<repository>

当然,对于一个程序员来说,能用机器自动化执行的就不用手动点击操作。这就要用到CI/CD了,下面介绍下CI/CD的概念。

CI/CD

  1. 持续集成 (Continuous Integration)

持续集成(CI)可以帮助开发者更加频繁地将代码更改合并到主分支。一旦开发人员将改动的代码合并到主分支,系统就会通过自动构建应用,并运行不同级别的自动化测试(通常是单元测试和集成测试)来验证这些更改,确保这些更改没有对应用造成破坏。如果自动化测试发现新代码和现有代码之间存在冲突,CI 可以更加轻松地快速修复这些错误。

  1. 持续交付 (Continuous Delivery)

完成 CI 中构建及单元测试和集成测试的自动化流程后,持续交付可以自动把已验证的代码发布到存储库。持续交付旨在建立一个可随时将开发环境的功能部署到生产环境的代码库。在持续交付过程中,每个步骤都涉及到了测试自动化和代码发布自动化。在流程结束时,运维团队可以快速、轻松地将应用部署到生产环境中。

  1. 持续部署 (Continuous Deployment)

对于一个完整、成熟的 CI/CD 管道来说,最后的阶段是持续部署。它是作为持续交付的延伸,持续部署可以自动将应用发布到生产环境。实际上,持续部署意味着开发人员对应用的改动,在编写完成后的几分钟内就能及时生效(前提是它通过了自动化测试)。这更加便于运营团队持续接收和整合用户反馈。

总的来说,所有这些 CI/CD 的关联步骤,都极大地降低了应用的部署风险。不过,由于还需要编写自动化测试以适应 CI/CD 管道中的各种测试和发布阶段,因此前期工作量还是很大的。对于开源世界的程序员来说,最著名的CI/CD就是github action了。

GitHub Actions

GitHub Actions 是一个持续集成服务,可以用于自动化的构建、测试和部署你的项目。下面是如何使用 GitHub Actions 自动发布到 GitHub Pages 和 Gitee Pages 的步骤:

  1. 自动发布到 GitHub Pages

    在你的项目根目录下,创建一个新的工作流文件 .github/workflows/main.yml,并添加以下内容:

name: Deploy GitHub Pages

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2
    
      - name: Build
        run: npm install && npm run build
    
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          REPOSITORY_NAME: <your-github-username>/<your-github-repo>
          BRANCH: master
          FOLDER: public

这个工作流会在你向 master 分支推送代码时自动运行,它会检出你的代码,安装依赖,构建你的项目,然后将构建的结果推送到 GitHub Pages。

  1. 自动发布到 Gitee Pages

    在同一个工作流文件 .github/workflows/main.yml 中,继续添加以下内容:

      - name: Sync to Gitee
        uses: wearerequired/git-mirror-action@master
        env:
          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
        with:
    source-repo: [email protected]:<your-github-username>/<your-github-repo>.git
          destination-repo: [email protected]:<your-gitee-username>/<your-gitee-repo>.git
      
      - name: Build Gitee Pages
        uses: yanglbme/gitee-pages-action@main
        with:
          gitee-username: <your-gitee-username>
          gitee-password: ${{ secrets.GITEE_PASSWORD }}
          gitee-repo: <your-gitee-username>/<your-gitee-repo>
          branch: master

这个工作流会将你的 GitHub 仓库同步到 Gitee,然后自动部署 Gitee Pages。 注意,你需要在 GitHub 的仓库设置中添加一些 Secrets,包括 ACCESS_TOKEN(你的 GitHub 访问令牌),GITEE_RSA_PRIVATE_KEY(你的 Gitee RSA 私钥),和 GITEE_PASSWORD(你的 Gitee 密码)。 以上就是如何使用 GitHub Actions 自动发布到 GitHub Pages 和 Gitee Pages 的步骤。如果你需要更多关于 GitHub Actions 的信息,你可以查看官方文档。

总结说明

无论你选择使用 GitHub Pages 还是 Gitee Pages,都能够快速、简单地发布你的静态网站。这两种服务都提供了一种方便的方式,让你的网站可以被全世界的人访问。只要你有一个包含 HTML、CSS 和 JavaScript 文件的仓库,就可以使用这些服务来托管你的网站。但是,你需要确保你的网站没有任何服务器端的处理需求,因为这些服务只支持静态网页。如果你需要服务器端的处理,你可能需要考虑使用其他类型的网页托管服务或者serverless服务。