VuePress介紹
VuePress 由兩部分組成:第一部分是一個極簡靜態網站生成器,它包含由 Vue 驅動的主題系統和插件 API,另一個部分是為書寫技術文檔而優化的默認主題,它的誕生初衷是為了支持 Vue 及其子項目的文檔需求。
每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML,也因此具有非常好的加載性能和搜索引擎優化(SEO)。同時,一旦頁面被加載,Vue 將接管這些靜態內容,並將其轉換成一個完整的單頁應用(SPA),其他的頁面則會只在用戶瀏覽到的時候才按需加載。
VuePress優點
1.界面簡潔優雅,易於操作
2.支持Markdown語法
3.渲染靜態的HTML性能優越
環境準備
阿里雲ECS
配置安全組
開放SSH(22)、RDP(3389)、8080(Vuepress的默認端口)
安裝node.js
1、登錄後登錄到ECS之後選用SSH工具,執行如下命令,下載Node.js 13.9.0 64位安裝包(8.0)以上都可以
wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz
2、創建Node.js安裝⽬錄
sudo mkdir -p /usr/local/lib/nodejs
3、將文件解壓到相應目錄
sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs
4、打開配置文件修改環境變量(在任意目錄下執⾏node命令)
vim ~/.bash_profile 保存修改,然後重載一下:source ~/.bash_profile
PATH =P A T H : PATH :PATH:HOME/bin:/user /local /lib /node.js -v13.9.0- linux -x64/bin
安裝VuePress
1.安裝鏡像
配置默認鏡像網站:npm config set registry https://registry.npm.taobao.org 下載安裝鏡像:npm install -g vuepress
2、創建目錄文件
mkdir try_blogs cd try_blogs npm init -y //項⽬初始化
3、配置vuepress
設置package.json的腳本配置
vim package.json
`並按以下所示修改scripts中的內容
注:VuePress中有兩個命令:
vuepress dev docs — 運⾏本地服務。通過訪問(http://localhost:8080)即可預覽⽹站
vuepress build docs — ⽤來⽣成靜態⽂件。
默認情況下,該靜態⽂件放置在docs/.vuepress/dist⽬錄中。
也可以在docs/.vuepress/config.js中的dest字段來修改默認存放⽬錄。
在當前⽬錄中創建⼀個⽂檔⽬錄:
mkdir docs
創建.vuepress⽬錄:
cd docs
mkdir .vuepress
新建⼀個md⽂件
echo ‘# Hello VuePress - first blog!’ >README.md
創建config.js配置⽂件
cd .vuepress
echo >config.js
創建public⽬錄
mkdir public
VuePress目錄結構
在這裡插入圖片描述
配置VuePress
創建一個文件夾,名字為VuePressmkdir vuepress,進入到文件夾內部cd vuepress
然後創建package.json文件夾npm init -y,這個時候會創建出package.json文件,可以ls查看一下
修改package.json文件vi package.json
修改成這樣
“scripts”: {
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”
},
保存,退出
接著創建文件夾 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
⾄此,完成了VuePress在阿⾥雲ECS上的搭建和初步配置,更多VuePress的
使⽤⽂檔可參考VuePress官⽹。