# 使用vuepress搭建簡易文檔?? 對于這個靜態網站生成工具官方文檔是真的看的令人抓??特別是語言邏輯上看的是十分痛苦，我是先看別人搭建過程然后再回頭看官方文檔的??這樣比較好理解，先人踩坑后人享福 vuepress[官網](<https://v1.vuepress.vuejs.org/>) awesome [更多資源](https://github.com/ulivz/awesome-vuepress) ?? 這是我搭建好的文檔 [follow me](https://ragnar-document.github.io/vue-blog/) GitHub地址：[????歡迎提交issue](https://github.com/ragnar-document/vue-blog) ### 像數 1, 2, 3 一樣容易！屁一堆坑好吧??? ```bash ?? 注意先在Desktop中mkdir一個項目如何cd進去才開始?? # 安裝 ? yarn global add vuepress # 或者：npm install -g vuepress ?? yarn global add vuepress@next # 或者：npm install -g vuepress@next //第一個坑來了 # 新建一個 docs 文件夾 mkdir docs # 新建一個 markdown 文件 echo '# Hello VuePress!' > docs/README.md # 開始寫作 npx vuepress dev docs ``` ??注意 請確保你的 Node.js 版本 >= 8.6。 ```json ??在根目錄文件配置你的package.json文件 { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } ``` 配置成功運行?? ? ```bash yarn docs:dev # 或者：npm run docs:dev ``` 配置目錄結構 ``` . ├── docs │ ├── .vuepress (可選的) 用于存放全局的配置、組件、靜態資源等。 │ │ ├── components (可選的) 該目錄中的 Vue 組件將會被自動注冊為全局組件。 │ │ ├── theme (可選的) 用于存放本地主題。 │ │ │ └── Layout.vue │ │ ├── public (可選的) 靜態資源目錄。 │ │ ├── styles (可選的) 用于存放樣式相關的文件。 │ │ │ ├── index.styl │ │ │ └── palette.styl │ │ ├── templates (可選的, 謹慎配置) 存儲 HTML 模板文件。 │ │ │ ├── dev.html /用于開發環境的 HTML 模板文件。 │ │ │ └── ssr.html /構建時基于 Vue SSR 的 HTML 模板文件。 │ │ ├── config.js (可選的) 配置文件的入口文件，也可以是 YML 或 toml。 │ │ └── enhanceApp.js (可選的) 客戶端應用的增強。 │ │ │ ├── README.md │ ├── guide │ │ └── README.md │ └── config.md │ └── package.json ``` ### 接下來我們開始填坑吧?? ??建議：vuepress能不能把結構生成?? 啊?老天 簡直步步驚心 NO.1 `cd docs && mkdir .vuepress ` NO.2 `cd .vuepress thouch config.js ` 在config.js???配置一下下面的代碼好吧 提前一起布置好吧：：如果你打算發布到 `https://<USERNAME>.github.io/<REPO>/`（也就是說你的倉庫在 `https://github.com/<USERNAME>/<REPO>`），則將 `base` 設置為 `"/<REPO>/"`。 ```js module.exports = { title: 'Hello VuePress', description: 'Just playing around' base: `/vue-blog/`, //配置你要放的倉庫的路徑或子路徑文件名 } ``` 運行起 dev server查看效果 ### 我們先把它部署到GitHub Pages先然后在細化它?? 查看一下根目錄的package.json????????下面的這段代碼 ```json { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs", "d": "bash deploy.sh" //順便把這個也配置了吧 這個是部署 npm run d } } ``` ???的話下一步了哦 在根目錄下生成`thouch deploy.sh` 1. 在你的項目中，創建一個如下的 `deploy.sh` 文件（請自行判斷去掉高亮行的注釋）: ```bash #!/usr/bin/env sh # 確保腳本拋出遇到的錯誤 set -e # 生成靜態文件 npm run docs:build # 進入生成的文件夾 cd docs/.vuepress/dist # 如果是發布到自定義域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # 如果發布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果發布到 https://<USERNAME>.github.io/<REPO> # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages cd - ``` —與官網一致 1. 在你項目的根目錄下創建一個名為 `.gitlab-ci.yml` 的文件，無論何時你提交了更改，它都會幫助你自動構建和部署： ```yaml image: node:9.11.1 pages: cache: paths: - node_modules/ script: - npm install - npm run docs:build artifacts: paths: - public only: - master ``` 基本上按照以上步驟走的話是沒問題的如果???疏漏歡迎??給我提issue以免誤導他人 —原創--- 阿龍的vuepress文檔 [?? 提意見 ??](https://github.com/ragnar-document/vue-blog/issues) 歡迎收看，但愿沒沒浪費你寶貴的時間～～