搭建部落格

	幾年前在小白階段使用過 WordPress + 阿里雲伺服器 搭建了自己的部落格，
也走了很多坑，從零摸坑最後也弄好了，也順便使用了阿里雲的一些服務，
但當時沒有記錄筆記的習慣，過了好久很多操作也遺忘了。
	加上伺服器過期了好多資料也沒有備份，那就重新搭一個快速上手的部落格，
想著怎麼也應該嘗試一些新的方法，剛好也瞭解到了尤大神的 Vuepress。因為也更好的支援 Vue

此文章內容將會抽時間持續更新ing，請嘗試不同時間段來參考。

準備工作

1、準備伺服器環境，或者最後部署到GitHub或碼雲託管

因本人常用阿里雲伺服器操作，有以下簡述步驟：

1.1、阿里雲官網購買伺服器，順便再阿里雲上買個域名

1.2、域名實名認證 + 伺服器繫結域名 + 備案網站（這些操作需要稽核時間，可以先跳過這步）

1.3、在自己的伺服器選擇 Linux centos版本 系統 （初始化）

1.4、需要node環境

1.4.1：可以在建立伺服器例項時初始化之前候選擇上（但提供的版本太低，最後也可以先升級下，升級node操作自行百度）

1.4.2：也可以在建立伺服器例項時候不安裝node環境（若選擇這步驟可以進行如下操作）

（1）開啟node中文官網（http://nodejs.cn/download/）
（2）右鍵複製 Linux二進位制（x64）連結。.tar.xz格式的
（3）開啟自己的伺服器，使用命令： ‘weget xxxxx（網址連結）’
（4）在該目錄下解壓，有兩層壓縮，下面解壓命令：

xz -d node-v8.11.3-linux-x64.tar.xz

tar -xvf node-v8.11.3-linux-x64.tar

（5）配置環境變數（nano 是一個命令列編輯器，你也可以使用vim、vi等命令）
sudo vim /etc/profile

複製下面兩行到剛開啟的profile檔案最底部(注意node的安裝地址 /root/node-v14.15.0-linux-x64/ 換成自己的)：

#node 8.11.3
export NODE_HOME=/root/node-v14.15.0-linux-x64
export PATH=$PATH:$NODE_HOME/bin

儲存後退出，再執行下面命令將環境變數生效：
source /etc/profile

(6)、將目錄軟連結到全域性環境下（命令後面的/usr/local/bin/node是固定的）

ln -s /root/node-v14.15.0-linux-x64/bin/node /usr/local/bin/node

ln -s /root/node-v14.15.0-linux-x64/bin/npm /usr/local/bin/npm

(7)、這樣安裝好了以後使用npm安裝的包(比如：ionic serve)，使用包的命令時可能會提示找不到命令，沒關係，在使用者目錄下終端執行下面命令(固定寫法)：

echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc

(8)、 這樣我們在所有使用者下，都可以使用npm，也可以使用npm安裝的包的命令。大功告成，成功的將nodejs安裝並配置到全域性環境下。

2、安裝寶塔

2.0、為什麼要安裝寶塔？

寶塔只是個輔助工具，日後運維操作可以很方便，對於不懂Linux指令的道友還是很友好的幫助。這裡只是對新手的建議，對於老手可以自己進行部署

2.1 、寶塔官網（https://www.bt.cn/download/linux.html）

若是阿里雲伺服器，建議先參考文章配置好開放的埠號：https://www.bt.cn/bbs/thread-2897-1-1.html

2.2、在伺服器中安裝寶塔

Centos版本輸入以下命令：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

安裝過程遇見 y 或 n 選項，直接選y

2.3、安裝成功後，你的伺服器上會出現外網地址和使用者名稱+密碼，開啟這個地址，然後輸入使用者和密碼

3、安裝 yarn

3.1、為什麼要安裝yarn，而不使用npm呢？

yarn和npm都是包管理工具，但是yarn是嶄新的，經過重新設計的npm客戶端，於2016年10月釋出，相比於npm，yarn在執行速度上有顯著的提升，安裝時間變少，功能上也有很多改進。

