打造專屬雲筆記

前提準備

1. 首先你需要一臺雲伺服器，這裡推薦阿里雲的雲伺服器，阿里雲的伺服器提供多個地域和多種效能的伺服器可供選擇，擁有彈性計算伺服器的服務，可以根據自身業務的需要，隨時對計算資源進行縱向和橫向的伸縮，大幅度減小資源浪費。
2. 開啟阿里雲實例安全組的8080埠許可權
3. 需要一臺能夠訪問外網的電腦

連線阿里雲伺服器

有多種方法可以連線上阿里雲的伺服器：

1. 在阿里雲控制檯連線伺服器

   1. 進入控制檯，選擇雲伺服器ECS，選擇你的雲伺服器例項

   2. 選擇遠端連線，輸入賬號密碼進入連線。

2. 本地ssh連線雲伺服器

   1. 開啟ssh連線軟體，輸入雲服務ip地址連線

下載並安裝nodejs

下載並解壓

1. 輸入命令

   mkdir nodejs
   cd nodejs
   wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0.tar.gz
   tar -zxvf node-v13.9.0.tar.gz
   

2. 解壓之後會出現一個資料夾，進入該資料夾

   cd node-v13.9.0-linux-x64/bin
   

3. 執行命令

   ./node -v
   

4. 如果解壓成功，那麼就會出現nodejs的版本號，反之則是未成功，重新下載解壓即可

配置環境變數

1. 輸入命令pwd，記下當前node檔案所在目錄

   pwd
   /root/nodejs/node-v13.9.0-linux-x64/bin
    
   

2. 輸入命令，修改環境變數，

   vim ~/.bash_profil
   

   找到 PATH=$PATH:$HOME/bin，在PATH=$PATH:$HOME/bin 後⾯面新增路路徑:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin，結果為：PATH=$PATH:$HOME/bin:/root/nodejs/node-v13.9.0-linux-x64/bin

3. 儲存修改，然後過載一下：

   source ~/.bash_profile

4. 進入其他目錄，驗證是否成功加入了環境變數

   cd
   node -v
   

5. 如果配置成功，那麼就會出現nodejs的版本號，反之則是未成功，重新配置即可

安裝Vuepress

1. 使用npm安裝Vuepress，這裡使用淘寶映象源獲得速度更快的體驗

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

2. 建立一個資料夾

   mkdir blog
   cd blog
   

3. 初始化專案

   npm init -y
   

4. 初始化之後會生成一個package.json檔案

配置Vuepress

1. 設定package.json的指令碼配置

   vim package.json
   

2. 修改scripts中的內容如下:

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

3. 儲存並退出

4. 在當前目錄中建立一個文件目錄

   mkdir docs
   

5. 進入docs目錄再建立一個.vuepress目錄

   cd docs
   mkdir .vuepress
   

6. 新建一個markdown檔案，以後文章就存放在docs資料夾內了

   touch README.md
   

7. 開啟README.md檔案

   vim README.md
   

8. 寫入以下內容：

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

9. 建立config.js配置檔案

   cd .vuepress
   touch config.js
   

10. 建立public檔案

    mkdir public
    

11. 完成後的總目錄如下:

    try_blogs 
    ├─ docs //以後要在這⾥⾯寫⽂章，直接在此⽂件夾下新建⽂件夾，然後再建 md⽂檔就⾏，連結會⾃動⽣成 
    │  ├─ README.md // 這個將會是我們以後的⾸頁 
    │  └─ .vuepress // 這個⾥⾯會存放⼀些配置和元件 
    │     └─ public  // 靜態⽂件存放地 
    │     └─ config.js //配置⽂件，以後的所有配置基本都在這⾥寫 
    └─ package.json 
    

12. 回到blog資料夾下:

    cd /root/blog
    

13. 執行命令

    vuepress dev docs
    

欣賞部落格

1. 通過雲服務的ip+埠訪問你的部落格