Markdown文件直接建站完整方案

laoluo
laoluo
laoluo
管理员
162
文章
0
粉丝
教程评论6阅读模式

Markdown (.md) 文件直接建站完整方案

一、主流方案对比(纯 MD 文件驱动,不用写 HTML)

方案 部署难度 适合场景 无需后端? 本地预览
VitePress 文档站、知识库、笔记站 静态纯前端 支持热更新
MkDocs 极低 技术文档、本地 MD 批量转站 静态 一键本地服务
Hugo 博客、轻量化官网 静态 本地实时预览
Obsidian Publish 零代码 Obsidian 笔记一键发布 付费托管 原生 Obsidian 编辑
Docusaurus 开源项目官方文档 静态 React 生态
Docsify 极简(零构建) 直接扔 MD 到服务器即用 纯前端无打包 打开文件夹就能看

Markdown文件直接建站完整方案

二、最简零构建方案:Docsify(推荐小白,直接 MD 建站)

核心优势

不需要编译、不需要打包,把所有 md 文件丢进文件夹,打开 index.html 直接访问网站,服务器 / NAS / 宝塔静态站点均可部署。

1. 一键初始化

  1. 新建站点文件夹,放入你的所有 .md 笔记
  2. 在文件夹新建 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>

 

  1. 新建侧边栏文件 _sidebar.md,写目录导航
- 首页 [README.md]
- 运维笔记
  - Docker部署 [docker.md]
  - 宝塔教程 [bt.md]
- 编程文档
  - Python [python.md]

 

  1. 首页默认读取 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 笔记,一键发布成网站:

  1. 安装插件 Publish
  2. 一键上传库内所有 md 文件到官方托管
  3. 自动生成带目录、搜索、跳转的网站,无需折腾服务器
    缺点:付费,无法私有化部署在自己服务器。

五、轻量化 Python 方案:MkDocs(无前端基础友好)

纯 Python 工具,一键把 md 转静态网页:

# 安装
pip install mkdocs
# 初始化站点
mkdocs new md-site
cd md-site
# 把你的md放入 docs/
# 本地预览
mkdocs serve
# 打包静态文件
mkdocs build

生成 site 文件夹直接部署。

六、宝塔一键部署实操(Docsify 为例)

  1. 宝塔 → 网站 → 添加站点,数据库选「无」
  2. 进入网站根目录,上传 index.html、所有 md、_sidebar.md
  3. 无需安装 PHP/MySQL,直接访问域名即可打开 MD 网站
  4. 如需域名访问、SSL 证书,宝塔一键配置 HTTPS

七、补充实用功能

  1. 图片引用:md 内直接相对路径 ![图](./img/1.png),文件夹同步上传图片即可显示
  2. 全文搜索:Docsify/VitePress/MkDocs 均内置,无需额外开发
  3. 层级目录:新建子文件夹存放分类 md,侧边栏自动分层
  4. 暗黑模式:Docsify、VitePress 自带主题切换
  5. 离线访问:全部方案打包后可本地打开,断网也能看文档

选型快速建议

  • 只想立刻把现有 md 文件夹变成网站、不想安装工具 → Docsify
  • 做正式技术文档、追求美观性能 → VitePress
  • 只会 Python、不想碰 Node → MkDocs
  • 重度 Obsidian 笔记用户 → Obsidian Publish
  • 做个人博客、轻量化官网 → Hugo

 
laoluo
  • 本文由 laoluo 发表于2026年7月7日 18:48:07
  • 转载请务必保留本文链接:https://www.mydata-api.com/tutorials/379.html
匿名

发表评论

匿名网友
确定

拖动滑块以完成验证