前言:
前置知识: git操作, github账号, yarn/npm/pnpm操作,dumi(这里作为静态博客脚手架使用),没有接触过也没关系,可以用vue press或者其他项目替代,这里选用dumi1.0
主要是帮助没有使用过gh-pages的coder通过借助github的在线网页服务, 搭建属于自己的博客网站或个人网页
而且可以在提交github代码后自动完成部署和更新
dumi官网:
vuepress官网:
建议使用dumi的静态站点脚手架, 通过 npm create @umijs/dumi-app 即可创建静态博客站点
1.前置准备: 在github创建私人token并设置仓库
私人token最好设置一个过期时间, 以保证账号安全
到这里创建github私人token就创建完成了
2.创建仓库,本地关联,然后配置token到仓库中
这里需要一些git下载/关联的操作, 可以在掘金上搜索其他文章, 仓库要设置为public也就是公开状态
下面是我通过dumi创建的博客模板,啥也不用改直接push到仓库即可, 如果你有自己的Vue/React项目也可以用, 都是类似的, 但是最好是要有可配置publicPath的脚手架创建的项目, 后续会讲到为什么
关联完成后, 准备在仓库设置页进行Github Actions的前置准备与仓库secrets配置
3.配置Github Actions,并且获取gh-pages在线地址(最重要的一步)
这里回到本地的项目,依次在根目录下创建
.github文件夹
workflows文件夹
deploy.yml文件
然后直接git push到仓库,让该配置文件生效
附赠github官方文档地址
docs.github.com/cn
name: deploy
on:
push:
branches: [main] # 1.这里是你当前主分支的名字,我这里是main,你的可能是master
paths-ignore:
- README.md ## 2.表示该文件更新不会触发Github Actions部署,自行配置即可
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Build
uses: actions/setup-node@master
with:
node-version: '16.x'
- run: npm install # 安装依赖
- run: npm run build # 打包
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
publish_dir: ./dist # 3.打包后文件的输出目录(根据你自己的项目情况而定)
github_token: ${{ secrets.CODEROUDEMOSECRETNAME }} # 4.刚才你C下来的仓库token秘钥!!!
user_name: ${{ secrets.MY_USER_NAME }} # 不用改
user_email: ${{ secrets.MY_USER_EMAIL }} # 不用改
commit_message: 自动部署 # 5.部署时的 git 提交信息，自由填写
回到仓库,会发现你的项目Actions页签下有一项工作流正在运行, 如果没有, 改一点东西再git push一次
如果Git Actions执行失败,可以点击进去查看详细的失败原因
找到seting进去gh-pages的设置页面,找到自己的项目在线地址
4.配置publicPath,解决项目资源404的问题
进入到自己的gh-pages网站,你会发现js资源和css资源请求地址错误,缺少了项目名的前缀,这时候就要用到上文所说的publicPath了,实际上就是一个配置项,附上参考地址:
d.umijs.org/zh-CN/confi…
webpack.docschina.org/guides/publ…
这里的publicPath写这个项目的名称就好,记得前后的/不要少了,详细规则参考上面链接
修改完成后就可以正常访问自己的网站了
结语:
到这里就全部完成了,另外,码云gitee也是有 Gitee Pages 服务的,国内访问更加稳定, 参考本文也能进行配置
