Skip to content

Vitepress网站搭建教程

pFjYf2j.png

准备

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

安装

vitepress官网地址:https://vitepress.dev/

创建项目

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

sh
pnpm add -D vitepress

初始化

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

sh
pnpm vitepress init

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

pFjleEQ.md.png

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

目录

初始化成功后,使用vscode或webstorm打开文件夹,会看到这些目录。以下是这些目录的含义

.
├─ docs                # 项目根目录
│  ├─ .vitepress
│  │  ├─ theme
│  │  │  └─ index.js   # 主题入口
│  │  └─ config.js     # 配置文件
│  └─ index.md         # 主页相关
└─ package.json

启动

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

sh
pnpm run docs:dev

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

pFjlN59.png

自定义

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

站点标题和图标

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

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

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

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

导航链接

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

js
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 代码

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

网站上线

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

sh
pnpm run docs:build

运行完成之后是这样子的

pFjl6Ve.png

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

pFjlf2t.md.png

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

上传到服务器

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

pFjYigs.png

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

pFjYeET.png

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

pFjYn5F.png

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

pFjYKC4.png

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

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