手把手带你建立VitePress博客站

以前也折腾过一些其它博客类的模板，例如WordPress和Hexo，但到最后却都没有继续用下来，运用本钱和发布方式是其间最大的阻止。

今天这篇博文，会运用VitePress，让你以一个近乎无本钱和最简单的装备，去快速的建立一个属于你的博客站。最好注册一个vercel账户和一个域名。

VitePress根本运用

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

首要，咱们需要装置一下：

pnpm add -D vitepress

通过命令初始化：

pnpm vitepress init

这里会初始化根本装备、设置主题和站点信息。设置完结后，会生成一下的目录结构：

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js	// 站点装备文件
│  ├─ api-examples.md  // 文章
│  └─ index.md  // 主页
└─ package.json

执行pnpm docs:dev 预览

{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  ...
}

启动成功后，在游览器中翻开

手把手带你建立VitePress博客站

此刻，最根底的部分已经完结。

VitePress个性化装备

静态资源

在项目中能够直接运用/开头，以获取公共文件下的资源

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js	
│  ├─ public
│  │  └─ favicon.png

文档布局

在每一个Markdown文件中，Frontmatter 能够装备覆盖站点级或主题级装备选项。

--------
title: VitePress
titleTemplate: Vite & Vue powered static site generator
layout: doc
editLink: false
lastUpdated: true
footer: false
--------

默许layout有doc, page, 和 home。

doc 是默许布局，它将整个 Markdown 内容设置为“文档”外观。同时能够启用以下功用：

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

page 是一个空页面，能够自行设计所有内容。在这种布局中，假如页面具有匹配的侧边栏装备，侧边栏仍然会显现。

home 是默许的主页布局，能够通过装备指定主页的内容。

站点装备

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 后便能够直接连接至库房，每次的更新也会触发更新战略，非常简单。

手把手带你建立VitePress博客站

挑选git的库房和分支，然后便等待它编译初始化。成功今后，在这里能够添加你自己的域名。

手把手带你建立VitePress博客站

你也能够装备一些剖析，来监测网站的情况，总归一切便是这么很简单粗暴。

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