# Doscify 架設私有文檔網站 :::info 需求要為新產品提供對外的使用文件，使用 Markdown 語言快速直覺的建立 ::: > [TOC] ## Doscify 是一個輕量、易用的文檔生成工具，用於創建基於 Markdown 文件的文檔網站。它是一個基於JavaScript的單頁應用程序（Single Page Application, SPA），不需要後端服務，可以直接在瀏覽器中運行。 使用 Docsify 構建文檔網站的過程通常包括將文檔以Markdown格式編寫，然後使用 Docsify 提供的命令行工具將其轉換為一個靜態網站，過程簡單而靈活，適用於小型和中型專案的文檔需求。 專案 Github: [docsify](https://github.com/docsifyjs/docsify/?tab=readme-ov-file) ## 安裝環境 使用 VScode IDE 進行開發，按照 tutorial 完成安裝： [quick start tutorial](https://docsify.js.org/#/quickstart) 完成 npm 安裝後，啟動服務： ``` $ docsify init ./docs $ cd docs $ docsify serve ``` 在本機瀏覽器的 3000 port 就可以看到初始畫面 ![image](https://hackmd.io/_uploads/H1wlyUKip.png) :::success 需先安裝 node.js 利用其 npm（Node Package Manager）套件管理工具安裝 docsify。 ::: ## 文件配置 文件結構： docs/ - index.html - README.md - _coverpage.md - _navbar.md - _sidebar.md - .nojekyll | 文件 | 備註 | | -------- | -------- | | index.html|入口網站配置文件| |README.md|主頁內容文件| |_coverpage.md|封面內容文件| |_navbar.md|導覽欄內容文件| |_sidebar.md|側邊欄內容文件| |.nojeckyll |為防止Github忽視下滑線開頭文件| ## 入口網站配置 :::success 主要配置皆在 index.html完成配置，其他文件為使用markdown語法撰寫內容，可以搭配 html、css 完成美化 ::: ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HigherShield</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="icon" href="./img/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" /> <!-- 預設主題 --> <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css"> --> <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dolphin.css"> --> <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"> --> <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"> --> <link rel="stylesheet" href="./vue.css"> <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css"> --> </head> <body> <!-- 定義載入時動作 --> <div id="app">Loading...</div> <script> window.$docsify = { // 專案名稱 name:'HigherShield', // Github // repo: 'https://github.com/', homepage: 'home.md', logo: '/img/hcloud_logo.png', // 側邊欄，預設是專案根目錄下的_sidebar.md文件 loadSidebar: true, autoHeader: true, // 導覽欄，預設是專案根目錄下的_navbar.md文件 loadNavbar: true, // 封面，預設是專案根目錄下的_coverpage.md文件 coverpage: true, // 最大支援渲染的標題層級 maxLevel: 5, // 自定義側邊欄後預設不會再生成目錄，設定生成目錄的最大層級（建議配置為2-4） subMaxLevel: 4, // 小屏幕設備下合併導覽欄到操邊欄 mergeNavbar: true, /*搜尋相關設定*/ search: { maxAge: 86400000,// 過期時間，單位毫秒，預設值一天 paths: ["/home.md","/home_en.md"], placeholder: 'Search...', placeholder: { '/home': 'Search', }, noData: 'No results found', depth: 4, hideOtherSidebarContent: true, namespace: 'docs', } } </script> <!-- docsify的js依赖 --> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <!-- emoji表情支持 --> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script> <!-- 图片放大缩小支持 --> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script> <!-- 搜索功能支持 --> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script> </body> </body> </html> ``` 完成內容：[海爾盾](https://docs.higher-cloud.com/) ## 延伸閱讀： [AWS S3+Cloudfront 建立靜態網站](https://hackmd.io/krdTdumATTWXnoCTxPaYJA) [Git & Github 版本控制](https://hackmd.io/7eIaOpMpSt6OMaC_TVBKlA) [Github Action + S3 小型CI/CD]() ---