目录

为什么用VuePress？

一、前期准备

Node.js

使用主题快速开发

二、VuePress安装

三、个性化定制

修改配置信息

删除不需要的信息

博客上传

四、部署

使用github快速部署

初始化仓库

本地配置

配置github的ssh密钥

部署

为什么用VuePress？

相比于 hexo 之类的知名博客框架， vue 上手起来比较简单，而且想着后续自定义组件可能会比较方便，就选择了 VuePress 进行个人博客的搭建。这次使用的是 VuePress v2 版本，相比于 v1 功能会更加强大，但稳定性方面可能不如 v1 。

注意：VuePress v2 目前仍处于 beta 阶段。你已经可以用它来构建你的站点，但是它的配置和 API 还不够稳定，很可能会在 Minor 版本中发生 Breaking Changes 。因此，在每次更新 beta 版本之后，请一定要仔细阅读 更新日志

本文详细介绍了如何用 VuePress v2 搭建个人博客网站。先选用 VuePress v2 和 vuepress-theme-reco 主题，通过 npm、npx 或 yarn 初始化项目，配置基础信息。然后进行定制，包括修改配置、删除不需要的信息、上传博客。最后讲解了为何用 GitHub Pages 部署及具体步骤，包括初始化仓库、本地配置、部署等。

一、前期准备

Node.js

Node.js的版本需要大于等于 18.16.0，如果你还没有安装Node，可以参加我的另一篇博客Node.js windows版本 下载和安装（详细步骤）-CSDN博客进行下载安装。

使用主题快速开发

物色好框架之后又在网上搜罗了一些比较好看的主题，这次选用了 vuepress-theme-reco 主题，是一款简洁的博客&文档主题，后续如果要添加文档也比较方便。

相比于原生的博客框架，各路大佬们开发的主题框架功能更加丰富，而且网站整体也更加美观。

二、VuePress安装

打开项目文件夹，在当前路径下打开cmd窗口，本次我使用了 npm 进行项目初始化，此外也可以使用 npx 或 yarn。

npm install @vuepress-reco/theme-cli@1.0.7 -gyarn global add @vuepress-reco/theme-cli@1.0.7

# 初始化，并选择 2.x
theme-cli init

接下来，我们通过vscode进入项目文件，使用npm安装需要的依赖包，

npm install

npm run dev

运行成功后，会在 .vuepress 路径下生成两个临时文件（不要手动修改），如下图所示，

三、个性化定制

通过上一步我们很快就搭建好了一个博客网站的模板，接下来就开始我们个人博客的定制。

在 package.json 文件中的 scripts 里添加两行启动脚本，最终的 package.json 长这样：

修改配置信息

打开 config.ts 文件，将默认信息更改为个人信息。修改网站标签展示的默认信息，并修改博客展示的作者名称。

在将默认信息替换成我们的个人信息后，下一步我们就可以根据自己的需要删除掉一些我们暂时不需要的功能。

首页 tagline 下方的两个按钮以及社媒图标我们可以直接删掉，这样首页会更加简洁（当然你也可以保留并替换上自己的文档地址），

完成了前两步，我们网站的总体框架就已经基本整理完了，接下来就到了我们的核心功能，博客上传。

首先，我们需要在 blogs 目录下添加分类目录，框架可以根据分类目录名称进行自动分类，并生成对应的路由。

提示：对按年度区分的子目录再进行分类的话会造成时间轴的混乱，不想要时间轴页面的话就无所谓。

此处我是按照不同的技术进行分类的，分成前后端。 

在子目录下放置你的 md 文章，在每篇 md 文章的开头需要加上如下格式的代码（配置博客信息及自动分类），

​

此时我们已经完成了个人博客网站的基础功能搭建，还需要添加其他的插件或修改样式，可以自行查阅主题文档 vuepress-theme-reco 。

四、部署

完成了网站的搭建，接下来我们就可以进行网站的部署了，毕竟大家花时间做出来的个人博客肯定是想展示给别人看的嘛。这个时候如果有自己的服务器并且熟悉部署的朋友大可以直接部署到自己的服务器，这样做是最自由的。

但如果大家和我一样暂时还没有买服务器又想白嫖的，这边我推荐大家可以部署到 GitHub Pages 上，不仅免费，操作还简单，又可以展示在你自己的 github 主页中，何乐而不为呢？

使用github快速部署

这里快速部署前提是开发者有一定的 github 使用经验，至少需要有自己的 github 账号并在本地下载了 git 。

初始化仓库

登录 github 新建仓库，记得设置访问权限为 public，

​本地配置

在 config.ts 文件中添加 base 属性，地址为 "/仓库名称/" ，这里的仓库名称就是上一步设置的 Blog,

同时，由于默认的 base 为 /，因此在 base 变更后 head 标签中的图片路径也需要修改。

#!/usr/bin/env sh
​
# 确保脚本抛出遇到的错误
set -e
​
# 生成静态文件
npm run build
​
# 进入生成的文件夹
cd .vuepress/dist
​
git init
git add -A
git commit -m 'deploy'
​
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
​
cd -

注意上方的仓库地址需要替换为你自己的地址，并且上面的脚本文件中使用 ssh 进行代码的推送，需要提前配置 ssh 公钥，没有配置过的进行下面这个步骤，或者将上述 git@github.com:<USERNAME>/<REPO>.git 替换为 https 的地址。

配置github的ssh密钥

（1）通过以下命令，查看是否配置账户和邮箱，

git config --global  --list 

git config --global  user.name "你的账户"
git config --global user.email "你的邮箱"

设置完成后，可通过git config --global  --list 命令校验以下。

（2）账户和邮箱配置完成后，可使用以下命令，生成秘钥，

ssh-keygen -t rsa -C "你的邮箱"

 执行命令后进行3次或4次确认（按回车键）：

1. 确认秘钥的保存路径（如果不需要改路径则直接回车）；
2. 如果上一步置顶的保存路径下已经有秘钥文件，则需要确认是否覆盖（如果之前的秘钥不再需要则直接回车覆盖，如需要则手动拷贝到其他目录后再覆盖）；
3. 创建密码（如果不需要密码则直接回车）；
4. 确认密码；

我这里的操作是没有创建密码，若需创建密码，需要进行四次确认，如果不需要创建密码，进行三次确认就可以了。

执行命令后，若出现ssh-keygen 不是内部或外部命令问题，请配置ssh-keygen的环境变量。

以下为执行命令后的截图效果，

最后，在git界面中运行脚本文件 deploy.sh，

sh deploy.sh

在项目最外层目录下右键 git bash，

​如果顺利的话，相信很短的时间内大家就可以完成上面的步骤，成功部署自己的网站。