打造專屬雲筆記-學習筆記 開通雲伺服器(略) 安裝Vurpress 配置VuePress

課程介紹

#VuePress%E4%BB%8B%E7%BB%8D VuePress介紹

官網介紹：

https://www.vuepress.cn/guide/ https://www.vuepress.cn/guide/

VuePress 由兩部分組成：第一部分是一個極簡靜态網站生成器，它包含由 Vue 驅動的主題系統和插件 API，另一個部分是為書寫技術文檔而優化的預設主題，它的誕生初衷是為了支援 Vue 及其子項目的文檔需求。

每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也是以具有非常好的加載性能和搜尋引擎優化（SEO）。同時，一旦頁面被加載，Vue 将接管這些靜态内容，并将其轉換成一個完整的單頁應用（SPA），其他的頁面則會隻在使用者浏覽到的時候才按需加載。

#%E4%BD%BF%E7%94%A8VuePress%E7%9A%84%E5%A5%BD%E5%A4%84 使用VuePress的好處

#%E7%95%8C%E9%9D%A2%E7%AE%80%E6%B4%81%E4%BC%98%E9%9B%85 界面簡潔優雅

#%E5%AE%B9%E6%98%93%E4%B8%8A%E6%89%8B 容易上手

#%E5%AF%B9Markdwon%E5%BD%A2%E5%BC%8F%E5%85%BC%E5%AE%B9%E6%80%A7%E8%89%AF%E5%A5%BD%EF%BC%8C%E5%AE%B9%E6%98%93%E9%85%8D%E7%BD%AE%EF%BC%8C%E6%80%A7%E8%83%BD%E5%A5%BD 對Markdwon形式相容性良好，容易配置，性能好

#%E5%BC%80%E9%80%9A%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8-%E7%95%A5 開通雲伺服器(略)

#%E5%AE%89%E8%A3%85Vurpress 安裝Vurpress

#%E8%AE%BE%E7%BD%AE%E5%AE%89%E5%85%A8%E7%BB%84 設定安全組

#%E8%BF%9B%E5%85%A5%E8%87%AA%E5%B7%B1%E7%9A%84%E5%AE%9E%E4%BE%8B 進入自己的執行個體

#%E8%BF%9B%E5%85%A5%E6%9C%AC%E5%AE%9E%E4%BE%8B%E5%AE%89%E5%85%A8%E7%BB%84%E4%B9%9F%E5%B0%B1%E6%98%AF%E6%9C%80%E5%90%8E%E9%82%A3%E4%B8%AA 進入本執行個體安全組也就是最後那個

#%E7%82%B9%E5%87%BB%E9%85%8D%E7%BD%AE%E8%A7%84%E5%88%99 點選配置規則

#%E8%AE%BE%E7%BD%AE%E5%AE%89%E5%85%A8%E7%BB%84-1

按照上一步會出現這個

然後點選上面的添加安全組規則

添加22端口和8080端口

點選确定，8080一樣。

特别說明：0.0.0.0/0是所有人都可以通路，實際使用是不會這樣的，但是為了後面不報錯而且是個人學習是以這樣做。

#%E5%AE%89%E8%A3%85Node-js 安裝Node.js

#%E5%AE%89%E8%A3%85putty 安裝putty

安裝位址：

https://the.earth.li/~sgtatham/putty/latest/w64/putty.exe https://the.earth.li/~sgtatham/putty/latest/w64/putty.exe

跟着教程輸入自己的公網ip，就可以登入進去了

輸入root入上圖，然後輸入自己開始雲伺服器時的密碼即可成功登入。

#%E4%BE%9D%E6%AC%A1%E6%89%A7%E8%A1%8C%E4%B8%8B%E5%88%97%E5%91%BD%E4%BB%A4 依次執行下列指令

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就安裝成功了。

#%E5%AE%89%E8%A3%85VuePress 安裝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是配置資訊

#%E9%85%8D%E7%BD%AEVuePress 配置VuePress

#%E6%89%A7%E8%A1%8C%E4%BB%A5%E4%B8%8B%E6%AD%A5%E9%AA%A4 執行以下步驟

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

特别提醒，注意對齊，不然會報錯

然後再執行本地預覽就應該是這樣了

課程所學的就結束了，因為我使用的是hexo是以不再深入，如果想使用這個的話請去官網再進行學習。

如果想嘗試hexo可以跟我的教程

https://www.maolilan.top/article/541a8071.html https://www.maolilan.top/article/541a8071.html href="https://www.maolilan.top/article/7a56c169.html"> https://www.maolilan.top/article/7a56c169.html