我的网站开发全过程记录:
提示: 大部分是cv代码,少部分样式进行了修改和借鉴,主要花费时间在部署上面,出现的问题
开始:
三个博主:
在掘金上认识了搜狐前端--
英杰
, 掘金链接:yingjieweb 的个人主页 - 动态 - 掘金
偶然间看见了英杰的网站,感觉非常不错,产生自己弄的想法,尤其是快速cv下来的想法。
通过英杰推荐,了解到了海怪。掘金链接:写代码的海怪 的个人主页 - 动态 - 掘金
jiabinPeng博主的博客网站也是一样,掘金链接: JabinPeng 的个人主页 - 动态 - 掘金
博客:
下面是两人的博客概况:
英杰: yingjieweb 个人主页
海怪: 海怪 - 个人主页
jiabinPeng的博客链接: https://www.zpzpup.com/
重要的是jiabinPeng博主上传了源代码: github地址 GitHub - JabinPeng/pengBlog: 个人博客完全开放代码，更新中+++
下载了他的项目源码,对照英杰的网站,开始修改项目。
经历一段时间修改内容后本地项目运行基本完善,此时希望进一步对项目进行部署,但是在没有细致的搜索github pages操作方法就去github pages上随便点击,希望碰一下是否能行。结果是还差一些就成了,当然方向是正确的。
碰见github问题：
在研究github的时候网站一直掉线,所以又去想怎么才能流畅访问github的问题。询问了很多人,尝试了修改host的方法一点效果都没有(就是个脑残方法),还是掉线,在摸索了尝试使用科学后,下载了多个工具,才成功的有了三天科学的时间,重点是工具是很好用的这就行了.欢迎使用
对了记得填写我的分享码,普通用户是一个小时,填写我的兑换码能变成三天,
推广码:188273830
索性下载了谷歌翻译插件,
进行github部署:
解决了github上不去和翻译问题后,尝试联系jiabinPeng博主,但是上次发博客是三个月前了,联系上有些不现实,询问了英杰,英杰发现了我一个问题,提交了一次github仓库修改
就是需要配置base:'/库的名称/'需要加上,在vit.config.ts文件中,
这个后来我也在下面的文章看见了这一点:
所以后面都是摸索这篇文章,
看哪些部分不对,也尝试问了掘金博主,有的方法是创建deploy.sh文件,
大致方向是对的,但是我运行后远端没有gh-pages分支,又创建deploy.yml文件,也是无法在远端创建gh-pages分支。
所以最后跳过脚本创建gh-pages方法,直接在github网站创建:
点击蓝色的小字: 查看所有分支
可以看见new branch按钮就是创建新分支的,点击创建起名就行了
但是创建两个分支后,开始github pages部署仍然没有响应的界面,打开的界面是白屏,
最后直接将jabinPeng的代码原封不动上传到我的github尝试使用github pages部署都不行,所以一定是配置问题。
通过查阅发现不能提前配置pages部署服务,需要最后再点击pages,
gh-pages分支也要放vite build打包后的文件,别的文件是多余的。这时候我本地操作出现问题,索性想在github网站对gh-pages分支所有代码进行删除,然后将dist内的文件拖拽进去上传gh-pages分支就行了,可是发现不能删除,直接尝试直接将dist的文件拖拽进gh-pages分支:
点击add file 可以选择托文件进行添加:
现在gh-pages分支有很多文件,尝试运行部署了一次。
通过github部署项目的方式：
①在项目分之上点击gh-pages分支
②点击settings按钮,
注意: master分支是代码,部署的时候要将分支换成gh-pages分支,这才是网站部署能认识的代码。将gh-pages设置成root,点击setting设置按钮:
③在库的名称部分修改库名称,修改之后点击rename保存:
④点击pages:
提示: 有人没有出现这部分是正常的,因为我的是已经部署完成后才有的:
点击source下面的下拉框按钮:
然后选择gh-pages分支不要选master分支,保存后等待,可以刷新查看是否成功,切记要等待一会。
刷新后上面出现已经部署完成,点击链接访问网站,尝试着访问看看能不能成功,
一看居然成功了,所以注意dist要将里面的文件拖拽gh-pages分支而不是dist包也放进去,
因为他识别不了,没有index文件,之前就是这个问题,虽然有dist但是index找不到,在一个现在gh-pages分支有很多文件,index文件也有好几个,问什么还是能部署,是因为另外几个index是代码,不是打包文件,无法通过哪几个index访问到项目的js和css文件,所以就是之前的白屏问题,现在将dist打包的好几个拖进去了就可以找到了,虽然文件多了点,但是是可以找到的,所以就成功.