Class 1 打造專屬雲筆記

一. 開通雲伺服器

這裡由於之前已經開通過便不做演示

二. 安裝 VuePress 程式

1.配置安全組

由於ssh連線需要開放22埠、vuepress預設使用8080埠，所以需要在安全組中釋放相應埠

進入安全組

手動新增入方向

2.安裝Node.js

使用Xshell連線ecs

執行

wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz

下載Node.js安裝包

建立安裝目錄

sudo mkdir -p /usr/local/lib/nodejs

將⼆進位制⽂件解壓到要安裝⽬錄

sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs

解壓完成

使⽤檢視node.js版本號命令驗證是否解壓成功

進⼊⽬錄：

cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

執⾏：

 ./node -v

結果如下：

修改環境變數量，使得能在任意⽬目錄下執⾏行行node命令

vim ~/.bash_profile

source ~/.bash_profile

進入其他目錄驗證

3.安裝VuePress

全域性安裝

npm config set registry https://registry.npm.taobao.org
npm install -g vuepress
 

建立⼀個⽂件夾作為⽬錄

mkdir try_blogs
cd try_blogs

項⽬初始化

npm init -y

初始化後會⽣成⼀個package.json⽂件

之後進⼊配置步驟。

三. 配置 VuePress

基本配置步驟

vim package.json

修改scripts中的內容如下

"scripts": {
	"docs:dev": "vuepress dev docs",
	"docs:build": "vuepress build docs"
}

在當前⽬錄中建立⼀個⽂檔⽬錄

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

工作目錄如下

回到try_blogs⽬錄，執⾏命令

vuepress dev docs  

在瀏覽器中運⾏： ECS公⽹IP:8080

發現打不開

關閉防火牆

systemctl stop firewalld.service

可以打開了

開啟另一個終端視窗

修改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
---

重新整理頁面，什麼都沒有。。。

重新執行一下vuepress 報錯

應該是貼上問題

查詢網上相似配置，得到結果如下

---
home: true
heroImage: /favicon.ico
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 簡潔至上
  details: 以 Markdown 為中心的專案結構，以最少的配置幫助你專注於寫作。
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 元件，同時可以使用 Vue 來開發自定義主題。
- title: 高效能
  details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被載入的時候，將作為 SPA 執行。
footer: MIT Licensed | Copyright © 2018-present xxxxxx
---

再次貼上執行即可開啟示例頁面