VuePress安裝--Drizzt's Blog

VuePress

輕量級文檔伺服器，可以用做部落格和技術文檔，可以部署在Github

VuePress優點

• 界面簡潔優雅
• 支援Markdown文法
• 渲染靜态HTML，性能優異
• 遠端安裝VuePress

1.設定安全組

• 登入到阿裡雲伺服器
• 進入控制台，選擇ecs
• 選擇網絡與安全
• 選擇安全組，選擇執行個體，進去
• 在入方向選擇手動建立
• 協定選擇自定義TCP，端口範圍為22/22和8080/8080，授權對象0.0.0.0/0，儲存
• 退出到執行個體與鏡像裡，選擇執行個體，檢視公網ip
• 可以使用XSHELL，遠端連接配接公網ip，輸入賬号密碼測試連接配接

2.安裝node.js（官方那個太麻煩了，頂不住，頂不住）

• 在官方網站查詢你需要的node的版本資源 https://github.com/nodesource/distributions
• 給系統添加你需要安裝的node資源curl -sL https://rpm.nodesource.com/setup_10.x | bash -
• 安裝ndoe.jsyum install -y nodejs
• 輸入node -v和npm -v檢視是否已經安裝上了，以及版本是否正确

3.安裝VuePress

• 配置node.js的鏡像（國内通路國外太慢了，依舊頂不住）npm config set registry " https://registry.npm.taobao.org "
• 輸入npm config get registry檢視是否配置成功
• 安裝yarn包管理器npm install -g yarn（官方有倆種安裝VuePress的方法，yarn的方法比npm直接安裝的速度快）
• 通過yarn安裝VuePressnpm install yarn -g
• 這個時候出現錯誤，可能是node版本太低了，更新一下node版本n stable（更新好慢啊）
• 重新安裝
• 輸入VuePress -v檢視是否安裝成功

VuePress目錄結構

配置VuePress

1. 建立一個檔案夾，名字為VuePressmkdir vuepress，進入到檔案夾内部cd vuepress
2. 然後建立package.json檔案夾npm init -y，這個時候會建立出package.json檔案，可以ls檢視一下
3. 修改package.json檔案vi package.json
4. 修改成這樣
5. 儲存，退出
6. 接着建立檔案夾 docs mkdir docs
7. 進入到内部cd docs
8. 建立檔案echo '# Hello VuePress - first blog!' >README.md檔案夾mkdir .vuepress進入到檔案夾裡
9. 建立檔案夾和配置檔案mkdir public和echo > config.js
10. 回到最初的目錄cd ../../
11. 然後啟動vuepressvuepress dev docs

12. 打開浏覽器輸入伺服器公網ip及端口号8080，即可看見剛剛寫入的hello VuePress

    個性化定制

修改README.md⽂件，将原來的内容删除後，将以下内容拷貝進去

home: true
heroText: Vue技術部落格初試
tagline: 項⽬目結構，關注讨論，每⽇日分享
actionText: 每⽇日更更新 →
actionLink: /testlink/
features:
- title: 項⽬目結構
details: 以 Markdown 為中⼼心的項⽬目結構，以最少的配置幫助你專注于寫作。
- title: 關注讨論
details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使⽤用 Vue 元件，同
時可以使⽤用 Vue 來開發⾃自定義主題。
- title: 每⽇日分享
details: VuePress 為每個⻚頁⾯面預渲染⽣生成靜态的 HTML，同時在⻚頁⾯面被加載的
時候，将作為 SPA 運⾏行行。
footer: LearnVueonECS Licensed | Copyright © 2020-present
---           

效果如下

你也可以自己繼續換主題，定制插件讓樣式更多樣，在官網上就有介紹