本地快速搭建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編寫文檔就能夠了

到這爲止就結束了，若有不對的地方或疑問還請留言啦~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。