使用vitepress搭建自己的静态个人博客 || 个人知识库

2024-07-29 17:20:12 浏览数 (2)

1. vitepress 介绍

VitePress 由 Vite 和 Vue 驱动的静态站点生成器 简单、强大、快速。就是你想要的现代 SSG 框架！

SSG 说明:

SSG（Static Site Generator）是一种用于生成静态网站的工具或框架。 它将网站的内容和模板文件作为输入，然后根据预定义的规则和配置生成静态的HTML、CSS和JavaScript文件。 与动态网站相比，静态网站不需要在每次请求时生成页面内容，因此可以提供更快的加载速度和更高的安全性。

vitepress 特点

  1. 专注内容:
    • 只需 Markdown 即可轻松创建美观的文档站点。
  2. 享受 Vite 无可比拟的体验
    • 服务器即时启动，闪电般的热更新，还可以使用基于 Vite 生态的插件。
  3. 使用 Vue 自定义
    • 直接在 Markdown 中使用 Vue 语法和组件，或者使用 Vue 组件构建自定义主题。
  4. 速度真的很快！
    • 采用静态 HTML 实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。

2. 安装

2.1 初始化项目

代码语言：javascript复制
pnpm init

或者

代码语言：javascript复制
npm init -y

2.2 安装vitepress

大家使用对应包管理工具进行安装即可,因为我是用的是pnpm 所以就以pnpm进行演示了

代码语言：javascript复制
pnpm add vitepress

2.3 使用vitepress指令快速搭建项目

代码语言：javascript复制
pnpm vitepress init

执行 pnpm run docs:dev 进去项目的启动

3. 首页配置文件介绍

官方关于首页相关的配置说明: vitepress.dev/zh/referenc…

相关配置说明我放在下面代码的注释里面了, 很好理解

代码语言：javascript复制
---
layout: home

hero:
  # 主标题
  name: SunFei博客
  #   副标题
  text: VitePress   Vue 搭建
  #   内容介绍
  tagline: JavaScript Html CSS ThreeJs Uniapp Echarts ...
  
  
  # 右边图片
  image:
    src: /sq.svg
    alt: VitePress
    
    
  actions:
    # 按钮主题
    - theme: brand
    # 按钮文字
      text: 快速开始
      link: /markdown-examples
    - theme: alt
      text: vitepress官方
      link: https://vitepress.dev/

# 特色
features:
   # icon图标,目前只支持emoji
  - icon: ⚡️
    # 标题
    title: 前端知识
    #  介绍
    details: HTML CSS JavaScript TypeScript Vue3等部分的基础以及进阶的内容知识点,整合自己以及别人的资料 
  - icon: 


	


测试 配置 学习笔记 网站 博客 




	






	

 0 人点赞