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

起因

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

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

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

困难

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

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

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

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

尝试

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

如何使用github pages 进行部署

1. 把打包后的dist文件直接推到github仓库里
   

2. 然后在仓库里面点击Setting=>pages=>选择分支=>部署的位置=>保存就可以了
   

3. 然后就会生成一个地址,我们直接访问这个地址就可以跟我们本地看到的页面一样

问题:

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

解决:

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

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

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

缺陷:

• 仔细思考一下,上面的尝试我们只做了部署的操作

• 也就是说,我如果要在我这个项目里改点什么东西,就必须手动打包后推送到远程才行(太麻烦了,我只想坐着喝茶)

进阶

项目的情况

1. 这里我分了两个仓库
2. 一个私有仓库是保存我的源码(怕被大佬嘲笑)
3. 一个开源仓库是用来保存打包后的代码的(进行github pages 部署)
4. 我在本地更改的代码每次都会推送到私有仓
5. 然后打包后的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"
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26

• 如果你是开源仓库的话,没必要搞得这么复杂(网络上有很多解决方案),因为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就会自动执行
  

• 然后检查下开源仓,是否有更新,然后访问一下链接,发现东西都对得上

• 至此就可以专注于业务开发了,每次提交就会重新部署