Markdown (.md) 文件直接建站完整方案
一、主流方案对比(纯 MD 文件驱动,不用写 HTML)
| 方案 | 部署难度 | 适合场景 | 无需后端? | 本地预览 |
|---|---|---|---|---|
| VitePress | 低 | 文档站、知识库、笔记站 | 静态纯前端 | 支持热更新 |
| MkDocs | 极低 | 技术文档、本地 MD 批量转站 | 静态 | 一键本地服务 |
| Hugo | 中 | 博客、轻量化官网 | 静态 | 本地实时预览 |
| Obsidian Publish | 零代码 | Obsidian 笔记一键发布 | 付费托管 | 原生 Obsidian 编辑 |
| Docusaurus | 中 | 开源项目官方文档 | 静态 | React 生态 |
| Docsify | 极简(零构建) | 直接扔 MD 到服务器即用 | 纯前端无打包 | 打开文件夹就能看 |
二、最简零构建方案:Docsify(推荐小白,直接 MD 建站)
核心优势
不需要编译、不需要打包,把所有 md 文件丢进文件夹,打开 index.html 直接访问网站,服务器 / NAS / 宝塔静态站点均可部署。
1. 一键初始化
- 新建站点文件夹,放入你的所有
.md笔记 - 在文件夹新建
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的MD知识库</title>
<!-- 引入Docsify CDN -->
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: 'MD文档站',
repo: '',
search: true, // 全文搜索
loadSidebar: true, // 自动加载侧边栏 _sidebar.md
loadNavbar: true, // 顶部导航 _navbar.md
}
</script>
</body>
</html>
- 新建侧边栏文件
_sidebar.md,写目录导航
- 首页 [README.md] - 运维笔记 - Docker部署 [docker.md] - 宝塔教程 [bt.md] - 编程文档 - Python [python.md]
- 首页默认读取
README.md,把你的首页内容放这里
2. 本地快速预览
安装 node 后全局 serve:
npm i -g serve # 进入站点目录运行 serve .
打开 http://localhost:3000 即可访问完整网站。
3. 线上部署
宝塔面板:新建静态网站,上传全部文件(index.html、所有 md、\[_sidebar.md](_sidebar.md)),直接访问域名。
NAS/Nginx:直接映射文件夹为静态资源目录,无需数据库、PHP。
三、专业文档站:VitePress(美观、速度快,适合长期维护)
适合大量 MD 笔记、知识库、技术手册,自动生成静态页面,支持暗黑模式、代码高亮、搜索。
快速搭建
# 1. 初始化项目 npm init vite@latest my-site -- --template vitepress cd my-site npm install # 2. 把你的所有md放入 docs/ 文件夹 # 3. 本地实时预览 npm run dev # 4. 打包静态站点(dist文件夹可直接上传服务器) npm run build
打包后的 dist 目录是纯静态文件,丢任何静态服务器即可上线。
四、本地笔记玩家:Obsidian + Publish(零代码)
如果你平时用 Obsidian 写 MD 笔记,一键发布成网站:
- 安装插件 Publish
- 一键上传库内所有 md 文件到官方托管
- 自动生成带目录、搜索、跳转的网站,无需折腾服务器
缺点:付费,无法私有化部署在自己服务器。
五、轻量化 Python 方案:MkDocs(无前端基础友好)
纯 Python 工具,一键把 md 转静态网页:
# 安装 pip install mkdocs # 初始化站点 mkdocs new md-site cd md-site # 把你的md放入 docs/ # 本地预览 mkdocs serve # 打包静态文件 mkdocs build
生成 site 文件夹直接部署。
六、宝塔一键部署实操(Docsify 为例)
- 宝塔 → 网站 → 添加站点,数据库选「无」
- 进入网站根目录,上传
index.html、所有 md、_sidebar.md - 无需安装 PHP/MySQL,直接访问域名即可打开 MD 网站
- 如需域名访问、SSL 证书,宝塔一键配置 HTTPS
七、补充实用功能
- 图片引用:md 内直接相对路径
,文件夹同步上传图片即可显示 - 全文搜索:Docsify/VitePress/MkDocs 均内置,无需额外开发
- 层级目录:新建子文件夹存放分类 md,侧边栏自动分层
- 暗黑模式:Docsify、VitePress 自带主题切换
- 离线访问:全部方案打包后可本地打开,断网也能看文档
选型快速建议
- 只想立刻把现有 md 文件夹变成网站、不想安装工具 → Docsify
- 做正式技术文档、追求美观性能 → VitePress
- 只会 Python、不想碰 Node → MkDocs
- 重度 Obsidian 笔记用户 → Obsidian Publish
- 做个人博客、轻量化官网 → Hugo

