使用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的配置

配置文件

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

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

config.js导出一个js对象

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

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

导航栏

  • 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的图标,此时页面效果为

  • 右侧导航

我们可以在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文件以及外部链接

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

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' }
]
}
]
}

如果我们想要让下拉选项分组,即中间有条分割线,我们的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" },
],
},
],
},
]

此时效果为

配置社交链接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: "...",
},
],

侧边栏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",
},
],
},
],

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

页面展示效果如下

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

    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,只有点击博客才会出现侧边栏

配置可折叠侧边栏

配置可折叠侧边栏只需将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:
title: 这是一个手掌图标
details: good...
- icon: ️
title: 这是一个修理图标
details: cocococo
---

部署到GitHub Pages

既然要部署到GitHub Pages,你得先在github新建一个仓库,因为要用他的GitHub Pages,所以仓库命名为username.github.io的形式,username是你github的用户名。然后点击设置

选择pages

这里设置根目录/(root),当然也可以选择其它目录,点击保存,如果选择其它目录比如docs,config.js就需要配置一个base

export default {
base:'/docs/'
}

最后选择一个主题(这里不选择我发现站点不生效,后面把打包后的代码推上来即可,会默认加载index.html)

然后将打包后的dist下的文件推送到你的远程仓库。vitepress官网给我们提供了一个脚本文件deploy.sh,我们只需要改下远程仓库即可

#!/usr/bin/env sh

# 忽略错误
set -e # 构建
npm run docs:build # 进入待发布的目录
cd docs/.vitepress/dist # 如果是发布到自定义域名
# echo 'www.example.com' > CNAME git init
git add -A
git commit -m 'deploy' # 如果部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果是部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages cd -

直接执行这个脚本文件,我们的打包后的文件就会被推送到我们的仓库。然后我们就可以直接访问我们的静态博客站点了,比如我的这个示例博客东方小月.如果你想要自定义其它域名的话,可以创建一个组织然后在组织下新建仓库名为organization.github.io的形式(organization是你组织名)然后执行同样的操作即可。具体可以点这里创建 GitHub Pages 站点

最后代码已经推送到kittypage,需要的可以自行获取

创作不易,你的点赞就是我的动力!如果感觉这篇文章对你有帮助的话就请点个赞吧,谢谢谢!!orz

十分钟教会你如何使用VitePress搭建及部署个人博客站点的更多相关文章

  1. 使用wordpress搭建自己的独立博客

    最近想要搭建自己的私人博客, 各种百度,完整的搭建步骤如下! 首先得要有自己的vps或者云主机,我这里是自己的云主机,有自己的域名(我这边目前没有买域名)! 搭建步骤! 1,安装lnmp(linux+ ...

  2. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  3. Django1.8教程——从零开始搭建一个完整django博客(一)

    第一个Django项目将是一个完整的博客网站.它和我们博客园使用的博客别无二致,一样有分类.标签.归档.查询等功能.如果你对Django感兴趣的话,这是一个绝好的机会.该教程将和你一起,从零开始,搭建 ...

  4. 象写程序一样写博客:搭建基于github的博客

    象写程序一样写博客:搭建基于github的博客   前言 github 真是无所不能.其 Pages 功能 支持上传 html,并且在页面中显示.于是有好事者做了一个基于 github 的博客管理工具 ...

  5. 利用Github和Hexo搭建独立的个人博客--基础篇

    利用Github和Hexo搭建独立的个人博客--基础篇 摘要:本文主要参考了使用hexo和Github上创建自己的博客.如何搭建一个独立博客--简明Github Pages与Hexo教程和使用GitH ...

  6. 使用Hexo+Github搭建属于自己的博客(进阶)

    主题的配置:这里以NexT主题作为题材 1.安装NexT,在其文件夹中鼠标右键,点击Git Base Here.输入命令:git clone https://github.com/iissnan/he ...

  7. 使用Hexo+Github搭建属于自己的博客(基础)

    前言 hexo是一个台湾人做的基于Node.js的静态博客程序,优势是生成静态文件的速度非常快,支持markdown, 我最终选定它的原因是它速度快而且不容易出错,并且可以一键部署到github或者其 ...

  8. 使用Hexo搭建一个简单的博客(一)

    搭建好简洁的博客框架后,回看时发现,简洁之中透露着一丝丝简陋,好的,网上关于丰富hexo的文章也很多 记录一下自己的一些瞎操作. 在你的hexo目录下,你可以看到themes文件夹里有个默认的land ...

  9. 使用Hexo搭建一个简单的博客(二)

    昨天想着用Hexo和github搭一个自己简单的博客,记录一下自己踩过的坑,具体的流程就不重复了,主要参考了一下几篇文章 GitHub+Hexo 搭建个人网站详细教程 使用Hexo+Github一步步 ...

  10. Hexo+GitHub+Netlify一站式搭建属于自己的博客网站

    喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...

随机推荐

  1. 《Entity Framework 6 Recipes》中文翻译系列 (36) ------ 第六章 继承与建模高级应用之TPC继承映射

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 6-12  TPC继承映射建模 问题 你有两张或多张架构和数据类似的表,你想使用TP ...

  2. asp.net timer viewstate

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. HTTP图解

    本节内容 俗话说好的开发,底层知识必须过硬,不然再创新的技术,你也理解不深入,比如python web开发工程师,想要学习任何一个框架,底层都是http和socket,底层抓牢了,学起来会很轻松,所以 ...

  4. Saltstack系列4:Saltstack之Grains组件

    grains说明 grains是Saltstack最重要的组件之一,grains的作用是手机被控主机的基本信息,这些信息通常都是一些静态类的数据,包括CPU.内核.操作系统.虚拟化等,在服务器端可以根 ...

  5. Linux process state codes

    Here are the different values that the s, stat and state output specifiers (header "STAT" ...

  6. pyqt小例子 treewidget

    # -*- coding: cp936 -*- from PyQt4.QtCore import * from PyQt4.QtGui import * class InlineEditor(QWid ...

  7. C语言之原码、反码和补码

    原码.反码和补码 1).数据在内存中存储的时候都是以二进制的形式存储的. int num = 10; 原码.反码.补码都是二进制.只不过是二进制的不同的表现形式. 数据是以补码的二进制存储的. 2). ...

  8. iOS Quartz2D画图

    对于刚接触Quartz2D的同学来说,先了解 上下文 的概念,再从最基础的画线来具体体验Quartz2D的画图步骤 介绍Quart2D :是苹果官方的二维(平面)绘图引擎,同时支持iOS和macOS系 ...

  9. MongoDB基础之九 replication复制集

    准备工作:创建目录 mkdir -p /home/m17 //home/m18 /home/m19 /home/mlog 1:启动3个实例,且声明实例属于某复制集 # ./bin/mongod --d ...

  10. ROS(indigo)ROSPlan框架

    源码地址:https://github.com/KCL-Planning/ROSPlan/wiki ROSPlan框架 ROSPlan框架提供了用于在ROS的系统任务规划的通用方法.ROSPlan的两 ...