yarn雖然和nom一樣是本地快取，但是yarn無需網際網路連結就能安裝本地快取的依賴項，提供了離線模式，而這個是npm實現不了的。

yarn解決了由於語義版本控制而導致的npm的不確定性問題，通過安裝時建立的預設檔案，確保使用的庫的版本相同。

yarn增加了一些能讓開發人員並行化處理所有必需的操作，且通過新增了一些改進，使得執行速度有了顯著的提升，整個安裝時間也變得更少。

npm的輸出資訊比較冗長，相比之下，yarn簡潔很多。預設情況下，直觀且直接地列印出必要的資訊。

yarn的語義相對於npm更加清晰，主要是因為yarn改變了一些npm的命令名稱，看上去就更清晰了。

上面簡介了yarn作用和與npm的對比，但是這裡強制採用yarn工具

以下是Vuepress官網給的建議：

如果你的現有專案依賴了 webpack 3.x，我們推薦使用 Yarn 而不是 npm 來安裝 VuePress。因為在這種情形下，npm 會生成錯誤的依賴樹。

3.2、安裝yarn

這裡使用了npm進行安裝（也可以採用yum，wget等）

在安裝之前，先設定下npm的國內淘寶映象吧~

npm config set registry https://registry.npm.taobao.org

設定好，那麼開始安裝，如下：

npm i yarn -g

安裝完成後，可以檢視下版本，檢驗是否安裝成功

yarn -v

設定yarn國內映象

yarn config set registry https://registry.npm.taobao.org/

Vuepress 簡單使用

以下內容來有一部分自官網文件，我的這些內容是助你快速上手，而不是去copy官網文件

一些官方給的知識點和配置介紹我們先不看，先搭建好，看效果，有別的需求之後再去改動

當然你可以繼續參考我的文章，也可直接檢視官網的文件

Vuepress官網（https://www.vuepress.cn/）

初始化

1.0、先在本地主機上初始化（最後在部署到伺服器上），建立vuepress目錄，並進入

mkdir vuepress

cd vuepress

1.1、使用yarn工具，初始化

yarn init -y

1.2、將 VuePress 安裝為本地依賴

yarn add -D vuepress # npm install -D vuepress

1.3、建立你的第一篇文件

mkdir docs && echo '# Hello VuePress' > docs/README.md

1.4、在 package.json 中新增一些 scripts

此處我們把 docs 目錄作為 targetDir 下面所有的“檔案的相對路徑”都是相對於 docs 目錄的。

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

預設頁面路由地址如下：

檔案的相對路徑	頁面路由地址
/README.md	/
/guide/README.md	/guide/
/config.md	/config.html

1.5、在本地啟動伺服器

yarn docs:dev 

# npm run docs:dev

1.6、訪問內網（http://localhost:8080）

若出現如下圖，便是基本的搭建成功

目錄結構

VuePress 遵循 “約定優於配置” 的原則，推薦的目錄結構如下：

.
├── docs
│   ├── .vuepress (可選的)   '用於存放全域性的配置、元件、靜態資源等。'
│   │   ├── components (可選的)  '該目錄中的 Vue 元件將會被自動註冊為全域性元件'
│   │   ├── theme (可選的)  '用於存放本地主題'
│   │   │   └── Layout.vue
│   │   ├── public (可選的)  '靜態資源目錄'
│   │   ├── styles (可選的)  '用於存放樣式相關的檔案'
│   │   │   ├── index.styl  '將會被自動應用的全域性樣式檔案，會生成在最終的 CSS 檔案結尾，具有比預設樣式更高的優先順序'
│   │   │   └── palette.styl  '用於重寫預設顏色常量，或者設定新的 stylus 顏色常量'
│   │   ├── templates (可選的, 謹慎配置)  '儲存 HTML 模板檔案。'
│   │   │   ├── dev.html  '用於開發環境的 HTML 模板檔案'
│   │   │   └── ssr.html  '構建時基於 Vue SSR 的 HTML 模板檔案。'
│   │   ├── config.js (可選的)  '配置檔案的入口檔案，也可以是 YML 或 toml。'
│   │   └── enhanceApp.js (可選的)  '客戶端應用的增強'
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

