手把手带你搭建VitePress博客站

手把手带你搭建VitePress博客站

以前也折腾过一些其它博客类的模板,例如WordpressHexo,但到最后却都没有持续用下来,使用成本和发布方式是其中最大的阻碍。

今天这篇博文,会使用VitePress,让你以一个近乎无成本和最简单的配置,去快速的搭建一个属于你的博客站。最好注册一个vercel账户和一个域名。

VitePress基本使用

vitepress 作为以Vite为底层驱动的静态文档站,提供了默认深色与亮色的主题,也支持深度的自定义。下面我们开始它的使用。

首先,我们需要安装一下:

bash 复制代码
pnpm add -D vitepress

通过命令初始化:

bash 复制代码
pnpm vitepress init

这里会初始化基本配置、设置主题和站点信息。设置完成后,会生成一下的目录结构:

arduino 复制代码
.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js	// 站点配置文件
│  ├─ api-examples.md  // 文章
│  └─ index.md  // 首页
└─ package.json

执行pnpm docs:dev 预览

json 复制代码
{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  ...
}

启动成功后,在游览器中打开

此时,最基础的部分已经完成。

VitePress个性化配置

静态资源

在项目中可以直接使用/开头,以获取公共文件下的资源

arduino 复制代码
.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js	
│  ├─ public
│  │  └─ favicon.png	

文档布局

在每一个Markdown文件中,Frontmatter 可以配置覆盖站点级或主题级配置选项。

md 复制代码
--------
title: VitePress
titleTemplate: Vite & Vue powered static site generator
layout: doc
editLink: false
lastUpdated: true
footer: false
--------

默认layoutdoc, page, 和 home

doc 是默认布局,它将整个 Markdown 内容设置为"文档"外观。同时可以启用以下功能:

  • 编辑链接
  • 上一页与下一页链接
  • 目录大纲

page 是一个空页面,可以自行设计所有内容。在这种布局中,如果页面具有匹配的侧边栏配置,侧边栏仍然会显示。

home 是默认的主页布局,可以通过配置指定主页的内容

站点配置

js 复制代码
import { defineConfig } from 'vitepress';

export default defineConfig({
  title: "站点标题",
  description: "站点描述",
  lang: 'zh-CH',

  lastUpdated: true,	// 是否展示更新时间
  cleanUrls: false,	// URL 中删除尾随的 .html

  // 设置元数据  
  head: [ 
    ["link", { rel: "icon", type: 'image/png', href: "/favicon.png" }],  // favicon 
    [
      "meta",
      {
        name: "viewport",
        content:
          "width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no",
      },
    ],
    ["meta", { name: "keywords", content: "" }],
  ],

  // 主题配置  
  themeConfig: {
    logo: { src: '/favicon.png', width: 24, height: 24 },
    // 大纲设置
    outline: [2, 5],  // 识别<h2>-<h4>的标题
    outlineTitle: '本页目录',
    lastUpdatedText: '上次更新',
    author: "alilis",
    // 开启本地搜索
    search: {
      provider: "local",
    },
	// 导航页
    nav: [ 
      { text: "首页", link: "index" }
    ],
	// 文件目录
    sidebar: [],
	
    footer: {
      message: 'Released under the MIT License.',
      copyright: `Copyright © 2023 Alilis`
    },

    docFooter: {
      prev: '上一页',
      next: '下一页'
    },
	// 社交链接
    socialLinks: [
      { icon: 'github', link: 'https://github.com/your-name' },
    ],
  },

  vite: {},

  ignoreDeadLinks: true
});

在经过这些基本配置,你已经可以在站点上写写文章了。

Vercel上发布

将我们的代码提交至你的github仓库,这样我们在注册 vercel 后便可以直接连接至仓库,每次的更新也会触发更新策略,十分简单。

选择git的仓库和分支,然后便等待它编译初始化。成功以后,在这里可以添加你自己的域名。

你也可以配置一些分析,来监测网站的情况,总之一切就是这么很简单粗暴。

这里是我自己的小破站,欢迎点击查看。

相关推荐
jqq6666 分钟前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js
Mintopia7 分钟前
BVH:光线追踪里的空间管家
前端·javascript·计算机图形学
Mintopia13 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
掘金安东尼32 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~34 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务37 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛37 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑40 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭1 小时前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿1 小时前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端