当前位置：网站首页>Ten minutes to teach you how to use VitePress to build and deploy a personal blog site

Ten minutes to teach you how to use VitePress to build and deploy a personal blog site

2022-08-09 13:15:00 【51CTO】

使用VitePressIt allows us to quickly build a static blog site,This article will lead you to build a foundationVitePressstatic blog site and deploy to GitHub Pages(githubServing static web pages)

快速上手

新建目录并初始化(My directory is named kittydocs)

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

       
       npm i pnpm -g
      
1.

然后初始化

       
       pnpm init
      
1.

安装vitepress

       
       pnpm i vitepress
      
1.

package.json添加script

       
        "scripts": {
       
    "docs:dev": "vitepress dev docs",
       
    "docs:build": "vitepress build docs",
       
    "docs:serve": "vitepress serve docs"
       
  }
      
1.
2.
3.
4.
5.

These three scripts respectively represent starting the local document service,打包文档,After starting the package（dist）服务

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

       
       ## hello juejin
      
1.

At this point our file structure is

       
       .
       
├─ docs 
       
│  └─ index.md
       
└─ package.json
      
1.
2.
3.
4.

Start the local service documentation site

       
       pnpm run docs:dev
      
1.

One will be activated at this pointhttp://localhost:3000/ 的服务,默认加载docs/index.md

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vue

A simple site here is done,当然这肯定是不够的,接下来我们看vitepress的配置

配置文件

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

       
       .
       
├─ docs
       
│  ├─ .vitepress
       
│  │  └─ config.js
       
│  └─ index.md
       
└─ package.json
      
1.
2.
3.
4.
5.
6.

config.js导出一个js对象

       
       export default {
       
    title: 'kittyui', //站点标题
       
    description: '一个vue3组件库',//mate标签description,Mostly used for search engines to crawl summaries
       
  }
      
1.
2.
3.
4.

At this point we restart the service to see it

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vitepress_02

导航栏

title和logo

首先看一下title和logo的配置

       
       export default {
       
  themeConfig: {
       
    siteTitle: "Kitty",
       
    logo: "/logo.png",
       
  },
       
};
       
1.
2.
3.
4.
5.
6.

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

       
       .
       
├─ docs
       
│  ├─ .vitepress
       
│  │  └─ config.js
       
│  ├─ public
       
│  │   └─ logo.png
       
│  └─ index.md
       
└─ package.json
      
1.
2.
3.
4.
5.
6.
7.
8.

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

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vitepress_03

右侧导航

我们可以在themeConfig.navConfigure the right navigation,And click to jump to our designated page.

       
         themeConfig: {
       
    siteTitle: "Kitty",
       
    logo: "/logo.png",
       
    nav: [
       
      { text: "Guide", link: "/guide/" },
       
      { text: "GuideTest", link: "/guide/test" },
       
      { text: "gitee", link: "https://gitee.com/geeksdidi" },
       
    ],
       
  }
       
1.
2.
3.
4.
5.
6.
7.
8.
9.

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

       
       # guild
      
1.

At this point, our page can show us playingnvaAnd supports jump localmarkdowndocuments and external links

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vue_04

We can also nest configurations like this,Makes a drop-down option appear in the navigation bar

       
       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' }
       
        ]
       
      }
       
    ]
       
  }
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vue_05

If we want to have dropdown options grouped,That is, there is a dividing line in the middle,我们的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" },
       
            ],
       
          },
       
        ],
       
      },
       
    ]
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

此时效果为

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vue_06

Configure social linkssocialLinks

使用themeConfig.socialLinksOur social links can be configured,目前支持的有

       
       type SocialLinkIcon =
       
  | 'discord'
       
  | 'facebook'
       
  | 'github'
       
  | 'instagram'
       
  | 'linkedin'
       
  | 'slack'
       
  | 'twitter'
       
  | 'youtube'
       
  | { svg: string }
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

,配置如下

       
       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: "...",
       
      },
       
    ],
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vue_07

侧边栏Sidebar

The sidebar can be found in themeConfig.Sidebar中配置,其实和nav配置差不多

       
           sidebar: [
       
      {
       
        text: "Component library source code implementation",
       
        items: [
       
          {
       
            text: "The component library environment is built",
       
            link: "/articles/The component library environment is built",
       
          },
       
          { text: "gulp的使用", link: "/articles/gulp的使用" },
       
        ],
       
      },
       
      {
       
        text: "vue教程",
       
        items: [
       
          {
       
            text: "pina和vuex",
       
            link: "/articles/pina和vuex",
       
          },
       
        ],
       
      },
       
    ],
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

