利用VitePress部署静态网站

最新推荐文章于 2024-06-11 08:03:54 发布
最新推荐文章于 2024-06-11 08:03:54 发布
阅读量1.4k 收藏 3
点赞数 2
文章标签： Vite vitepress vue 静态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55697693/article/details/131626529
版权

前言

之前看到过很多这样的静态网站，基于Markdown格式，风格基本统一，而且这种网站非常常见，例如：

例如，以下的几个网址：

当时好奇这种网站是怎么生成的，但是没有深究。
今天了解到了Vue生态链中有一个叫做静态站点生成工具——VuePress和VitePress。
于是来认真学习一下Vue的静态站点生成工具。

VuePress与VitePress

VuePress和VitePress都是基于Markdown和Vue的静态网站生成工具。
VuePress1.x 基于 Vue 2 和 webpack。
而VitePress 是 VuePress 的精神继承者，借助 Vue 3 和 Vite，VitePress 提供了明显更好的 DX、更好的生产性能、更精致的默认主题以及更灵活的定制 API。
目前VuePress2.x 正在Beta阶段，支持Vue3和Vite。
VitePress 和 VuePress 之间的 API 差异主要在于主题和定制。如果您使用带有默认主题的 VuePress 1，那么迁移到 VitePress 应该相对简单。
鉴于Vue3会是以后的主流，而且Vue2也 将于 2023 年 12 月 31 日停止维护，因此Vue官方推荐使用VitePress。
毕竟VitePress目前处于初期，一些插件、主题等自定义配置没有VuePress丰富(毕竟现在的Vite在占用率照着webpack还有一定的差距。)
VuePress和VitePress的原理与使用方式都是相同的，会了其中一个，另一个自然也就会了

介绍

官网VitePress | Vite & Vue Powered Static Site Generator
VitePress是Vue团队中一位外国人负责开发的，因此官网没有中文文档，但是有一个翻译过来的网站VitePress中文官网
介绍一下Vite，VitePress就是将你的Markdown文档生成HTML页面，同时还可以通过主题的方式，对生成的页面样式做个性化设置。使得你只需要专注于书写MarkDown文本就好了，无需过多的关注构建的过程

基本使用

  1. 安装开发依赖
npm install -D vitepress
  1. 在项目根目录创建docs/目录，创建一个index.md文档，编写内容。
