使用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. Josn序列化与反序列化

    using System.Web.Script.Serialization; /// <summary>        /// 序列化器        /// </summary&g ...

  2. Elasticsearch——分页查询From&Size VS scroll

    Elasticsearch中数据都存储在分片中,当执行搜索时每个分片独立搜索后,数据再经过整合返回.那么,如果要实现分页查询该怎么办呢? 更多内容参考Elasticsearch资料汇总 按照一般的查询 ...

  3. webapi的返回类型,webapi返回图片

    1.0 首先是返回常用的系统类型,当然这些返回方式不常用到.如:int,string,list,array等.这些类型直接返回即可. public List<string> Get() { ...

  4. Linq使用Group By 1

    Linq使用Group By 1 1.简单形式: var q = from p in db.Products group p by p.CategoryID into g select g; 语句描述 ...

  5. 【Eclipse】eclipse che 协作开发

    http://www.eclipse.org/che/ http://blog.csdn.net/ccfeng2008/article/details/50881024 http://www.osch ...

  6. Android 打包签名 从生成keystore到完成签名 -- 转

    首先,我们需要一个keystore,当然已经有了的话就不用这一步了:cmd下:进入到jdk的bin目录,这样的话,android.keystore文件就会生成在这个目录下,签名的时候我们需要这个文件C ...

  7. 对手机SD卡的一些操作

    首先要导入外包 log4j-1.2.16.jar 代码如下: package com.car273.util; import java.io.BufferedReader; import java.i ...

  8. Python安装coverage.py

    coverage.py是一个用来统计python程序代码覆盖率的工具.它使用起来非常简单,并且支持最终生成界面友好的html报告.在最新版本中,还提供了分支覆盖的功能. 官方网站: http://ne ...

  9. js架构设计模式——MVC,MVP 和 MVVM 的图示及简单明了的区别说明

    MVC,MVP 和 MVVM 的图示 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身很容易理 ...

  10. UVA-315 无向图求割点个数

    题意抽象: 给定一个无向图,输出割点个数. 割点定义:删除该点后,原图变为多个连通块. 考虑一下怎么利用tarjan判定割点: 对于点u和他相连的当时还未搜到的点v,dfs后如果DFN[u]<= ...