Here I have carried some articles from my Nuggets and put them in,目录结构如下图

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vue_08

页面展示效果如下

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vitepress_09

However, we generally do not configure sidebars in this way,Because then every page will have a sidebar.We need to make the sidebar appear only for certain pages.所以我们可以这样配置

       
           sidebar: {
       
      "/articles/": [
       
        {
       
          text: "Component library source code implementation",
       
          items: [
       
            {
       
              text: "The component library environment is built",
       
              link: "/articles/The component library environment is built",
       
            },
       
            { text: "gulp的使用", link: "/articles/gulp的使用" },
       
          ],
       
        },
       
        {
       
          text: "vue教程",
       
          items: [
       
            {
       
              text: "pina和vuex",
       
              link: "/articles/pina和vuex",
       
            },
       
          ],
       
        },
       
      ],
       
    },
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

sideBarvalue to an object,对象的key是一个路径,The sidebar will only appear if this path is included.所以我们将nav的配置中的guildchange to blog,At the same time the path points to oursarticles下的markdown文件

       
       nav: [
       
      { text: "博客", link: "/articles/The component library environment is built" },
       
     ]
      
1.
2.
3.

At this point you will find that entering the home page does not appearsideBar,The sidebar will only appear if you click on the blog

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vue_10

Configure a collapsible sidebar

To configure a collapsible sidebar simply add collapsible设置为true即可,The default initial page is the Expand All page,If you need to close the state just put itcollapsed设置为true

       
       ...
       
        {
       
          text: "vue教程",
       
          collapsible: true,
       
          collapsed:true,
       
          items: [
       
            {
       
              text: "pina和vuex",
       
              link: "/articles/pina和vuex",
       
            },
       
          ],
       
        },
       
...
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

首页布局

The home page is to enter our blog and it will loaddocs/index.md,So we need to beautify it,我们VitePressThe default theme provides a home page layout

       
       ---
       
layout: home
       
hero:
       
  name: Touhou Satsuki's blog
       
  text: 随便写点啥.
       
  tagline: Handsome and charming little moon
       
  image:
       
    src: /logo.png
       
    alt: Kitty
       
  actions:
       
    - theme: brand
       
      text: 快来快来
       
      link: /articles/The component library environment is built
       
    - theme: alt
       
      text: View on Gitee
       
      link: https://gitee.com/geeksdidi
       
features:
       
  - icon: ️
       
    title: This is a lightning bolt icon
       
    details: wawawa
       
  - icon: 
       
    title: This is a palm icon
       
    details: good...
       
  - icon: ️
       
    title: This is a repair icon
       
    details: cocococo
       
---
       
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vitepress_11

部署到GitHub Pages

既然要部署到GitHub Pages,你得先在github新建一个仓库,because he will be usedGitHub Pages,So the repository is named username.github.io的形式,username是你github的用户名.然后点击设置

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vue_12

选择pages

Ten minutes to teach you how to use itVitePressBuild and deploy personal blog sites_vue_13

Set the root directory here/(root),Of course, other directories can also be selected,点击保存,If you choose another directory egdocs,config.js就需要配置一个base

       
       export default {
       
    base:'/docs/'
       
  }
      
1.
2.
3.

Finally choose a topic(Do not select here I found that the site does not work,The packaged code can be pushed up later,会默认加载index.html)

然后将打包后的distPush the files below to your remote repository.vitepressThe official website provides us with a script filedeploy.sh,We just need to change the remote repository

       
       #!/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 [email protected]:<USERNAME>/<USERNAME>.github.io.git master
       
# 如果是部署到 https://<USERNAME>.github.io/<REPO>
       
# git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages
       
cd -
       
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

Execute this script file directly,Our packaged files will be pushed to our repository.Then we can directly access our static blog site,Like this example blog of mine 东方小月.If you want to customize other domain names,You can create an organization and then create a new repository named under the organizationorganization.github.io的形式(organizationis your organization name)Then do the same thing.Details can be clicked here 创建 GitHub Pages 站点

The final code has been pushed to kittypage,需要的可以自行获取