# 测试文本
## 这是二级标题
[这是一个链接](http://baidu.com)
  1. 在package.json中注册VitePress的运行脚本
{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  ...
}
  1. 运行命令，构建项目
npm run docs:dev

项目会在本地启动，预览即可。

这样，VitePress的基本使用就完成了。

原理和配置

原理

VitePress会以项目下的docs目录作为服务器根目录，你只需要将你自己的MarkDown文档放在docs目录下
docs的项目结构

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ examples-test.md
│  ├─ examples.md
│  └─ index.md

项目启动后，会在docs目录下生成一个.vitepress的目录，此目录用来存放VitePress相关的配置文件

VitePress会将docs下的所有的markdown文档编译成html文件，这个HTML文件的路径与markdown文档同级目录下(逻辑上的原理，真实并不会让你看到生成的HTML文件)
因此，docs目录作为VitePress的根目录，docs下有一个index.md，就会被编译成index.html，我们只需要访问根路径/就可以访问到index.html;
有一个文档docs/pages/api.md，那么我们只需要访问/pages/api/就可以访问到这个页面。

配置

在.vitepress目录下，新建一个config.js，作为VitePress的配置文件。
该文件导出一个JS对象。

export default {
	title:' 这是刘明凯的网站',
    description: '刘明凯是一个大厦比',
}

关于有哪些配置，可以看官网——站点配置和API，说几个常用的配置项：

配置项说明
title网站的标题，即浏览器标签页上的文本
description网站的描述信息，用来做SEO优化
lang站点的语言类型

主题配置

主题配置就是对站点的页面样式做出配置。
所有的主题配置，都写在config.js中的themeConfig节点下

export default {
	title: '这是我的网站',
	description:'测试VitePress网站',
	themeConfig:{
		// ....
	}
}

导航

就是网站的这一部分，看一下网站的导航怎么配置。

在config.js中，nav属性是一个数组，数组中的每个元素就是一个导航项。

export default {
    title:' 这是刘明凯的网站',
    description: '刘明凯是一个大厦比',
    themeConfig: {
        nav: [
            { text: 'item-1', link: '/start'},
            { text: 'itme-2', link: '/Pinia'},
            { text: 'itme-3', link: '/test/abc'},
        ]
    }
}

下拉框样式


导航链接也可以是下拉菜单。为此，请在链接选项上设置items键。

export default {
    title:' 这是刘明凯的网站',
    description: '刘明凯是一个大厦比',
    themeConfig: {
        nav: [
            { text: 'item-1', link: '/start'},
            { text: 'itme-2', link: '/Pinia'},
            { 
                text: 'itme-3', 
                items: [
                    { text: 'item-3-1', link: '/item3/1'},
                    { text: 'item-3-2', link: '/item3/2'},
                    { text: 'item-3-3', link: '/item3/3'},
                    { text: 'item-3-4', link: '/item3/4'}
                ]
            },
        ]
    }
}

在下拉框中，也是支持分组的，只需要继续嵌套items就好了

export default {
    title: ' 这是刘明凯的网站',
    description: '刘明凯是一个大厦比',
    themeConfig: {
        nav: [
            { text: 'item-1', link: '/start' },
            { text: 'itme-2', link: '/Pinia' },
            {
                text: 'itme-3',
                items: [
                    {
                        text: 'item-3-A',
                        items: [
                            { text: 'section-A-1', link: '/test/sectionA-1' },
                            { text: 'section-A-2', link: '/test/sectionA-2' },
                            { text: 'section-A-3', link: '/test/sectionA-3' },
                        ]
                    },
                    { 
                        text: 'item-3-B', 
                        items: [
                            {text: 'section-B-1', link: '/test/setctionB-1'},
                            {text: 'section-B-2', link: '/test/setctionB-2'},
                            {text: 'section-B-3', link: '/test/setctionB-3'},
                        ]
                    },
                    { text: 'item-3-3', link: '/item3/3' },
                    { text: 'item-3-4', link: '/item3/4' }
                ]
            },
        ]
    }
}

友情链接

VitePress中内置了一些网站的icon，可以直接用，没有内置的，你自己找个logo就好了。

关于内置了哪些logo?

export default {
    title: ' 这是刘明凯的网站',
    description: '刘明凯是一个大厦比',
    themeConfig: {
        nav: [],
        socialLinks: [
            { icon: 'github', link: 'https://github.com/LMKKK' },
            { icon: 'youtube', link: 'http://baidu.com' },
            { icon: 'twitter', link: 'http://baidu.com'},
            // 自定义图标
            { 
                icon: {
                    svg: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M777.514667 131.669333a53.333333 53.333333 0 0 1 0 75.434667L728.746667 255.829333h49.92A160 160 0 0 1 938.666667 415.872v320a160 160 0 0 1-160 160H245.333333A160 160 0 0 1 85.333333 735.872v-320a160 160 0 0 1 160-160h49.749334L246.4 207.146667a53.333333 53.333333 0 1 1 75.392-75.434667l113.152 113.152c3.370667 3.370667 6.186667 7.04 8.448 10.965333h137.088c2.261333-3.925333 5.12-7.68 8.490667-11.008l113.109333-113.152a53.333333 53.333333 0 0 1 75.434667 0z m1.152 231.253334H245.333333a53.333333 53.333333 0 0 0-53.205333 49.365333l-0.128 4.010667v320c0 28.117333 21.76 51.157333 49.365333 53.162666l3.968 0.170667h533.333334a53.333333 53.333333 0 0 0 53.205333-49.365333l0.128-3.968v-320c0-29.44-23.893333-53.333333-53.333333-53.333334z m-426.666667 106.666666c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z m320 0c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z" fill="#fb7299"></path></svg>',
                },
                link: 'https://space.bilibili.com/2071205694',
				// ariaLabel 提示文本, 可选的
                ariaLabel: '我的bilibili'
            }
        ]
    }
}

侧边栏

与导航栏的配置相同

export default {
    title: ' 这是刘明凯的网站',
    description: '刘明凯是一个大厦比',
    themeConfig: {
        nav: [],
        socialLinks: [],
        sidebar: [
            {text: 'SpringBoot', link:'/springboot'},
            {text: 'pinia', link:'/pinia'},
            {text: 'start', link:'/start'},
        ]
    }
}

同样也支持嵌套，只需要利用items属性即可

export default {
    title: ' 这是刘明凯的网站',
    description: '刘明凯是一个大厦比',
    themeConfig: {
        nav: [
        ],
        socialLinks: [
        ],
        sidebar: [
            {text: 'SpringBoot', link:'/springboot'},
            {text: 'pinia', link:'/pinia'},
            {
                text: 'start', 
                collapsed: false,
                items: [
                    {text: '别点我', link: '/test'},
                    {text: '别点我23', link: '/test22'},
                    {text: '别点我45', link: '/test1'},
                ]
        },
        ]
    }
}
多个侧边栏

每个导航项的侧边栏可以不同，根据路径显示不同的侧边栏
此时只需要将sidebar修改为对象模式即可

export default {
  themeConfig: {
    sidebar: {
    // 当路径是/guide时，显示这个侧边栏
      '/guide/': [
        {
          text: 'Guide',
          items: [
            { text: 'Index', link: '/guide/' },
            { text: 'One', link: '/guide/one' },
            { text: 'Two', link: '/guide/two' }
          ]
        }
      ],
// 当路径是 /config 时，显示这个侧边栏
      '/config/': [
        {
          text: 'Config',
          items: [
            { text: 'Index', link: '/config/' },
            { text: 'Three', link: '/config/three' },
            { text: 'Four', link: '/config/four' }
          ]
        }
      ]
    }
  }
}

页脚

export default {
    themeConfig: {
        footer: {
            message: '本网站基于VitePress构建',
            copyright: '2023 © Mingkai Liu'
        },
    }
}

首页

这个页面是怎么来的？

这个页面也是利用Markdown绘制来的
在一个Markdown页面中，利用---给出页面的配置信息，我们称---中的配置信息叫做FrontMatter，用来对Markdown页面做出配置
!!!frontmatter 必须位于 Markdown 文件的顶部
示例：这是一篇Markdown文档

---
layout: home

title: Docs with VitePress
editLink: true
---

# 接下来正常书写Markdown文档

关于Frontmatter的配置，可以看Frontmatter 配置 | VitePress 中文网

只需要在Frontmatter中，给出layout:home，那么此文档就是首页的布局模式了
如何利用Frontmatter定义首页首页 | VitePress 中文网

首页由两部分组成：

Hero部分

给出一个实例，效果图如下

---
layout: home

hero:
  name: hero的标题
  text: 这是一个首页文本内容
  tagline: 这是标签栏中的内容
#   网站logo
  image:
    src: https://kkbank.oss-cn-qingdao.aliyuncs.com/note-img/test-hero-page.jpg
    alt: 这是网站的logo,当图片不能显示时，这段文本就是显示出来  
# 跳转按钮
  actions:
    # 按钮的样式，brand | alt
    - theme: brand
      text: Get Started
      link: /
    - theme: alt
      text: View on GitHub
      link: https://github.com/LMKKK
---
Feature部分

Feature主要是对网站的一些功能、特点，做展示。

给出实例，效果图

---
features:
  - icon: 🛠️
    title:  快速构建
    details: 牛逼克拉斯
  - icon:
#   使用自定义图标
      src: https://kkbank.oss-cn-qingdao.aliyuncs.com/note-img/a46f86730f2dc1d1aeac6cc35536d4c260a6d71d.webp
    title: 我吊不吊
    details: 碉堡了！！
  - icon:
#   分别指定普通、暗黑模式时的图片
      dark: /dark-feature-icon.svg
      light: /light-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
---

搜索框

只需要在配置对象中开启即可。

export default {
  themeConfig: {
    search: {
      provider: 'local'
    }
  }
}

404页面

VitePress中自带了一个404页面，如果要自定义404页面，请使用自定义主题。

Markdown中书写Vue

在 Markdown 中使用 Vue | VitePress 中文网
每个Markdown都会被转换为html页面，并可以作为Vue的一个单文件组件。
因此，你之前怎么写Vue组件，那么在Markdown文档中怎么写就可以了。
例如：

# 我是Pinia页面

<div v-for="idx in 6">测试v-for指令{{ idx }}</div>


# 我是Pinia页面

<script setup>

    import { ref } from 'vue'

    const msg = ref('HelloVitePress')

</script>
<style>
    h1 {
        color: 'red';
    }
</style>
<h1>{{  msg }}</h1>
<div v-for="idx in 6">测试v-for指令{{ idx }}</div>

注意：
在Markdown中书写Vue代码，不要使用<style scope>

拓展

可以将VitePress构建后的静态资源文件，利用GitHubPage，生成自己专属的静态网站，支持别人访问。

秋天code
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用VitePress创建个人网站并部署到GitHub
Mr Dear的博客
06-14 2388
使用VitePress创建个人网站并部署到GitHub，自定义主题样式，配置并使用algolia搜索或内置search搜索
vitepress和vuepress的区别
小白
03-22 3101
但是，由于VitePress使用了Vite的构建工具，因此它的构建后的文件更小，也更容易在CDN上进行缓存，从而在性能上更优秀。VitePress使用了Vue 3的新特性：Vite构建工具，它可以提供更快的构建速度，而且在开发模式下，可以做到热更新，提供了更好的开发体验。VuePress的路由系统是基于文件系统的，它会自动解析文件夹和文件的结构，从而创建对应的路由。VitePress的插件系统则基于Vite，它的构建速度更快，但是它的插件系统相对较新，可用的插件数量不如VuePress的多。
尤雨溪又出新品了！VuePress 的升级版，更快、更灵活，构建更强大的网站！
最新发布
前端开发博客
06-11 577
大家好，我是前端宝哥。哇！VitePress 终于发布 1.0 版本了！????一直关注 VitePress 的小伙伴应该都知道，它是一款专门用来构建快速、内容为中心的网站的静态网站生成器 (SSG)，简单来说就是把你的 Markdown 文档变成美观的网页。VitePress 基于 Vite 和 Vue 构建，可以说是 VuePress 的升级版，更强大、更灵活，当然也更现代啦！VitePress 能...
vitepress从0到1，让每个前后端小伙伴都拥有一个属于自己的博客
热门推荐
moandaylab
06-01 1万+
首先，我们在文件夹下定义一个文件，名为home.vue。然后在里面写些想要展示的内容所对应的代码，</</</
VitePress搭建Vite官方中文文档首页
俊刚的博客
01-05 2860
Vitepress是一个简单、快速和高效的静态网站生成器，它基于Vue.js和Vite构建工具。相较于Vuepress，Vitepress在性能和开发体验方面做出了一些优化。通过使用Vitepress，开发者可以更快速地构建静态网站，并享受到更好的开发体验。希望本文能够帮助你深入了解Vitepress，并在实际项目中应用它。
什么是 VitePress？
前端精髓
05-03 2729
VuePress 是 Vue 驱动的静态网站生成器，享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。VuePress 会为每个页面预渲染生成静态的 HTML。 VitePress 是 VuePress 的兄弟（替代品），建立在Vite之上。 虽然 VuePress v1 很好，但是构建在 Webpack 之上，为一个只有几页的简单文档站点启动开发服务器所花费的时间变得难以忍受。即使是 HMR 更新也可能需要几秒钟才能反映在浏
Vitepress（一）：基础教程
weixin_46463785的博客
01-07 4722
Vitepress是使用Vue3+Vite来快速搭建一个个人网站的工具，网站搭建者不需要掌握Vue3，Vite等的具体内容，只需要简单的配置就可以生成Vue风格的个人网站官方地址：https://vitejs.cn/vitepress/本教程希望教会大家快速搭建一个基于Vitepress的个人博客，并且实现git page的自动部署，项目的预览地址如下：个人博客：https://aiai0603.github.io。
详解tomcat部署静态html网站方法
09-30
主要介绍了tomcat部署静态html网站方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用 Nginx 部署静态页面的方法
09-30
本篇文章主要介绍了使用 Nginx 部署静态页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
支持部署动态网站和静态网站
04-06
标题 "支持部署动态网站和静态网站" 暗示了我们正在讨论一个可以在Android设备上运行的Web服务器软件，能够处理动态和静态网页内容。AndServer由作者yanzhenjie开发，它允许用户在Android平台上搭建一个服务器，类似...
tomcat部署静态网站.docx
03-16
本篇文章将详细讲解如何使用Tomcat部署静态网站，以便为用户提供一个高效、简洁的服务平台。 首先，让我们从基础开始。Apache Tomcat是Apache软件基金会的一个开源项目，它是实现Java Servlet和JavaServer Pages ...
httpd 部署静态网站笔记
12-10
httpd 部署静态网站笔记
vitepress 几步轻松搭建博客
好川的博客
02-26 5314
💎vitepress使用场景简单的说 ，只要会用markdown语法，就能构建自己的博客、笔记、使用文档等系统；✨vitepress优势优势介绍傻瓜式操作只需要配置 菜单 和 对应的markdown就能实现博客、笔记等系统 自由性能优势基于 vue3 和 vite 超快的启动速度，和更小的打包体积相比vue2 的 vuepress 更具有优势写的少，做的多专注于编写并以最少的配置进行部署，真正的 SSG + SPA 架构疯狂独特设计与主题自带各种独特的主题，我们只需填充内容和配置。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
Mr Dear的博客
06-08 2889
使用VitePress静态网站生成器创建vue-amazing-ui组件库使用文档，并部署到GitHub
vitepress 最详细教程之开始使用
ox4f5da2的博客
02-10 4165
vitepress 最详细教程之新建第一个 vitepress 项目
使用Vitepress搭建并发布个人网站
AKALI822的博客
11-02 1271
搭建网站的技术有很多，本文以使用vitepress静态网站生成器为例，介绍从生成网站到发布的过程。
我的自建博客之旅03之vuepress和Vitepress
LLCN的博客
03-19 947
VuePress和VitePress 是一个以 Markdown 为中心的静态网站生成器。我们可以使用 Markdown在新窗口打开来书写内容（如文档、博客等），然后 Vue(Vite)Press 会帮助你生成一个静态网站来展示它们。VuePress以及后续VitePress诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。其实在国内，因为Vue的特殊地位，前端几乎都因为Vue而了解VuePress和VitePress。
基于VitePress搭建静态文档系统
Sophie_U的博客
12-22 1507
vitePress：与vue press相似，是一个静态网站生成器，相较于vuepress而言，vitepress是基于vue3的，采用vite构建，拥有更轻量更优秀的性能。VitePress的目标是拥有编写文档所需的最低限度功能。其他功能放在主题中实现。另外一方面，VuePress有更多的现成功能，包括由它的插件的生态系统启用的功能。vuepress则是基于vue2.x通过webpack来构建的。VitePress官方文档VuePress官方文档vitePress基于Vite，VuePress基于。
使用VitePress快速搭建部署个人博客网站
二当家小D的学习资源库
04-29 1370
VitePress 是一个基于 Vue 3 和 Vite 构建的静态站点生成器，专门用于快速创建文档网站。而我们的Vue3官方文档就是选择了 VitePress 来展示 Vue 3 的新功能和用法，利用 vitepress 快速搭建个人项目到部署上线
宝塔面板可以部署静态网站吗？
05-26
可以的，宝塔面板可以通过Nginx等Web服务器来部署静态网站。以下是具体步骤： 1. 在宝塔面板中创建网站，并将网站域名解析到服务器IP地址。 2. 在网站设置中选择使用Nginx作为Web服务器。 3. 在网站根目录下上传静态网站文件，例如HTML、CSS、JS等文件。 4. 在Nginx配置文件中添加静态文件访问规则，例如： ``` location / { root /www/staticsite; index index.html; } ``` 其中`/www/staticsite`为静态网站文件所在目录，`index.html`为默认首页文件名。 5. 保存配置文件并重启Nginx服务，即可通过域名访问静态网站。 需要注意的是，宝塔面板的Nginx配置文件路径可能会因操作系统版本、Nginx版本等因素而有所不同，具体可参考宝塔面板相关文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值