搭建个人博客

作为一个前端攻城狮，怎么能没有自己的个人博客呢？每每想到这里我都不禁黯然神伤，但又总提不起那个兴致来做，做为究极强迫症加拖延症患者，要做到自己满意，免不得内耗一阵子，然后再摆一阵子，然后突然就来了兴致，上网咔咔搜索了一番，便开始一顿埋头猛做。

为什么用VuePress？

相比于 hexo 之类的知名博客框架，作为一个前端臭搭页面的，对 vue 难免有些许偏爱， vue 上手起来比较简单，而且想着后续自定义组件可能会比较方便，就选择了 VuePress 进行个人博客的搭建。

这次使用的是 VuePress v2 版本，相比于 v1 功能会更加强大，但稳定性方面可能不如 v1 。

注意

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

VuePress v2 官网：

使用主题快速开发

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

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

快速开始

本次我使用了 npm 进行项目初始化：

npm 复制代码

# 初始化，并选择 2.x
`npm install @vuepress-reco/theme-cli@1.0.7 -g`
`theme-cli init`

此外也可以使用 npx 或 yarn ：

npm

npx 复制代码

# 初始化，并选择 2.x
npm install @vuepress-reco/theme-cli@1.0.7 -g
theme-cli init

yarn

yarn 复制代码

# 初始化，并选择 2.x
yarn global add @vuepress-reco/theme-cli@1.0.7
theme-cli init

配置项目基础信息：

配置成功显示：

进入项目文件运行 npm install ：

成功运行后可以看到我们的基础目录结果：

其中 .vuepress 文件夹放置了所有于 VuePress 相关的文件， public 放置静态图片， config.ts 配置网站的标题和路由等信息。 blogs 文件夹分类放置博客内容，而 docs 文件夹则用来放置展示的文档。

npm run dev 启动项目：

项目默认运行在 8080端口：

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

点击访问，此时可以看到博客的基本框架已经搭建好了：

定制个人博客

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

1.修改配置信息：

打开 config.ts ，将默认信息更改为个人信息。

修改网站标签展示的默认信息：

修改博客展示的作者名称：

添加 head 标签属性，为网站附上图标：

ts 复制代码

export default defineUserConfig({
---
head: [
  ['link', { rel: 'icon', href: '/logo.png' }]
]
---

修改首页信息，填上你想要展示的个人信息：

可以修改首页开屏内容，如背景图片（存放在 public 文件夹中），博客标题、描述等信息，也可以换上自己的 github 仓库地址。

2.删除不需要的信息：

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

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

删除作者在 Readme 中给出的 快速开始 提示：

此外，如果我们的个人博客暂时没有文档功能，就可以先删除掉 docs 目录，并删除掉一些与文档相关的配置：

文档侧边栏配置：

在 navbar 中删除文档路由信息：

暂时不需要公共栏或评论区也可以将以下属性注释或删除掉：

3.博客上传：

完成了前两步，我们网站的总体框架就已经基本整理完了，接下来就到了我们的核心功能，博客上传。首先，我们需要在 blogs 目录下添加分类目录，框架可以根据分类目录名称进行自动分类，并生成对应的路由。

按时间划分子目录可以方便后续进行时间轴排序：

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

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

md 复制代码

---
title: 1小时搭建个人博客网站！快使用VuePress+Github Pages！
date: 2023/9/7
tags:
 - VuePress
 - GitHubPages
categories:
 - 前端
---

如果正确完成了上述的所有步骤，此时点击运行你应该收获到这样的首页：

但是这个时候当你兴冲冲地点开分类页面的时候，大概率会出现下面的情况：

为什么会这样呢？其实这是因为在默认路由配置中，分类的默认路由设置为 "/categories/reco/1/" ：

而此时我们的分类目录中并没有 reco 这个类型，导致了访问不到对应的路径，提示 Page does not exist ，因此这时候你需要将路径中的 reco 更改为 qianduan 或者 suibi （这里默认帮我们将分类的中文转换成了拼音）。

修改后的运行结果：

同样，需要将 Tags 的默认路径中的 tag1 改为 VuePress 或 GitHubPages

运行效果：

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

为什么用GitHub Pages?

完成了网站的搭建，接下来我们就可以进行网站的部署了，毕竟大家花时间做出来的个人博客肯定是想展示给别人看的嘛。这个时候如果有自己的服务器并且熟悉部署的朋友大可以直接部署到自己的服务器，这样做是最自由的。但如果大家和我一样暂时还没有买服务器又想白嫖的，这边我推荐大家可以部署到 GitHub Pages 上，不仅免费，操作还简单，又可以展示在你自己的 github 主页中，何乐而不为呢？

使用github快速部署

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

1.初始化仓库：

2.本地配置：

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

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

在最外层目录下创建脚本文件 deploy.sh ：

sh 复制代码

#!/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 的地址：