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

創建一個文件夾，名字為VuePressmkdir vuepress，進入到文件夾內部cd vuepress
然後創建package.json文件夾npm init -y，這個時候會創建出package.json文件，可以ls查看一下
修改package.json文件vi package.json
修改成這樣
保存，退出
接著創建文件夾 docs mkdir docs
進入到內部cd docs
創建文件echo '# Hello VuePress - first blog!' >README.md文件夾mkdir .vuepress進入到文件夾裡
創建文件夾和配置文件mkdir public和echo > config.js
回到最初的目錄cd ../../
然後啟動vuepressvuepress dev docs
打開瀏覽器輸入服務器公網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
---

效果如下

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

Leave a Reply Cancel reply