小白图文教程,使用 github + action 搭建自己的主页

735 阅读1分钟

1. 使用 vue/react 创建一个项目

image.png

2. 创建一个远程的仓库

image.png

3. 把代码 push 上去

image.png

4. 点击菜单中的“Actions”, 然后点击 “set up a workflow yourself”

image.png

5. 将以下内容输入文本框 (我是vue写的, 需要把打包后的文件夹由build改成dist)

deploy-to-github-pages 地址: github.com/marketplace…

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm install
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: dist # The folder the action should deploy.

6. 提交

image.png

7. 等待action跑完后, 按照下图中的顺序依次点击

image.png

8. 这时候等待一会儿按照下图打开链接就可以看到自己的主页了

image.png

image.png

9. 如果页面空白但显示的不是404, 这时候需要更改vue.config.jspublicPath, 推送生效

image.png

10. 如果使用history路由, 可能刷新会404, 这边推荐使用hash路由模式

附上本人该demo的github地址: 方便同学查看源码 https://github.com/xiaolizi9/my-blog