課程介紹
VuePress介紹
官網介紹：https://www.vuepress.cn/guide/
- VuePress 由兩部分組成：第一部分是一個極簡靜態網站生成器，它包含由 Vue 驅動的主題系統和插件 API，另一個部分是為書寫技術文檔而優化的默認主題，它的誕生初衷是為了支持 Vue 及其子項目的文檔需求。
- 每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優化（SEO）。同時，一旦頁面被加載，Vue 將接管這些靜態內容，並將其轉換成一個完整的單頁應用（SPA），其他的頁面則會只在用戶瀏覽到的時候才按需加載。
- 使用VuePress的好處
- 界面簡潔優雅
- 容易上手
- 對Markdwon形式兼容性良好，容易配置，性能好
開通雲服務器(略) - 安裝Vurpress
- 設置安全組
進入自己的實例
進入本實例安全組也就是最後那個
點擊配置規則
設置安全組
按照上一步會出現這個
然後點擊上面的添加安全組規則
添加22端口和8080端口
點擊確定，8080一樣。
特別說明：0.0.0.0/0是所有人都可以訪問，實際使用是不會這樣的，但是為了後面不報錯而且是個人學習所以這樣做。
安裝Node.js
安裝putty
安裝地址：
https://the.earth.li/~sgtatham/putty/latest/w64/putty.exe
跟著教程輸入自己的公網ip，就可以登錄進去了
輸入root入上圖，然後輸入自己開始雲服務器時的密碼即可成功登錄。
依次執行下列命令
wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz
sudo mkdir -p /usr/local/lib/nodejs
sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs
cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
./node -v
這時應該出現
然後配置環境變量，這句話執行在公告的文件夾下也就是…64/bin那個
vim ~/.bash_profile
然後添加
PATH=$PATH:$HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
然後保存，vim是按下esc然後：wq
接著重載一下
source ~/.bash_profile
然後 cd
進入其他目錄進行測試
cd
node -v
npm version
npx -v
這時應該出現
到此node.js就安裝成功了。
安裝VuePress
這個是換淘寶源加速
npm config set registry https://registry.npm.taobao.org
npm install -g vuepress
mkdir try_blogs
cd try_blogs
這個是初始化
npm init -y
其中try_blogs是我們將來博客的根目錄
最後一個package.json是配置信息
配置VuePress
執行以下步驟
vim package.json
修改成為
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
截圖如下：
接著執行
mkdir docs
cd docs
mkdir .vuepress
echo '# Hello VuePress - first blog!' >README.mdcd .vuepress
echo >config.js
mkdir public
完成後實現各個的目錄結構，也就是
回到try_blogs根目錄
執行
vuepress dev docs
這個相當於hexo的hexo s，也就是本地預覽，這個是在8080端口
進入http://你的公網ip:8080/就可以預覽效果了
這個時候應該是這樣
然後我們來複雜化一下
進入README.md文件，這個之後就是我們的首頁，之前已經提到，vim 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
特別提醒，注意對齊，不然會報錯
然後再執行本地預覽就應該是這樣了