一：課程介紹
VuePress是受歡迎的極簡靜態網站生成器，它還未書寫技術文檔而優化的默認主題，非常適合自己的博客與雲筆記功能。本教程將爲學網站建設的開發者介紹使用阿里雲ECS，快速搭建、管理VuePress網站的技能。
本教程的需要的環境是linux系統
二：安裝VuePress
1.連接ECS服務器
- 打開系統自帶的終端工具。
- Windows：CMD或Powershell。
- MAC：Terminal。
- 出現如下結果說明已安裝。
查看ssh版本
3.否則請下載安裝OpenSSH。
4. 在終端中輸入連接命令ssh [username]@[ipaddress]。您需要將其中的username和ipaddress替換爲第1小節中創建的ECS服務器的登錄名和公網地址。例如：
ssh root@123.123.123.123
命令顯示結果如下：
-
輸入yes。
-
同意繼續後將會提示輸入登錄密碼。 密碼爲已創建的雲服務的ECS的登錄密碼。
登錄成功後會顯示如下信息。
2.設置實例安全組
添加公網入方向：SSH（22）授權對象爲：0.0.0.0/0
開放端口8080，授權對象爲:0.0.0.0/0
3.安裝Node.js
1、登錄到ECS之後，執⾏行行如下命令，下載Node.js 13.9.0 64位安裝包
wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz
如下圖所示：
3、創建Node.js安裝⽬錄
sudo mkdir -p /usr/local/lib/nodejs
4、將⼆進制⽂件解壓到要安裝⽬錄
sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs
5、使⽤查看node.js版本號命令驗證是否解壓成功
進⼊⽬錄：cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
執⾏行行：./node -v
結果如下：
6、修改環境變量量，使得能在任意⽬目錄下執行node命令
vim ~/.bash_profile
找到 PATH=$PATH:$HOME/bin，在PATH=$PATH:$HOME/bin 後⾯面添加路路 徑:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin，結果爲：
PATH=$PATH:$HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
保存修改，然後重載⼀一下：source ~/.bash_profile
**注意：**Linux系統中編輯文件的方式是vim 文件名，i或o 進行文件編輯，esc退出文件編輯。:wq保存文件。:q!強制退出不保存。
7、到其他⽬錄下驗證
cd
node -v
npm version
npx -v
截圖如下：
⾄此，nodejs安裝完畢
4.安裝VuePress
1.全局安裝
爲加快下載安裝速度，採⽤淘寶鏡像。
npm config set registry https://registry.npm.taobao.org
npm install -g vuepress
2、創建⼀個⽂件夾作爲⽬錄
mkdir try_blogs cd try_blogs
3、項⽬初始化
npm init -y
初始化後會⽣成⼀個package.json⽂件 之後進⼊配置步驟。
三：配置VuePress
1、基本配置步驟
1、設置package.json的腳本配置
vim package.json
修改scripts中的內容如下：
“scripts”: {
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”
},
截圖如下：
2、在當前⽬錄中創建⼀個⽂檔⽬錄
mkdir docs
3、創建.vuepress⽬錄
cd docs
mkdir .vuepress
4、新建⼀個md⽂件
echo '# Hello VuePress - first blog!' >README.md
5、 創建config.js配置⽂件
cd .vuepress echo >config.js
6、創建public⽬錄
mkdir public
7、完成後的⼯作⽬錄如下：
8、回到try_blogs⽬錄，執⾏命令
vuepress dev docs
注：VuePress中有兩個命令:
vuepress dev docs 命令運⾏本地服務，通過訪問(http://localhost:8080)即可預覽⽹ 站
vuepress build docs 命令⽤來⽣成靜態⽂件，默認情況下，放置在 docs/.vuepress/dist⽬錄中，當然你也可以在docs/.vuepress/config.js中的dest字段 來修改默認存放⽬錄。在這⾥將兩個命令封裝成腳本的⽅式，直接使⽤npm run docs:dev和npm run docs:build即可。
11、在瀏覽器中運⾏： http://服務器公⽹IP:8080
2.首頁配置示例
1.首頁配置：修改README.md⽂件，將原來的內容刪除後，將以下內容拷貝進去
---
home: true
heroText: Vue技術博客初試
tagline: 項目結構，關注討論,每日分享
actionText: 每日更新 ->
actionLink: /testlink/
features:
- title: 項目結構
details: 以Markdown爲中心的項目結構，以最少的配置幫助你專注於寫作。
- title: 關注討論
details: 享受Vue+webpack的開發經驗，在Markdown中使用Vue組件，同時可以使用Vue來j開發自定義主題。
- title: 每日分享
details: VuePress 爲每個頁面渲染生成靜態的HTML，同時在頁面被加載的時候，將作爲SQA運行。許遠志
footer: LearnVueonECS Lisensed | Copy @2020-present
---
效果圖：
3、⾄此，完成了VuePress在阿⾥雲ECS上的搭建和初步配置，更多VuePress的 使⽤⽂檔可參考VuePress官⽹。