本人剛用 vuepress 寫完乙個 ui 框架的文件： 確實很好用且自帶pwa，訪問速度飛快。特此總結使用方法。
全域性安裝
# 安裝
yarn global add vuepress # 或者：npm install -g vuepress
# 新建乙個 markdown 檔案
echo '# hello vuepress!' > core 2
# 開始寫作
vuepress dev .
# 構建靜態檔案
vuepress build .
如果想在乙個現有專案中使用vuepress，同時想要在該專案中管理文件，則應該將vuepress安裝為本地依賴。作為本地依賴安裝讓你可以使用持續整合工具，或者一些其他服務（比如netlify）來幫助你在每次提交**時自動部署。
# 將 vuepress 作為乙個本地依賴安裝
yarn add -d vuepress # 或者：npm install -d vuepress
# 新建乙個 docs 資料夾
mkdir docs
# 新建乙個 markdown 檔案
echo '# hello vuepress!' > docs/readme.md
# 開始寫作
npx vuepress dev docs
yarn安裝，本人親測用npm安裝總會因webpack版本以及依賴等報錯，而且用yarn安裝速度更快。
在根目錄建立乙個docs目錄，所有 vuepress 相關的檔案都將會被放在這裡，在其下面建立乙個.vuepress目錄，這裡主要寫配置以及可以引入 vue 元件
確保目錄結構為以下
├─ docs
│ ├─ readme.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
.vuepress目錄下建立乙個config.js文件，內容如下
module.exports =npx vuepress dev docs即可看見文件頁面，或者直接在package.json配置命令
}
yarn docs:dev訪問localhost:8080也可看見初始頁面
編寫package.json指令碼命令
}
docs/.vuepress/config.js中設定正確的base。
如果你打算發布到https://.github.io/，則可以省略這一步，因為base預設即是"/"。
對應配置是
module.exports =deploy.sh檔案，方便編譯部署文件,官方推薦是
#!/usr/bin/env sh
# 確保指令碼丟擲遇到的錯誤
set -e
# 生成靜態檔案
npm run docs:build
# 進入生成的資料夾
cd docs/.vuepress/dist
# 如果是發布到自定義網域名稱
# echo 'example domain' > cname
git init
git add -a
git commit -m 'deploy'
# 如果發布到 https://.github.io
# git push -f [email protected]:/.github.io.git master
# 如果發布到 https://.github.io/# git push -f [email protected]:/.git master:gh-pages
cd -
git push注釋，並填充變數
但是如果本地沒有配置github的秘鑰的話會報錯沒有許可權，於是本人寫了乙個通用的
#!/usr/bin/env sh
# 確保指令碼丟擲遇到的錯誤
set -e
# 生成靜態檔案
npm run docs:build
# 進入生成的資料夾
cd docs/.vuepress/dist
# 如果是發布到自定義網域名稱
# echo 'example domain' > cname
git init
git add -a
git commit -m 'deploy'
# 如果發布到 https://.github.io
# git push -f [email protected]:/.github.io.git master
# 如果發布到 https://.github.io/git remote add origin build software better, together/.git
git push origin --delete gh-pages
git push origin master:gh-pages
cd -
git remote新增遠端倉庫, 如果遠端已經有gh-pages（github會自動將此分支**部署到pages頁面中）則刪除，並將本地的master分支推到遠端的gh-pages，在根目錄下執行./deploy.sh即可正確部署
注意：macos使用者需要在執行指令碼加許可權，執行chmod +x deploy.sh
之後在github頁面的settings裡就可以看到頁面鏈結了
可以寫簡單的配置就能渲染跟vue一樣 的主頁，只需在docs資料夾目錄下建立乙個readme.md
---
home: true // 為true則開啟主頁
# heroimage: hi // logo，本人引入根目錄卻如法正常顯示，望告知方法
actiontext: 快速上手 → // 中間按鈕文字
actionlink: /guide/ // 中間按鈕跳轉連線
features: // 特色描述
- title: 簡易好學
details: 以分支名為完成對應元件的標誌，可檢視 commit 記錄快速學習各元件源**
- title: vue 驅動
details: 享受 vue + parcel 的開發體驗，實踐最流行的技術。
- title: 自動化測試
details: 採用 karma + mocha + chai 做自動化測試，執行 npm run dev-test 即可實時測試**。
---
側邊欄，導航欄等在.vuepress下的config.js裡配置
const path = require('path')
module.exports = ]
], // 引入標籤頁小圖示，但設定額沒用，望告知
themeconfig: ,
, // 根路徑指docs目錄，guide後面加乙個 / 表示guide是乙個目錄，會自動讀取其下的 core 2 檔案展示到頁面
],sidebar: [ // 側邊欄,,
]},scss:,
markdown:
}
vuepress也十分適合寫部落格文章，感謝尤大大的貢獻~ 側邊欄 前端小案例之側邊欄
簡單側邊欄案例 隱藏右邊盒子滑鼠經過時顯示 最近剛開始入門學習前端用簡單的html結構加css樣式寫了個側邊欄的小案例在這裡分享給大家。效果如下 該案例主要是在乙個sidebar盒子裡面左邊放乙個ul做側邊欄裡面的li作為每一行的內容，然後將sidebar mask盒子定位到側邊欄的右邊，用disp...
側邊欄廣告
1 23192031 323334 天王蓋地虎，小雞燉蘑菇 35天王蓋地虎，小雞燉蘑菇 36天王蓋地虎，小雞燉蘑菇 37天王蓋地虎，小雞燉蘑菇 38天王蓋地虎，小雞燉蘑菇 39天王蓋地虎，小雞燉蘑菇 40天王蓋地虎，小雞燉蘑菇 41天王蓋地虎，小雞燉蘑菇 42天王蓋地虎，小雞燉蘑菇 43天王蓋地虎，...
部落格側邊欄
感謝 頁面定製css 以下為隱藏反對 buryit ad t2,cnblogs c1,under post news,cnblogs c2,under post kb dataintable td phrase 部落格側邊欄公告 支援html 支援js bamboo lamp 一藝之成，當盡畢生之力...