github发布pages

一、前言

博主试了无数个教程但是无论是什么ai帮写的deploy.yml文件也好还是一步一步创建gh-pages分支然后巴拉巴拉也好都遇到了各种各样的问题。

但是现在博主带着崭新的手法回来了，无需这么麻烦，按照up的方法从头到尾不用添加别的东西，可以一键部署。同时博主也把自己当中遇到的问题跟大家分享一下解决方法。

二、操作

1. package.json

"scripts":{"dev":"vite","build":"tsc -b && vite build --base=/lindpage/",# 这里"lint":"eslint .","preview":"vite preview","check":"tsc -b --noEmit","deploy":"gh-pages -d dist"# 这里},

在scripts中增加所标注的两行，其中build中的–base=/仓库名/ ，这里的lindpage是我的仓库名
"deploy": "gh-pages -d dist"直接复制过去就行，注：其他不要改动就算其他内容跟我所展示的不一样也不要改动

2. 使用gh-pages工具包【直接可以在vscode的终端中敲的】

npmaddgh-pages-Dnpmrun buildnpmrun deploy

然后过一会就好了，也可以查看github仓库中的ACTIONS，里面黄点变绿点了就ok了；或者在vscode下一个github actions，在其WORKFLOWS中也可以看

三、疑难杂症

• 遇到最大的问题就是为什么网页标题和当中的小图标是有显示的，但是整个页面是空白的。
  • 找Router标签：
    • src/router/index.ts、src/main.tsx、src/App.tsx这三个文件着重看一下一般来说是在App.tsx文件中的，但因为不同的编码习惯或者不同工具创建的项目也有可能在其他两个文件夹下，下述代码是博主更改的Router

import{BrowserRouterasRouter,Routes,Route}from"react-router-dom";importHomefrom"@/pages/Home";exportdefaultfunctionApp(){return(//其中 basename="/lindpage/" lindpage是我的仓库名，你们改成自己的就行<Router basename="/lindpage/">{/* <Router> */}<Routes><Route path="/"element={<Home/>}/></Routes></Router>);}

• 大家会发现欸上面这样改了之后本地都不能访问了，这就对了因为相当于把本地的路径也改了，这样大家的本地资源就访问不到这个路径下了。
  • 大家也不用去搜什么写法来更改这里使得其本地和远程都可以访问，就当一个是调试使用一个是发布使用就好了
• 关于分支的问题
  • gh-pages这个包实则就是在github远程仓库中创建了gh-pages分支【本地仓库是没有的】，所以每次你的项目更新之后只需要npm run build然后npm run deploy就行了，自动就给提交到gh-pages这个分支中去了。所以大家也不用在想本地main这个分支要不要提交会不会影响，其实一点关系都没有。因为上面"deploy": "gh-pages -d dist"这里就是把npm run build生成的dist发布到gh-pages中去。另：看到有些up说要把dist文件夹名手动改成build使用，实则是因为他们的deploy中那个用的也是build不是dist

以上就是我的小小心得啦，这个是我的个人主https://lindlight.github.io/lindpage/，也欢迎大家赏脸