用VuePress在GitHub Pages上搭建博客

请先点击链接RobinDevNotes,体验用VuePress搭建博客的效果(logo还没有合适的替换),目前部署在GitHub Pages上,国内访问速度还可以,再阅读本文感受来龙去脉和搭建过程。

最近准备自己要写点小项目,当前技术栈是以运维和后端为主,自己要写项目的话还是要会一些前端技术,选择学习国内比较流行的Vue(知识都学杂了),先看了极客时间的《玩转Vue 3全家桶》,原理居多,现在在B站看大佬小满zs的《Vue3 + vite + Ts + pinia + 实战 + 源码 + electron》,讲得细致,深入浅出,有独特的视角,推荐学习,需要先了解一点Vue和TypeScript。

我之前GitHub上的静态博客是用Hexo搭建的,现在在学Vue,就想着Vue有没有对应方面的框架,搜索一番,了解到Vue生态下的VuePress和VitePress,VitePress更轻快,VuePress可配置和灵活性多一些,可自行根据需要选择,我选择功能较多的VuePress。

下面开始VuePress创建和配置,VuePress有社区类型主题供选择,可以使用VuePress默认配置直接创建,同样可以选择对应的主题去创建,选择下面两条命令中一条命令去执行即可。

使用默认配置直接创建

bash 复制代码
pnpm create vuepress vuepress-starter

使用vuepress theme hope主题创建

bash 复制代码
pnpm create vuepress-theme-hope vuepress-starter

最后一个参数vuepress-starter为创建的项目目录名称,执行后会出现下面几个问题,根据需求选择合适的,项目就创建完成了。

bash 复制代码
✔ Select a language to display / 选择显示语言 简体中文
✔ 选择包管理器 pnpm
✔ 你想要使用哪个打包器? vite
生成 package.json...
✔ 设置应用名称 RobinDevNotes
✔ 设置应用描述 Robin's dev notes
✔ 设置应用版本号 2.0.0
✔ 设置协议 MIT
生成 tsconfig.json...
✔ 你想要创建什么类型的项目? blog
✔ 项目需要用到多语言么? no
生成模板...
✔ 是否初始化 Git 仓库? yes
✔ 是否需要一个自动部署文档到 GitHub Pages 的工作流? no
安装依赖...
这可能需要数分钟,请耐心等待.

进入项目目录,执行下面命令就能启动项目了,执行后在浏览器中访问http://localhost:8080可以看到项目的初始状态的样子了。

bash 复制代码
pnpm run docs:dev

我选择使用vuepress theme hope主题,对应配置文件在src/.vuepress目录下,config.ts是VuePress配置文件,navbar.ts是上方导航栏配置文件,sidebar.ts是侧边栏配置文件,theme.ts是主题配置文件,文章以markdown格式放在src/posts目录下,src/intro.md是介绍页。修改完成配置后,接下来构建生成静态网站文件。

bash 复制代码
pnpm run docs:build

默认生成的静态网站文件在src/.vuepress/dist目录下,将生成的文件上传覆盖到之前代码仓库目录下,访问https://robin-2016.github.io地址就能看到更新后的博客了,就是文章开头链接的博客了。

如果是首次配置GitHub Pages,在GitHub上创建一个以自己用户名+github.io为名称的代码仓库,例如我的GitHub用户名是robin-2016,我创建的仓库名称即为robin-2016.github.io,同样将src/.vuepress/dist目录下所有文件上传刚创建的代码仓库即可,静态博客网站就由GitHub托管运行了。

在上面学习实践过程中,发现现在每个GitHub仓库都可以配置对应的Pages静态网站了,我之前一直认为是一个账号只能有一个代码仓库可以设置,现在才知道是每一个代码仓库可以对应一个,访问的地址和上面的有所不同,需要在之前的基础上增加以当前代码仓库名称的前缀,如果代码仓库名称为test,以我的GitHub为例,则对应这个代码仓库的Pages地址为https://robin-2016.github.io/test/,具体设置在对应代码仓库的Settings下的Pages,基于某一个分支进行部署,还可以直接这个已有的GitHub Actions来执行,如果你发现一个项目下有一个名为gh-pages的分支,大概率就是这个项目的GitHub Pages静态网站,一些开源项目用的较多。

如果在项目初期,完全可以使用VuePress和GitHub Pages来建立项目的在线文档或项目官网网站,选择合适的主题或模式即可。

相关推荐
工业互联网专业7 小时前
基于Spark的新冠肺炎疫情实时监控系统_django+spider
python·spark·django·vue·毕业设计·源码·课程设计
SheldonChang9 小时前
Onlyoffice集成与AI交互操作指引(Iframe版)
java·人工智能·ai·vue·onlyoffice·postmessage
lichong95110 小时前
【混合开发】Android+Webview+VUE播放视频之视频解析工具mediainfo-Macos
android·macos·架构·vue·音视频·api·postman
PBitW1 天前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
叫我阿柒啊1 天前
从全栈开发到云原生:一位Java工程师的实战经验分享
java·spring boot·redis·云原生·kafka·vue·全栈开发
叫我阿柒啊1 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
刺客-Andy2 天前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue
獨孤殤2 天前
Flutter + Web:深度解析双向通信的混合应用开发实践
前端·flutter·vue
BYSJMG3 天前
基于Python毕业设计推荐:基于Django的全国降水分析可视化系统
hadoop·python·django·vue·毕业设计·课程设计·毕设
zkkkkkkkkkkkkk3 天前
vue组件中实现鼠标右键弹出自定义菜单栏
javascript·vue.js·vue