官網也給了以下提示：

當你想要去自定義 templates/ssr.html 或 templates/dev.html 時，最好基於 預設的模板檔案 (opens new window)來修改，否則可能會導致構建出錯

基本配置

首先在你的文件目錄下（也就是docs目錄）建立一個 .vuepress 目錄，所有 VuePress 相關的檔案都將會被放在這裡。你的專案結構可能是這樣：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

README.md檔案中新增的內容如下：

---
home: true 
heroImage: https://jine.oss-cn-beijing.aliyuncs.com/image/weimei.jpg
actionText: ↓
actionLink: /zh/guide/
heroText: Write the Code,Change the World~
tagline: 喜歡籃球,脾氣賊棒√ 
features:
- title: 讚賞  
- details: 點點手指喲~
footer: MIT Licensed | Copyright © 2020-present Evan You
---

Front-matter 是檔案最上方以 --- 分隔的區域，用於指定個別檔案的變數

VuePress 提供了對 YAML front matter (opens new window)開箱即用的支援，這些資料可以在當前 markdown 的正文，或者是任意的自定義或主題元件中使用。

注意：copy時候，不要把 — 給丟掉 ，這就類似於寫法格式，可不能丟掉

一個 VuePress 網站必要的配置檔案是 .vuepress/config.js，它應該匯出一個 JavaScript 物件：

你可以先把我大概配置頁面基本的內容copy，先把頁面跑起來

module.exports = {
    title: 'Jine',  //標題
    keywords: '前端開發',
    description: '前端開發 Jine 的個人部落格',
    repo: 'https://github.com/zeroonbush/blog.git',  //倉庫地址
    base: '/docs/',  // 配合部署專案
    head: [
        ['link', { rel: 'png', href: '/img/熊貓.png' }]
    ],
    lastUpdated: 'Last Updated',
    themeConfig: {  //主題配置
        // 部落格配置
        blogConfig: {
            category: {
                location: 2,     // 在導航欄選單中所佔的位置，預設2
                text: 'Category' // 預設文案 “分類”
            },
            tag: {
                location: 3,     // 在導航欄選單中所佔的位置，預設3
                text: 'Tag'      // 預設文案 “標籤”
            }
        },
        logo: '/img/部落格專家.png',
        nav: [  //導航欄
            { text: '首頁', link: '/' },
            { text: '碼趣', link: '/code/' },
            { text: '讚賞', link: '/money/' },
            { text: 'About me', link: '/me/' },
            { text: 'CSDN', link: 'https://blog.csdn.net/weixin_42760849' }
        ],
        sidebar: 'auto',
        displayAllHeaders: true, // 預設值：false
    }
}

/*
以下例舉倆個引數的描述如下：

title
型別: string
預設值: undefined
網站的標題，它將會被用作所有頁面標題的字首，同時，預設主題下，它將顯示在導航欄（navbar）上。

#description
型別: string
預設值: undefined
網站的描述，它將會以 <meta> 標籤渲染到當前頁面的 HTML 中。

*/

上述的配置好後，執行起 dev server

如下圖：

更多配置和引數描述參見官網的 => 配置 來檢視所有可配置的選項。

主題配置

在 VuePress 中，目前自帶了一個預設的主題（正是你現在所看到的），它是為技術文件而設計的。同時，預設主題提供了一些選項，讓你可以去自定義導航欄（navbar）、 側邊欄（sidebar）和 首頁（homepage） 等，詳情請參見 預設主題 。

如果你想開發一個自定義主題，可以參考 自定義主題。

主題配置我日後的文章單獨去更新

我先建議想要快速搭建個好看的部落格，可以先用別人寫好的部落格主題（

）

以下內容參考這個部落格主題去搭建，我想說的是先做到用會別人的，再去設計自己的主題讓別人用

vuepress-theme-reco 主題使用