搭建个人博客

🎎 VitePress

VitePress 是一个 静态站点生成器(SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。

🍨 前置准备

• Node.js 18 及以上版本
• 通过命令行界面 (CLI) 访问 VitePress 的终端
• 支持 Markdown 语法的编辑器 (推荐 VSCode 及其官方 Vue 扩展)

👑 安装命令

pnpm add -D vitepress@next

VitePress 附带一个命令行设置向导，可以帮助你构建一个基本项目。安装后，通过运行以下命令启动向导：

pnpm vitepress init

按照提示回答几个问题:

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Where should VitePress look for your markdown files?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run pnpm run docs:dev and start writing.

🚎 启动并运行

还应将如下脚本注入到 package.json 中:

{
  ...
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "git fetch --unshallow && vitepress build docs",
    "preview": "vitepress preview docs"
  },
  ...
}

使用以下命令运行它：

pnpm run dev

开发服务应该会运行在 http://localhost:5173 上。在浏览器中访问 URL 以查看新站点的运行情况吧！

🛶 界面展示