主要是在之前跟人学的快速搭建一个简单的网站,可以通过这样的方式把相关的文档美美的放在服务器上,然后给别人看也好,自己也能熟系熟系MarkDown的语法并学习,要是接口文档还是推荐通过swagger去实现。
 

首页效果图

主要使用docsify文档系统

官方github地址:https://github.com/docsifyjs/docsify-cli

中文说明地址:https://docsify.js.org/#/zh-cn/quickstart

一、安装nodejs

nodejs官方地址:https://nodejs.org/en/download/

找到自己电脑的相关版本并安装(怎么安装就不用教了吧)

二、安装docsify-cli 工具

打开终端编辑器运行:

npm i docsify-cli -g

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

sudo npm i docsify-cli -g

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

三、搭建本地目录等

1.新建以dosc命名的目录

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编写文档就可以了

到这为止就结束了,如有不对的地方或疑问还请留言啦~

本地快速搭建MarkDown语法网站的更多相关文章

  1. 工作效率-十五分钟让你快速学习Markdown语法到精通排版实践备忘

    关注「WeiyiGeek」公众号 设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 文章目录: 0x00 前言简述 ...

  2. USBWebServer 中文便携版 快速搭建 PHP/MySQL 网站服务器环境

    如果你是一位 WEB 开发者,或正在学习网页编程,你一定会发现,每到一台新电脑上想要在本地调试测试/运行网站代码都得搭建配置一遍 WAMP (Win.Apache.PHP.MySQL) 环境简直烦透了 ...

  3. 教你如何快速上手markdown语法,编写技术博客(史上最全最简,用MarkDown写博客)

    首先,进行有道云笔记官网,新建一份markdown文档, 如下图 然后,在文档编辑区,左边,复制如下段落文字 加粗 斜线 标记颜色 下划线 废弃线 一级标题 二级标题 三级标题 四级标题 五级标题 六 ...

  4. 快速学习MarkDown语法及MarkDown拓展语法

    使用Markdown编辑器写博客 前半部分为效果后半部分为markdown格式,推荐开起两个窗口对比阅读 Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数 ...

  5. 本地快速搭建 FTP 服务器

    一.什么是FTP FTP(File Transfer Protocol)是TCP/IP网络上两台计算机传送文件的协议,使得主机间可以共享文件. 二.搭建前期准备 1.首先打开控制面板找到“程序”点击打 ...

  6. 开源解决方案一:快速搭建单机版 LAMP 网站

    LAMP 通常表示 Linux + Apache + MySQL/MariaDB + Perl/PHP/Python,LAMP 的各个组件不是一成不变的,并不局限于它最初的选择.作为一个解决方案套件, ...

  7. 基于本地iso 搭建的本地yum源 安装部署openldap

    1,yum openldap-servers,openldap-clients 基于iso-cd1搭建的本地yum源(具体搭建参看ruige的repo本地快速搭建,在右边 找找看中输入repo key ...

  8. ECS7天实践进阶训练营Day1:使用阿里云ECS,快速搭建、管理VuePress静态网站

    一.概述 VuePress是2018年由尤雨溪发布的一个全新的基于Vue的静态网站生成器,它是一个非常轻量级的静态网站生成器.VuePress主要用于生成技术文档,其类似于Gitbook,我们可以用于 ...

  9. 利用git+hugo+markdown 搭建一个静态网站

    利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...

随机推荐

  1. mybatis 批量添加数据的两种实现方式

    做开发的这几年期间经常遇到类似处理这种形式数据的问题,也遇到很多刚刚入行的新同学,发现他们做处理这块,经验不够,今天特地整理了一下,大家都会遇到的几种情况,代码也都粘贴出来了,拿去不谢,有时间大家还是 ...

  2. Maven基础。

    ---恢复内容开始--- Maven: 1.概念. * maven 是一个项目管理工具. * maven的作用. 1.jar包.依赖管理.将jar包放在jar包仓库(pom.xml),不需要每个项目都 ...

  3. Laravel - Method [xxx] does not exist on [xxx]

    The controller is existing, and the method 'test' exist on 'App\Http\Controllers\Admin\IndexControll ...

  4. 大数据:Hadoop(HDFS 的设计思路、设计目标、架构、副本机制、副本存放策略)

    一.HDFS 的设计思路 1)思路 切分数据,并进行多副本存储: 2)如果文件只以多副本进行存储,而不进行切分,会有什么问题 缺点 不管文件多大,都存储在一个节点上,在进行数据处理的时候很难进行并行处 ...

  5. 项目Beta冲刺(5/7)(追光的人)(2019.5.27)

    所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 描述Beta冲刺每日的scrum和PM报告两部分 队员学号 队员博客 221600219 小墨 https:/ ...

  6. git 学习笔记 —— 切换和恢复提交版本( git reset/reflog/tag 命令)

    记录一下关于 git 不同提交版本间切换的操作以及如何恢复至切换之前的版本. 切换到之前提交的版本 —— git reset --hard 笔者在使用 git 时,首先接触到了一个"黑魔法& ...

  7. web万维网 -- 基础概念

    Web(万维网World Wide Web的简称)是个包罗万象的万花筒,不同的人从不同的角度观察,对于Web究竟是什么会得出大不相同的观点. 百科:web(World Wide Web)即全球广域网, ...

  8. redux有价值的文档

    使用 Redux 管理状态,第 1 部分 https://www.ibm.com/developerworks/cn/web/wa-manage-state-with-redux-p1-david-g ...

  9. 2017icpc beijing-I题-Colored Nodes

    题意 给定一个n个点m条边的无向图,一开始点i的颜色为i,在第i+kn秒开始时,与节点i相邻的节点会被染成i的颜色(k为自然数) 定义D(i,j)第j秒结束时颜色为i的节点个数,求: $F(i)=\l ...

  10. 实现:创建/复制/移动文件API

    使用的API: 1.DeleteFile DeleteFileW( _In_ LPCWSTR lpFileName ); 2.CopyFile CopyFileW( _In_ LPCWSTR lpEx ...