首先你需要有一个 github
账号。是个程序员的都知道👌,所以就不说怎么注册了
操作步骤:
- 登录
github
,点击右上角New
创建一个新的仓库
2. 填写仓库的相关信息
- 这里的 Repository name,有且只能起一个名字,才能变成你的域名 , [你的github账号名].github.io。以后就可以用
[你的github账号名].github.io
这个网址来访问你的网站啦。⚠你也可以起其他名字,但会成为一个普通的仓库,没有网站的功能。
- 需要选择
public
公共对外,否则无法通过链接地址访问
-
🎉然后就创建成功属于你的仓库了,你可以通过
https
orssh
的方式来克隆或连接你的仓库 -
🔧可以将你打包后的
dist
文件夹内的内容上传到仓库,然后github page
会自动更新你的文件。
github-pages-deploy-action 自动简化打包部署上传
github-pages-deploy-action是一个开源的工作流配置,配置后你将不再需要手动打包推送更新。只需要每次修改完代码直接提交就可以,它会自动根据你的配置,基于指定的[branch]
打包成一个[gh-page]
作为你的静态文件
搭建过程
新建一个仓库,然后配置你的工作流。你可以直接使用官方提供的 配置案例
main.yml
name: Build and Deploy
on: [push]
permissions:
contents: write
jobs:
build-and-deploy:
concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v4
- 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 ci
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: build # The folder the action should deploy.
在设置中修改你部署github page
的分支为默认创建的gh-page
,即可大功告成🎉~~