---
# System prepended metadata

title: '[架設個人文檔網站吧！]Doscify 架設私有文檔網站'
tags: [frontend, Documentation, markdown, Doscify]

---

# 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]()

---
