VuePressBlog部署---那人少年

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官⽹。

原文章連結

https://blog.csdn.net/c2970/article/details/107849278