十分钟教会你如何使用VitePress搭建及部署个人博客站点

Posted 东方小月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了十分钟教会你如何使用VitePress搭建及部署个人博客站点相关的知识,希望对你有一定的参考价值。

使用VitePress可以让我们快速搭建一个静态博客网站,这篇文章将带领大家搭建一个基于VitePress的静态博客网站并且部署到GitHub Pages(github提供的静态网页服务)

快速上手

  • 新建目录并初始化(我的目录名为kittydocs)

这里我们使用pnpm式,当然yarn,npm都是可以的,如果你没有安装pnpm可以全局安装

npm i pnpm -g

然后初始化

pnpm init
  • 安装vitepress
pnpm i vitepress
  • package.json添加script
 "scripts": 
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"

这三个脚本分别代表启动本地文档服务,打包文档,启动打包后(dist)服务

  • 创建文档 文档放在docs目录下,新建docs/index.md
## hello juejin

此时我们的文件结构为

.
├─ docs
│ └─ index.md
└─ package.json
  • 启动本地服务文档站点
pnpm run docs:dev

此时便会启动一个http://localhost:3000/ 的服务,默认加载docs/index.md

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vue

到这里一个简单的站点就完成了,当然这肯定是不够的,接下来我们看vitepress的配置

配置文件

在docs目录下创建一个 ​​.vuepress​​目录,如下结构

.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ └─ index.md
└─ package.json

config.js导出一个js对象

export default 
title: kittyui, //站点标题
description: 一个vue3组件库,//mate标签description,多用于搜索引擎抓取摘要

此时我们重启服务便可看到

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vue_02

导航栏

  • title和logo

首先看一下title和logo的配置

export default 
themeConfig:
siteTitle: "Kitty",
logo: "/logo.png",
,
;

其中logo的地址对应的是public下的图片,目录结构如下所示

.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ public
│ │ └─ logo.png
│ └─ index.md
└─ package.json

这里logo我是用了vue的图标,此时页面效果为

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vue_03

  • 右侧导航

我们可以在themeConfig.nav配置右侧导航,并且点击可以跳转我们指定页面。

  themeConfig: 
siteTitle: "Kitty",
logo: "/logo.png",
nav: [
text: "Guide", link: "/guide/" ,
text: "GuideTest", link: "/guide/test" ,
text: "gitee", link: "https://gitee.com/geeksdidi" ,
],

同时我们在docs下新建guide/index.md和test.md

# guild
# test

此时我们页面即可展示我们打nva并且支持了跳转本地markdown文件以及外部链接

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vitepress_04

我们还可以这样嵌套配置,使得导航栏出现下拉选项

themeConfig: 
siteTitle: "Kitty",
logo: "/logo.png",
nav: [
text: "Guide", link: "/guide/" ,
text: "GuideTest", link: "/guide/test" ,
text: "gitee", link: "https://gitee.com/geeksdidi" ,

text: "Drop Menu",
items: [
text: Item A, link: /item-1 ,
text: Item B, link: /item-2 ,
text: Item C, link: /item-3
]

]

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vue_05

如果我们想要让下拉选项分组,即中间有条分割线,我们的nav可以这样写

 nav: [
text: "Guide", link: "/guide/" ,
text: "GuideTest", link: "/guide/test" ,
text: "gitee", link: "https://gitee.com/geeksdidi" ,

text: "Drop Menu",
items: [

items: [
text: "Item A1", link: "/item-A1" ,
text: "Item A2", link: "/item-A2" ,
],
,

items: [
text: "Item B1", link: "/item-B1" ,
text: "Item B2", link: "/item-B2" ,
],
,
],
,
]

此时效果为

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vue_06

配置社交链接socialLinks

使用themeConfig.socialLinks可以配置我们的社交链接,目前支持的有

type SocialLinkIcon =
| discord
| facebook
| github
| instagram
| linkedin
| slack
| twitter
| youtube
| svg: string

,配置如下

socialLinks: [
icon: "github", link: "https://gitee.com/geeksdidi" ,
icon: "twitter", link: "..." ,
// You can also add custom icons by passing SVG as string:

icon:
svg: <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>,
,
link: "...",
,
],

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vitepress_07

侧边栏Sidebar

侧边栏可以在themeConfig.Sidebar中配置,其实和nav配置差不多

    sidebar: [

text: "组件库源码实现",
items: [

text: "组件库环境搭建",
link: "/articles/组件库环境搭建",
,
text: "gulp的使用", link: "/articles/gulp的使用" ,
],
,

text: "vue教程",
items: [

text: "pina和vuex",
link: "/articles/pina和vuex",
,
],
,
],

这里我搬运了我掘金上的一些文章放了进去,目录结构如下图

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vitepress_08

页面展示效果如下

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vitepress_09

不过我们一般不会使用这种方式配置侧边栏,因为这样每个页面都会有侧边栏。我们需要做到仅某些页面才会出现侧边栏。所以我们可以这样配置

    sidebar: 
"/articles/": [

text: "组件库源码实现",
items: [

text: "组件库环境搭建",
link: "/articles/组件库环境搭建",
,
text: "gulp的使用", link: "/articles/gulp的使用" ,
],
,

text: "vue教程",
items: [

text: "pina和vuex",
link: "/articles/pina和vuex",
,
],
,
],
,

sideBar值改成一个对象,对象的key是一个路径,只有包含这个路径的才会出现侧边栏。所以我们将nav的配置中的guild改成博客,同时路径指向我们的articles下的markdown文件

nav: [
text: "博客", link: "/articles/组件库环境搭建" ,
]

此时你会发现进入首页并不会出现sideBar,只有点击博客才会出现侧边栏

十分钟教会你如何使用VitePress搭建及部署个人博客站点_vitepress_10

配置可折叠侧边栏

配置可折叠侧边栏只需将​​collapsible​​设置为​​true​​即可,默认初始页面是全部展开页面,如果你需要关闭状态只需要将​​collapsed​​设置为​​true​

...

text: "vue教程",
collapsible: true,
collapsed:true,
items: [

text: "pina和vuex",
link: "/articles/pina和vuex",
,
],
,
...

首页布局

首页就是进入我们博客会加载docs/index.md,所以我们需要对其进行一个美化,我们VitePress默认主题提供了一个主页布局

---
layout: home

hero:
name: 东方小月的博客
text: 随便写点啥.
tagline: 帅气又迷人的小月
image:
src: /logo.png
alt: Kitty
actions:
- theme: brand
text: 快来快来
link: /articles/组件库环境搭建
- theme: alt
text: View on Gitee
link: https://gitee.com/geeksdidi

features:
- icon: ⚡️
title: 这是一个闪电图标
details: wawawa
- icon:

以上是关于十分钟教会你如何使用VitePress搭建及部署个人博客站点的主要内容,如果未能解决你的问题,请参考以下文章

表炸了怎么搞?5分钟教会你搭建分布式MySQL集群

10分钟教会你如何在BSC发主链智能合约

三分钟教会你Python数据分析—数据导入,小白基础入门必看内容

使用Vitepress搭建文档网站

一篇教会你如何搭建SpringBoot项目

一篇教会你如何搭建SpringBoot项目