搭建个人博客（三❤ vue3推荐方式VitePress + Github Pages 搭建）
前言： 这里将介绍作为一个国内开发者，采取的最推荐的vitepress（vue3推荐方式）的方式进行搭建，这也是当下最流行的方式哦！ 先来看看vitepress官网给我们的链接： https://vitepress.dev
目录结构
在需要的部分加入[[toc]]即可
- 效果
1、认识和介绍vitepress
VitePress 由 Vite 和 Vue 驱动的静态站点生成器 简单、强大、快速。就是你想要的现代 SSG 框架！ 我们只需要写markdown文档就可以生成好看的博客文章，或者说，你直接写就成为了你的博客文章！ 目前官网给我们推荐的方式有以下这几种： 
这里我就直接采取了yarn的方式进行构建，下面是我的版本号：
jsnode v20.11.02、vitepress搭建和运行
接下来就开始搭建咋们的个人博客 👉 新建一个空白文件夹Nexusnote cmd打开文件夹开始构建我们的博客
jsyarn init // 初始化
yarn add -D vitepress //添加vitepress
yarn vitepress init // 用vitepress初始化项目 ，直接一直按
yarn docs:dev //运行这个时候直接浏览器访问http://localhost:5173/就可以了！ ok，一个基础的博客已近搭建完了，试了试，前后不过三分钟 
看看我们的文档结构： 
3、vitepress博客配置
👉 配置懒加载MD文件和图片
- 在
config.mts文件之中配置：
import { defineConfig } from 'vitepress'
export default defineConfig({
title: "林太白",
description: "A VitePress Site",
markdown: {
// 启用懒加载
lazyLoading: true
},
imgage: {
// 启用懒加载
lazyLoading: true
},
})4、vitepress博客设置
配置好了以后，接下来就开始设置砸门自己的博客了
👉设置浏览器标题和博客标题
我的是选择的ts版本的，位于.vitepress=> config.mts 文件里面： 
👉设置网站logo
在根目录下面新建一个public=> logo.svg config.mts之中修改themeConfig
jsthemeConfig: {
logo: '/logo.svg',
}这样子就可以设置为我们自己部分的LOGO
👉设置网站标题
- 网站标题可以单独设置
js themeConfig: {
siteTitle:'♥',
}
- 隐藏站点标题
siteTitle设置为false即可
jsexport default {
themeConfig: {
logo: '/my-logo.svg',
siteTitle: false
}
}👉设置导航栏
在themeConfig.nav 更改导航栏。 其中 text 是 nav 中显示文本，而 link 是单击文本时的链接。对于链接，将路径设置为不带 .md 后缀的实际文件，并且始终以 / 开头。 导航链接可以是下拉菜单。只需要替换 link 选项，设置 items 数组。
js
export default {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: '掘金链接', link: 'https://juejin.cn/user/1874034273300919' },
{ text: 'Github', link: 'https://github.com/NexusLin' },
{ text: 'About Me', items: [ { text: '介绍和技术栈', link: '/item-1' }, { text: '文章', link: '/item-2' }, { text: '其他', link: '/item-3' } ] }
],
}
}
👉设置右侧链接
设置themeConfig=> socialLinks
jssocialLinks: [
{ icon: 'github', link: 'https://github.com/NexusLin'}
],
👉开启搜索项
设置themeConfig=> socialLinks
jssearch: {
provider: "local",
},
👉设置页脚
设置themeConfig=> footer
js footer: {
message: "Released under the MIT License.",
copyright: "Copyright ©林太白",
},
👉设置主页
接下来我们根目录下面的index.md文件里面
🍎首页的部分设置也非常简单，按照着设置一一对应就可以
分别是标题，描述，下面的按钮，以及再下面的描述部分 这里有一个图形是关于我们设置这部分，具体不知道哪里来的，但是非常好 
设置主页以后我们的部分就变成了 
🍎 也可以添加链接和图片
js- title: Api
details: Api
icon:
src: /logo.svg
link: /api-examples🍎 自己在主页再添加markdown文本
👉配置一个新页面
根目录下新建一个TGapi.md文档，然后再index.md之中配置一下
js
在主页index.md=> hero=> actions
actions:
- theme: alt
text: API Examples
link: /TGapi👉左侧侧边栏配置
在config.mts之中themeConfig=> sidebar 配置左侧的侧边栏部分
js sidebar: [
{
text: 'TGapi文档',
items: [
{ text: 'TGapi登陆注册', link: '/item-a' },
{ text: 'Item B', link: '/item-b' },
]
},
{
text: 'Examples',
items: [
{ text: 'Markdown Examples', link: '/markdown-examples' },
{ text: 'Runtime API Examples', link: '/api-examples' }
]
}
]也就是点击进去的这部分 
🍎 左侧侧边栏折叠
在config.mts之中themeConfig=> sidebar 配置左侧的侧边栏部分=> 设置collapsed:true, 就可以成功折叠展开
js {
collapsed: false,
text: 'TGapi文档',
items: [
{ text: 'TGapi登陆注册', link: '/item-a' },
{ text: 'Item B', link: '/item-b' },
]
},
👉右侧侧边栏其实就是我们文章的标题
On this page 右侧一直显示一个是官方默认给我们的，其他都是我们自己的
jsOn this page
👉设置不同风格和颜色的描述
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::- 效果
INFO
This is an info box.
TIP
This is a tip.
WARNING
This is a warning.
DANGER
This is a dangerous warning.
Details
This is a details block.
👉设置右侧三级标题
在文档的最上面加入这么一行可以展示我们是否展开其中的标题
---
outline: deep
---也可以展示控制展开的等级
outline: [1,3]5、新建vue页面和自定义vue页面
👉新建一个页面Hello.vue,在根目录下面存一个Hello.vue文件
然后在主页之中直接引入连接
js<script setup>
import Hello from './Hello.vue'
</script>
# Docs
This is a .md using a custom component
<Hello />Hello.md内容如下：
js<template>
<div class="pagehello">我是vue页面</div>
</template>
<style>
.pagehello{
width: 400x;
height: 400px;
background: cadetblue;
color: #fff;
}
</style>然后我们看看效果 
看到这个操作vue文件。岂不是意味着我们可以随便定义我们的网站吗
6、自定义主题
vitepress也支持我们自定义自己的主题，接下来我们就自定义一下自己的主题然后看看 在.vitepress=> theme => index.ts 在这个里面不仅可以放我们的样式，同时也可以引入我们的组件，vitepress也推荐这种方式
jsimport DefaultTheme from 'vitepress/theme'
// import Foo from '../../views/Echarts.vue'
import './tg.css'
export default {
extends: DefaultTheme,
enhanceApp({ app }) {
// app.component('foo', Foo)
}
}theme/tg.css (天工开源的缩写)进行样式代码编写
js/* 该文件配置网站的文字 图标 等等 一系列dom元素的样式文件 */
:root {
/* 通过配置 自定义颜色 */
--vp-home-hero-name-color: transparent;
/* 主页标题文字的颜色 */
--vp-home-hero-name-background: -webkit-linear-gradient(-45deg, #47caff 50%, #5468ff 50%);;
/* 主页左侧背景添加渐变光圈 */
--vp-home-hero-image-background-image: linear-gradient(135deg, #5468ff 10%, #47caff 50%);
--vp-home-hero-image-filter: blur(100px);
/* botton按钮 */
/* --vp-button-brand-border: #81634b; */
/* 按钮文本颜色 */
--vp-button-brand-text: #ffffff;
/* 按钮背景颜色 */
--vp-button-brand-bg: #5468ff;
/*#00FFEE*/
/* 鼠标悬停的效果之后的样式 */
--vp-button-brand-hover-border: #bd34fe;
--vp-button-brand-hover-text: #fff;
--vp-button-brand-hover-bg: #bd34fe;
--vp-button-brand-active-border: #bd34fe;
/* 主题基色 */
--vp-c-brand: #bd34fe;
/* 白色模式 主题基色 */
--vp-c-brand-light: #bd34fe;
/* 黑色模式 主题基色 */
--vp-c-brand-dark: #bd34fe;
}然后看看我们自己自定义的颜色 
7、项目部署和发布为静态资源
我们的vitepress搭建好了以后肯定是想让更多人看到的，这个时候我们就需要把自己的项目打包成静态资源便于让更多的人去访问。
接下来我们就打包一下我们的项目，然后把我们的项目进行一下部署，以方便更多的人进行访问和查看。
（1）打包项目
首先我们打开终端，然后进入到我们的项目目录下，然后执行以下命令：
yarn docs:build执行完这个命令以后，我们的项目就会自动打包，这个时候我们可以看到一个状态,这个就表示我们正在打包的过程之中。
vitepress v1.3.3
| building client + server bundles...打包完成以后，我们就可以在项目根目录下看到一个docs/.vitepress/dist的文件夹，这个文件夹就是我们的打包好的静态资源。
（2）预览
我们也可以使用下面的命令进行预览界面：
yarn docs:preview（3）发布Github
👉设置自己的根目录为github项目名称
在配置部分要把base 配置为自己的仓库名，不然发布到github上会找不到资源。比如我的仓库名是NexusNote，那么base就配置为'/NexusNote/'
base:'/NexusNote/',报错以及处理
👉 死链接报错
x Build failed in 16.70s
✖ building client + server bundles...
build error:
[vitepress] 1 dead link(s) found.
[vitepress] 1 dead link(s) found.
at Object.renderStart (file:///E:/LTB/NexusNote/node_modules/vitepress/dist/node/serve-lJPQ9bCN.js:42591:15)
at file:///E:/LTB/NexusNote/node_modules/rollup/dist/es/shared/node-entry.js:19913:40
at async Promise.all (index 0)
at async PluginDriver.hookParallel (file:///E:/LTB/NexusNote/node_modules/rollup/dist/es/shared/node-entry.js:19841:9)
at async Bundle.generate (file:///E:/LTB/NexusNote/node_modules/rollup/dist/es/shared/node-entry.js:18264:13)
at async file:///E:/LTB/NexusNote/node_modules/rollup/dist/es/shared/node-entry.js:20832:27
at async catchUnfinishedHookActions (file:///E:/LTB/NexusNote/node_modules/rollup/dist/es/shared/node-entry.js:20258:16)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS E:\LTB\NexusNote>然后我排查了一下大概是 node13 篇文章里面有问题
在文章里面写了这么一个链接,是一种死链接的方式，但是这个链接其实并不存在！！更改掉就可以了！
[http://localhost:8888/public/index.html](http://localhost:8888/public/index.html)