github 搭建个人导航网

最近搭建了个 个人的导航网,具体内容见下图,欢迎大家访问吖,点击访问

具体实现是使用 vue3 编写,白嫖 github 的 page 部署

首先在 github上创建一个仓库:name.github.io # name是你 github 的名字

然后在本地创建一个 vue3 项目

然后把刚创建的仓库 clone 到本地,接着把刚创建的vue3 项目里面的内容全部粘贴到仓库里面,比如我的仓库名字是 gwt805.github.io

下一步就可以开始完善我们的页面内容了,当完善页面页面内容后,进行如下操作,修改 vite.config.ts 文件,如下图,配置 base 和 build

接下来就该 build 文件,然后提交到仓库当中

bash 复制代码
npm run build
 
git add .
 
git commit -m "xxxx"
 
git push

然后打开 刚创建的 name.github.io 的仓库,点击设置,找到 GitHub Pages,然后按照下图方式配置,选择从分支部署,选择对应的分支,然后选择 /docs (因为我们刚刚 build 之后生成的页面就是在这个目录下面的)

设置完成后,可以点击 操作,查看 部署进度,当部署完成后,可以在浏览器中访问 name.github.io 进行查看

温馨提示:

如果已经存在 name.github.io 仓库的话,那么 创建仓库的时候可以自定义命名

不一样的地方是把刚刚 修改 vite.config.ts 中的 base 要改成 这个 自定义命名 的仓库名

比如仓库名为 abc ,那 base 这快就要改成 /abc/ ,最后访问的地址就变成了 name.github.io/abc

如果只是想和文章刚开始的样式图一致的话,则只用修改 public/data/data.json 中的内容,然后重新 build,重新 push 到仓库即可

相关推荐
好想来前端1 小时前
私有化部署 LLM 时,别再用 Nginx 硬扛流式请求了 —— 推荐一个专为 vLLM/TGI 设计的高性能网关
后端·架构·github
charlie1145141913 小时前
用 MkDocs + GitHub Actions 自动化部署项目文档
自动化·github
MemOS5 小时前
MemOS 产品更新|支持全量获取用户记忆,记忆管理与对话体验提升
github
恋猫de小郭6 小时前
Compose Multiplatform 1.10 Interop views 新特性:Overlay 和 Autosizing
android·flutter·macos·kotlin·github·objective-c·cocoa
极客小云7 小时前
【增强版 X-AnyLabeling:支持多模态图像对比标注与 YOLO 标签自动导入】
yolo·目标检测·github·语义分割
CoderJia程序员甲18 小时前
GitHub 热榜项目 - 日榜(2026-1-13)
人工智能·ai·大模型·github·ai教程
iuu_star1 天前
项目开源-零基础掌握GitHub大文件上传(Git)
开源·github
wangruofeng1 天前
OpenCode 上手初体验:从安装到基础使用
github·ai编程
Albert Edison1 天前
【Git】多人协作二(不同分支下)
git·elasticsearch·svn·github
数据大魔方1 天前
【期货量化实战】豆粕期货量化交易策略(Python完整代码)
开发语言·数据库·python·算法·github·程序员创富