NodeJS + Vitepress 搭建 Markdown静态网页文档服务器

vitepress安装设置

1、首先，我们要做的第一件事就是创建目录 （在这之前请确保NodeJS已经安装好！, 具体安装请看这里。）

mkdir blog-vitepress
cd blog-vitepress

2、初始化 package.json ，并安装 viteppress

npm init
npm i --save-dev vitepress

3、将 VitePress 脚本添加到 package.json 文件中。

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

4、根目录下创建 docs 文件夹，并创建第一个 index.md 文件(这个是网站首页的配置和内容)，可以用命令行或在文件夹手动创建。

mkdir docs
echo '# Hello World' > docs/index.md

5、启动项目

npm run docs:dev

浏览器中会打开一个新页面（http://localhost:3000/），到这里，最基本的项目搭建好了。

现在就可以开始 书写markdown文件来 填充博客内容了。待内容搭建好了之后，可以构建静态网站，然后部署到服务器上去。

vitepress博客配置

1、去掉右侧的边栏

---
aside: false
---

2、显示内容章节标题以及子标题

---
outline: [2,3]
---

3、自定义 前一页 和 下一页 的链接和文字

---
prev:
  text: Some text here
  link: /myblog/hello_1.md
next:
  text: Some new text here
  link: /myblog/john_1.md
---

更多有关 vitepress 站点设置的相关内容，请参考其官方文档。

Markdown 常用语法

markdown cheat sheet

markdown newline

you can use enter a new space line, or you can use <br /> in your markdown content.

markdown table with text align

| Heading | Column 2 | Column 3| 
| :----_: | -------: | ------- |
| centered | right align | left align |
| zebar | strips | me too |

markdown table of content

[[toc]]

markdown image

![alt](img url)

// usage
![img](./img/mycat.png)
[title](https://)

// usage
[title](/myblog/mypost1.md)

参考

相关文章