通过github pages部署自己写的vue个人网站（亲测保熟）

目录

前言：

总结：想有个人网站，但是浏览之后没有想要的，就自己写一个记录一下！（gitee码云上也可以免费部署，步骤应该同理适用）

第一步（前期准备）：

第二步（实际操作）： 

        1、创建远程仓库

        2、将你的项目提交到github上才创建的仓库里

        3、打包，修改配置，添加分支并上传

        3.1、打包

         3.2、修改配置

        3.3、添加分支并上传

         4、设置github仓库内容

第三步（常见问题）：

1、绑定仓库之后，上传出错，想重新绑定上传

2、上传时报错

3、上面都没问题，但是就是页面空白

---

前言：

        其实在最开始的我就一直想写一个自己的个人网站，毕竟打算在这行长久下去（虽然是小白），就必须要给自己留一点脚步印记。虽然之前写过如何部署项目，但是那个项目的服务器却是有时间限制的（新用户白嫖一个月----->点击查看），后续就一直在想要一个永不失联的个人网站，在网上冲浪的时候就发现了github pages（只能是静态页面），写这个的原因就是记录一下，顺便看看能不能帮到其他人。其实关于项目部署在github pages上的教程有很多，但是由于自己愚钝，看了很多教程后，弄了很久都没好，所以自己就决定当我弄好了之后一定要记录一下，万一也有位友友跟我的情况一样呢（哈哈，能帮助人是好事，没帮到就当记录了！）

总结：想有个人网站，但是浏览之后没有想要的，就自己写一个记录一下！（gitee码云上也可以免费部署，步骤应该同理适用）

第一步（前期准备）：

        1、已经具有个人网站的静态页面

        2、要具备github账号

第二步（实际操作）： 

        1、创建远程仓库

        Repository name中的名字，建议为<USERNAME>.github.io，这样更方便并且明确，后续就可以直接通过https://<USERNAME>.github.io进入，不然的话网址很长。

        2、将你的项目提交到github上才创建的仓库里

# 初始化
git init
# 项目所有文件添加到暂缓区
git add .
# 为这个提交添加一条简短的说明
git commit -m "first commit"
# 将当前分支（强制）重命名为main
git branch -M main
# 连接到远程仓库
git remote add origin https://github.com/<username>/<username>.git
# 将缓存内容推送到远程仓库中
git push -u origin main

        3、打包，修改配置，添加分支并上传

        3.1、打包

# vite 打包
npm run build

注意：其实可以先将自己的代码内容正常上传到github上后，再来进行创建分支将dist包上传到分支中（因为主分支中一般来说是不建议包含dist包的）

         3.2、修改配置

找到.gitignore文件，将dist文件夹注释掉（我这是注释后的，dist-ssr我没有这个文件夹，就不管）。

备注：如果不注释掉的话，在推送的过程中，这个内容是不会上传的

        3.3、添加分支并上传

 建议分支为gh-pages(其他的命名方式没试过，因为这个命名是官方建议的github pages说明文档)

git add .
git commit -m 'push dist'
// 将 dist 目录的内容推送到远程仓库的 gh-pages 分支（这个命令会创建对应分支，如果没有的话）
git subtree push --prefix dist origin gh-pages


我最开始是使用的git add dist/*,然后push发现没用，还是没找到对应资源

         4、设置github仓库内容

还有就是Build and deployment的Source中要是Deploy from a branch才行

 这样之后就能在github pages中看到Visit site了。

第三步（常见问题）：

1、绑定仓库之后，上传出错，想重新绑定上传

将这个删除掉就行，后面重新连接远程仓库就好（其他的方法没试过，如果有小伙伴知道，也可以告诉我）

2、上传时报错

如果出现这个错误，请保持网络良好，开了代理的建议关闭（我就是因为开了代理，才出现这个错误，当我关了之后就好了）

3、上面都没问题，但是就是页面空白

注意：如果你正要部署到 https://<USERNAME>.github.io/，请将 base 设置为 '/'或‘/*’。或者，你也可以从配置中移除 base，因为它默认为 '/'。
如果你正在部署到 https://<USERNAME>.github.io/<REPO>/（例如你的仓库地址为 https://github.com/<USERNAME>/<REPO>），那么请在vite.config.js的defineConfig中将 base 设置为 '/<REPO>/'。

按照上面步骤来后，就能成功部署你的个人网站啦！

这个github pages适用于已经完善，不需要修改的网站，后续还会去试试github actions，因为它可以让我们在上传内容的同时自动更新，而不需要手动更新。