用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默认配置直接创建，同样可以选择对应的主题去创建，选择下面两条命令中一条命令去执行即可。

使用默认配置直接创建

pnpm create vuepress vuepress-starter

使用vuepress theme hope主题创建

pnpm create vuepress-theme-hope vuepress-starter

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

 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可以看到项目的初始状态的样子了。

pnpm run docs:dev

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

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来建立项目的在线文档或项目官网网站，选择合适的主题或模式即可。