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

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

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

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟9 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站