本地快速搭建MarkDown语法网站

时间 2019-11-08

标签本地快速搭建 markdown 语法网站栏目 Markdown 繁體版

原文原文链接

又到了愉快的周末，再上两天班就十一长假喽~继续记录点本身晓得的东西！ css

主要是在以前跟人学的快速搭建一个简单的网站，能够经过这样的方式把相关的文档美美的放在服务器上，而后给别人看也好，本身也能熟系熟系MarkDown的语法并学习，要是接口文档仍是推荐经过swagger去实现。html

首页效果图

主要使用docsify文档系统

官方github地址：github.com/docsifyjs/d…vue

中文说明地址：docsify.js.org/#/zh-cn/qui…node

1、安装nodejs

nodejs官方地址：nodejs.org/en/download…git

找到本身电脑的相关版本并安装（怎么安装就不用教了吧） github

2、安装docsify-cli 工具

打开终端编辑器运行：chrome

npm i docsify-cli -g
复制代码

等待安装完毕,如安装失败请在最前面加上sodu已管理员权限安装

sudo npm i docsify-cli -g
复制代码

再不行的话。。。。把报错信息拷贝自行百度吧~npm

3、搭建本地目录等

1.新建以dosc命名的目录bash

2.在终端执行命令初始化目录：服务器

docsify init ./docs
复制代码

注意初始化的是你刚刚创建的dosc命名的

安装成功以后docs目录下会出现3个文件

index.html 入口文件
README.md 会作为主页内容渲染
.nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件

3.查看是否能够正常启动

运行命令

docsify serve docs
复制代码

须要在docs同级目录下运行哦

运行成功以后能够访问http://localhost:3000/#/是否能够访问

4.修改index.html文件

这边用的vscode编辑器编辑

原文件：

修改以后：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
  <div id="app">加载中</div>
  <script>
    window.$docsify = {
      name: '在线文档',
      nameLink: '/',
      search: 'auto',
      coverpage: true,
      loadSidebar: true,
      loadNavbar: true
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>

复制代码

5.新增_sidebar、_navbar、_coverpage文件生成首页

具体目录以下：

_sidebar：

* [总体规划](programming/)
* [服务器清单](server/)
* [文档说明](document/)
复制代码

_navbar：

* [总体规划](programming/)
* [服务器清单](server/)
* [文档说明](document/)
复制代码

_coverpage：

# 在线文档

[总体规划](programming/)
[服务器清单](server/)
[文档说明](document/)
复制代码

最后展示形式如开头的首页效果图

这样差很少就大功告成了，省下的就如我下面的截图一路往下创建文件等，在文件下使用markdown编写文档就能够了