Vitepress网站搭建教程

准备

准备一台服务器用于网站上线
这里我推荐雨云，它是国内领先的具有自主知识产权的云计算平台，我的优惠码是yhj，用了有优惠！
本地电脑安装pnpm
本地电脑安装VSCode或webstorm

安装

创建项目

首先在桌面新建文件夹，打开cmd窗口，输入命令回车

pnpm add -D vitepress

初始化

在文件夹cmd窗口输入命令，开始初始化vitepress

pnpm vitepress init

如果没有特殊情况，可以按照我这样来选择

图片里面的“网站名称”和“网站描述”填写自己的网站信息，后续也可以改！
主题（Theme）我这里推荐选择第二个，可以看看官网的效果就是用的这个模板

启动

在cmd里面输入下面命令就可以运行vitepress了

pnpm run docs:dev

执行完后会输出网站地址，在浏览器打开即可

自定义

参考：https://vitepress.dev/zh/reference/default-theme-config

站点标题和图标

默认情况下，nav 显示 config.title 作为站点的标题。如果想更改导航栏上显示的内容，可以在 themeConfig.siteTitle 选项中定义自定义文本。

export default {
  themeConfig: {
    siteTitle: '网站名称'
  }
}

如果站点有图标，则可以通过传递图片路径来显示它。应该将图标直接放在 public 中，并赋值该绝对路径。

export default {
  themeConfig: {
    logo: '/my-logo.svg'
  }
}

导航链接

可以定义网站右上角的链接，需要在config.mjs里面配置

export default {
  themeConfig: {
    nav: [
      { text: '链接一', link: '/abc' },
      { text: '链接二', link: '/net' },
      { text: '链接三', link: 'https://github.com/...' }
    ]
  }
}

text 是 nav 中显示的实际文本，而 link 是单击文本时将导航到的链接。对于链接，将路径设置为不带 .md 后缀的实际文件，并且始终以 / 开头。

主页上面部分

这些内容位于主页顶部，可以直接在index.md里面改改内容

yaml

---
layout: home

hero:
  name: 网站标题
  text: 网站描述
  tagline: 网站描述 #标题下面的灰色文本
  image:
    src: /logo.png #这里可以添加图片，在主页右侧显示
  actions:
    - theme: brand
      text: 按钮一
      link: /qiez  #这里可以跳转到内部链接，可以是文章
    - theme: alt
      text: 按钮二
      link: https://github.com/vuejs/vitepress #跳转到外部链接
---

主页下面部分

主页的这些部分都是可以更改的
里面的icon图标都是可以自定义，替换成表情或者图片，vitepress默认是没有icon的，所以你需要手动添加或直接复制我下面的代码
在每个板块中也可以添加link，可以点击跳转到链接

yaml


features:
  - icon: 🛠️     
    title: 板块一 
    details: 板块介绍 
    link: /qiez  
  - icon:
      dark: /dark-feature-icon.svg  #图标可以自定义，这里是替换深色主题下的图标
      light: /light-feature-icon.svg  #这里就是浅色下的图标
    title: 板块二 
    details: 板块介绍 
    link:  https://github.com/vuejs/vitepress

---

页脚

如果你想在底部添加版权信息，只要找到config.mjs文件，然后在export default themeConfig 里面添加 footer 代码

export default {
  themeConfig: {
    footer: {
      copyright: 'Copyright © 2019-present Evan You' #这个位置编辑你的版权信息即可
    }
  }
}

网站上线

准备好服务器或者主机，我们开始操作！首先在本地cmd窗口输入命令，build 生成一个静态网站

pnpm run docs:build

运行完成之后是这样子的

然后在 .vitepress 目录会生成一个 dist 文件夹

打开就会发现熟悉的 html 文件，压缩文件后就可以到服务器上传啦！

上传到服务器

首先在雨云购买一台服务器，我这里拿美国二区的KVM入门版来演示，注册雨云使用我的优惠码 yhj 可以享受5折优惠

雨云支持一键安装宝塔面板，特别方便，然后打开面板

直接点击控制台的宝塔面板按钮，会弹出账号密码，即可进入

然后添加网站，php版本选择纯静态，输入自己的域名

然后在网站文件里面上传压缩好的dist文件即可，访问域名就可以查看效果了

--
原创文章，转载请标明来源

Vitepress网站搭建教程 ​

准备 ​

安装 ​

创建项目 ​

初始化 ​

目录 ​

启动 ​

自定义 ​

站点标题和图标 ​

导航链接 ​

主页上面部分 ​

主页下面部分 ​

页脚 ​

网站上线 ​

上传到服务器 ​