前端使用github pages 部署自己的网站

起因

前段时间做了个小工具,能够大幅度提高前端处理国际化的效率.

但是只能自己在本地使用,没有办法把它分享出来给大家一起使用…

就想了解一下如何把这个工具部署到服务器上,这样大家就都可以访问并使用了

困难

作为一名前端小开发,其实平时也就会写写页面,自己的视野仅仅放在前端这个领域

在企业里基本上入职之后,都有一套成熟的流程让我们不用关心项目的集成和部署(gitlab,Jenkins之类的工具)

我们只需专注于业务层面,画画页面,写写业务逻辑,然后提交到代码仓库,通过测试后就与我们没有关系了

正是因为这些,我们成为了一个个孤岛(螺丝钉)

尝试

因为是一个纯前端的项目,可以使用github pages进行部署

如何使用github pages 进行部署

把打包后的dist文件直接推到github仓库里
然后在仓库里面点击Setting=>pages=>选择分支=>部署的位置=>保存就可以了
然后就会生成一个地址,我们直接访问这个地址就可以跟我们本地看到的页面一样

问题:

项目中用了第三方api的接口,在本地做了代理,可以使用,但是在github pages 里面产生了跨域

解决:

因为无法在github pages 里配置代理,最后只能选择jsonp的方式来解决跨域的问题

至此:我达到了我的目的,可以让大家通过网址来访问我做的小工具

https://david-xia001.github.io/JSON-internationalization/

缺陷:

仔细思考一下,上面的尝试我们只做了部署的操作
也就是说,我如果要在我这个项目里改点什么东西,就必须手动打包后推送到远程才行(太麻烦了,我只想坐着喝茶)

进阶

项目的情况

这里我分了两个仓库
一个私有仓库是保存我的源码(怕被大佬嘲笑)
一个开源仓库是用来保存打包后的代码的(进行github pages 部署)
我在本地更改的代码每次都会推送到私有仓
然后打包后的dist文件都会推送到开源仓

最终解决方案-actions

github 提供了一个功能,有点像jenkins,用它就可以帮我们自动集成部署了
可以直接在github网页上操作,最后会生成一个工作流的文件放入你的项目中
能写这个文件需要一定的linux基础以及对github actions文档进行学习才行

这里我直接贴代码了(大家可以直接复制,改一改参数就可以)

name: Node.js CI CD

on:
  push:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@main
    - run: npm install && npm run build
    
      # 部署到 GitHub Pages
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@v4.3.3
      with:
          token: ${{ secrets.ACCESS_TOKEN }}
          repository-name: David-XIa001/JSON-internationalization
          BRANCH: main
          FOLDER: dist
          CLEAN: true
          commit-message: "Deploy by source"

如果你是开源仓库的话,没必要搞得这么复杂(网络上有很多解决方案),因为github pages只支持开源仓的部署
但是我希望我的源码是私有仓,部署是开源仓,这个就稍微复杂一点
这里用了一个开源的部署库 JamesIves/github-pages-deploy-action
里面有个参数repository-name,可以指定你要部署的仓库(前提是需要PAT)
而且需要将PAT的值放入到仓库的secret里
然后置于这个参数中 token: ${{ secrets.ACCESS_TOKEN }}
- 创建PAT(Personal Access Token)
  - 创建PAT的主要目的是给私有库访问目标库的权限，可以让私有库的actions推送构建好的代码到目标库中去
  - Profile Photo -> Settings -> Developer settings -> Personal access tokens -> Generate new token
  - 勾选下面两个scope: workflow and write:packages
  - PAT生成好之后，复制下来,为方便指代，不妨设它为TOKENXXX
- 在私有库中设置Secret
  - 在私有库中: > Settings -> Secrets -> Actions -> New repository secret
  - 粘贴刚才生成的PAT TOKENXXX 到value框中，并命名这个secret为ACCESS_TOKEN
这里基本就完事了,我们向私有仓push一下,这个action就会自动执行
然后检查下开源仓,是否有更新,然后访问一下链接,发现东西都对得上
至此就可以专注于业务开发了,每次提交就会重新部署