手把手带你搭建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的仓库和分支,然后便等待它编译初始化。成功以后,在这里可以添加你自己的域名。

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

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

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek