使用vuepress快速搭建個人博客(完整配置與源碼)

大家都說yarn比npm好，今天全局安裝yarn嘗試下 cnpm install -g yarn 安裝完成後，查看yarn版本 yarn --version 項目搭建安裝vuepress yarn global add vuepress 初始化項目創建項目目錄blog mkdir blog cd ...

大家都說yarn比npm好，今天全局安裝yarn嘗試下

cnpm install -g yarn

安裝完成後，查看yarn版本

yarn --version

項目搭建

安裝vuepress

yarn global add vuepress

初始化項目

創建項目目錄blog

mkdir blog
cd blog

初始化

yarn init -y

初始化完成後, 會創建一個package.json。在package.json中, 配置啟動命令

{
  "name": "blog",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
 }
}

創建docs目錄, 主要用於放置我們寫的.md類型的文章以及.vuepress相關的配置

mkdir docs

接著在docs文件夾中創建.vuepress文件夾

cd docs
mkdir .vuepress

頁面具體內容配置

新建一個總的配置文件config.js, 這個文件的名字是固定的.

cd .vuepress
touch config.js

我用windows，沒有touch命令，直接手動創建了……

module.exports = {
  title: 'cyy的博客',
  description: '專註 Node.js 技術棧分享，從前端到Node.js再到資料庫',
}

如果這時運行yarn docs:dev, 會出現頁面404頁面,vuepress預設打開的是docs下的readme.md文件, 由於你沒有創建,所以找到的是vuepress預設提供的404頁面, 關於這有點,我們藉助vue-devtools工具來查看一下vue的結構

在docs目錄下創建README.md文件, 再運行,就可以看到運行起來的效果

vuepress使用markdown語法，不會的就先去菜鳥教程簡單熟悉下：https://www.runoob.com/markdown/md-tutorial.html

設置封面頁

此時README文件中沒有內容,封面頁是空的, 我們可以通過在這個markdown文件中寫一些內容, 同時官方也給我們提供了封面頁的模板(個人覺得還是比較實用的):

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

配置導航欄nav

在config.js中添加:

  themeConfig:{
    nav: [
      {text: "主頁", link: "/"      },
      { text: "node", link: "/node/" },
      { text: "前端", link: "/webframe/"},
      { text: "資料庫", link: "/database/"   },
      { text: "android", link: "/android/"   },
      { text: "面試問題", link: "/interview/" }
    ]
  }

如果想要展示二級導航, 可以這樣配置:

themeConfig:{
  nav: [{text: "主頁", link: "/"      },
      { text: "node", link: "/node/" },
      { text: "前端", 
        items: [ 
          { text: "html", link:"/web/html/"},
          { text: "css", link:"/web/css/"},
          ]
      },
      { text: "資料庫", link: "/database/"   },
      { text: "android", link: "/android/"   },
      { text: "面試問題", link: "/interview/" }
    ],
}

效果如圖所示:

註意：改完代碼後有時並不能自動刷新，需要終止後重新運行

ctrl+c
cd blog
yarn docs:dev

當你使用上面的方式配置nav時, 目錄結構最好和我創建的一樣項目目錄結構如下:

yarn install

配置側邊欄slider

1.自動獲取側邊欄內容

如果你希望自動生成當前頁面標題的側邊欄, 可以在config.js中配置來啟用

// .vuepress/config.js
module.exports = {
  themeConfig:{
    sidebar: 'auto',
    // sidebarDepth: 1 
  }
}

2.展示每個頁面的側邊欄

如果你希望為不同的頁面組顯示不同的側邊欄, 就和官網一樣, 點擊指南顯示的是對應的側邊欄,目前目錄有node \ database \ web等

module.exports = {
  themeConfig:{
    sidebar:{
      "/node/":[
        ["", "node目錄"],
        ["path", "作為前端也需要知道的路徑知識"],
        ["stream", "node核心模塊-stream"]
      ],
      "/web/":[
        ["", "前端"],
        {
          title: "css",
          name: "css",
          collabsable: false,
          children: [
            ["css/", "目錄"],
            ['css/1', "css常考面試題"]
          ]
        }
      ]
    }
  }
}

這裡我在node目錄下新建了一個index.md

## 前言
寫完上一篇文章[想學Node.js，stream先有必要搞清楚](https://juejin.im/post/5d25ce36f265da1ba84ab97a)
留下了懸念，`stream`對象數據流轉的具體內容是什麼？本篇文章將為大家進行深入講解。


## Buffer探究 
看一段之前使用`stream`操作文件的例子：
```JavaScript
var fileName = path.resolve(__dirname, 'data.txt');
var stream=fs.createReadStream(fileName);
console.log('stream內容',stream);  
stream.on('data',function(chunk){
    console.log(chunk instanceof Buffer)
    console.log(chunk);
})
```
看一下列印結果，發現第一個stream是一個對象 ，截圖部分內容。

![](https://user-gold-cdn.xitu.io/2019/7/17/16bfd60a4f3b2069?w=872&h=722&f=jpeg&s=101462)
第二個和第三個列印結果，

![](https://user-gold-cdn.xitu.io/2019/7/17/16bfd601607b160c?w=1372&h=80&f=jpeg&s=34184)
Buffer對象，類似數組，它的元素為16進位的兩位數，即0到255的數值。可以看出stream中流動的數據是Buffer類型，二進位數據，接下來開始我們的Buffer探索之旅。

## 什麼是二進位
二進位是電腦最底層的數據格式，字元串，數字，視頻，音頻，程式，網路包等，在最底層都是用二進位來進行存儲。這些高級格式和二進位之間，都可以通過固定的編碼格式進行相互轉換。

例如，C語言中int32類型的十進位整數（無符號），就占用32bit即4byte，十進位的3對應的二進位就是`00000000 00000000 00000000 00000011`。字元串也是同理，可以根據ASCII編碼規則或者unicode編碼規則（如utf-8）等和二進位進行相互轉換。總之，電腦底層存儲的數據都是二進位格式，各種高級類型都有對應的編碼規則和二進位進行相互轉換。

## node中為什麼會出現Buffer這個模塊

在最初的`javascript`生態中，`javascript`還運行在瀏覽器端，對於處理Unicode編碼的字元串數據很容易，但是對於處理二進位以及非`Unicode`編碼的數據無能為力，但是對於`Server`端操作`TCP/HTTP`以及`文件I/O`的處理是必須的。我想就是因此在`Node.js`裡面提供了`Buffer`類處理二進位的數據，可以處理各種類型的數據。

Buffer模塊的一個說明。
> 在Node.js裡面一些重要模塊net、http、fs中的數據傳輸以及處理都有Buffer的身影，因為一些基礎的核心模塊都要依賴Buffer，所以在node啟動的時候，就已經載入了Buffer，我們可以在全局下麵直接使用Buffer，無需通過require()。且 Buffer 的大小在創建時確定，無法調整。


## Buffer創建

在 `NodeJS v6.0.0`版本之前，`Buffer`實例是通過 Buffer 構造函數創建的，即使用 new 關鍵字創建，它根據提供的參數返回不同的 Buffer，但在之後的版本中這種聲明方式就被廢棄了，替代 new 的創建方式主要有以下幾種。

#### 1. Buffer.alloc 和 Buffer.allocUnsafe(創建固定大小的buffer)

用 `Buffer.alloc` 和 `Buffer.allocUnsafe` 創建 Buffer 的傳參方式相同，參數為創建 Buffer 的長度，數值類型。

```JavaScript
// Buffer.alloc 和 Buffer.allocUnsafe 創建 Buffer
// Buffer.alloc 創建 Buffer,創建一個大小為6位元組的空buffer，經過了初始化
let buf1 = Buffer.alloc(6);

// Buffer.allocUnsafe 創建 Buffer，創建一個大小為6位元組的buffer，未經過初始化
let buf2 = Buffer.allocUnsafe(6);

console.log(buf1); // <Buffer 00 00 00 00 00 00>
console.log(buf2); // <Buffer 00 e7 8f a0 00 00>
```

通過代碼可以看出，用 `Buffer.alloc` 和 `Buffer.allocUnsafe` 創建` Buffer` 是有區別的，`Buffer.alloc` 創建的 `Buffer` 是被初始化過的，即 `Buffer` 的每一項都用 00 填充，而 `Buffer.allocUnsafe` 創建的 Buffer 並沒有經過初始化，在記憶體中只要有閑置的 Buffer 就直接 “抓過來” 使用。

`Buffer.allocUnsafe` 創建 `Buffer` 使得記憶體的分配非常快，但已分配的記憶體段可能包含潛在的敏感數據，有明顯性能優勢的同時又是不安全的，所以使用需格外 “小心”。

#### 2、Buffer.from(根據內容直接創建Buffer)

> Buffer.from(str,  ) 
支持三種傳參方式：

- 第一個參數為字元串，第二個參數為字元編碼，如 `ASCII`、`UTF-8`、`Base64` 等等。
- 傳入一個數組，數組的每一項會以十六進位存儲為 `Buffer` 的每一項。
- 傳入一個` Buffer`，會將 `Buffer` 的每一項作為新返回 `Buffer` 的每一項。

**說明:`Buffer`目前支持的編碼格式**

- ascii - 僅支持7位ASCII數據。
- utf8 - 多位元組編碼的Unicode字元
- utf16le - 2或4個位元組，小端編碼的Unicode字元
- base64 - Base64字元串編碼
- binary - 二進位編碼。
- hex - 將每個位元組編碼為兩個十六進位字元。

##### 傳入字元串和字元編碼：
```JavaScript
// 傳入字元串和字元編碼
let buf = Buffer.from("hello", "utf8");

console.log(buf); // <Buffer 68 65 6c 6c 6f>
```
##### 傳入數組：


```JavaScript
// 數組成員為十進位數
let buf = Buffer.from([1, 2, 3]);

console.log(buf); // <Buffer 01 02 03>
```


```JavaScript
// 數組成員為十六進位數
let buf = Buffer.from([0xe4, 0xbd, 0xa0, 0xe5, 0xa5, 0xbd]);

console.log(buf); // <Buffer e4 bd a0 e5 a5 bd>
console.log(buf.toString("utf8")); // 你好
```

在 `NodeJS` 中不支持 `GB2312` 編碼，預設支持 `UTF-8`，在 `GB2312` 中，一個漢字占兩個位元組，而在 `UTF-8` 中，`一個漢字`占三個位元組，所以上面 “你好” 的 `Buffer` 為 6 個十六進位數組成。


```JavaScript
// 數組成員為字元串類型的數字
let buf = Buffer.from(["1", "2", "3"]);
console.log(buf); // <Buffer 01 02 03>
```

傳入的數組成員可以是任何進位的數值，當成員為字元串的時候，如果值是數字會被自動識別成數值類型，如果值不是數字或成員為是其他非數值類型的數據，該成員會被初始化為 00。

創建的 `Buffer` 可以通過 `toString` 方法直接指定編碼進行轉換，預設編碼為 `UTF-8`。

##### 傳入 Buffer：

```JavaScript
// 傳入一個 Buffer
let buf1 = Buffer.from("hello", "utf8");

let buf2 = Buffer.from(buf1);

console.log(buf1); // <Buffer 68 65 6c 6c 6f>
console.log(buf2); // <Buffer 68 65 6c 6c 6f>
console.log(buf1 === buf2); // false
console.log(buf1[0] === buf2[0]); // true
buf1[1]=12;
console.log(buf1); // <Buffer 68 0c 6c 6c 6f>
console.log(buf2); // <Buffer 68 65 6c 6c 6f>
```

當傳入的參數為一個 `Buffer` 的時候，會創建一個新的 `Buffer` 並複製上面的每一個成員。

`Buffer` 為引用類型，一個 `Buffer` 複製了另一個 Buffer 的成員，當其中一個 Buffer 複製的成員有更改，另一個 Buffer 對應的成員不會跟著改變，說明傳入`buffer`創建新的`Buffer`的時候是一個深拷貝的過程。


## Buffer的記憶體分配機制
**buffer對應於 V8 堆記憶體之外的一塊原始記憶體**

`Buffer`是一個典型的`javascript`與`C++`結合的模塊，與性能有關的用C++來實現，`javascript` 負責銜接和提供介面。`Buffer`所占的記憶體不是`V8`堆記憶體，是獨立於`V8`堆記憶體之外的記憶體，通過`C++`層面實現記憶體申請（可以說真正的記憶體是`C++`層面提供的）、`javascript` 分配記憶體（可以說`JavaScript`層面只是使用它）。`Buffer`在分配記憶體最終是使用`ArrayBuffer`對象作為載體。簡單點而言， 就是`Buffer`模塊使用`v8::ArrayBuffer`分配一片記憶體，通過`TypedArray`中的`v8::Uint8Array`來去寫數據。


#### 記憶體分配的8K機制

- 分配小記憶體

說道Buffer的記憶體分配就不得不說`Buffer`的`8KB`的問題，對應`buffer.js`源碼裡面的處理如下：

```JavaScript
Buffer.poolSize = 8 * 1024;

function allocate(size)
{
    if(size <= 0 )
        return new FastBuffer();
    if(size < Buffer.poolSize >>> 1 )
        if(size > poolSize - poolOffset)
            createPool();
        var b = allocPool.slice(poolOffset,poolOffset + size);
        poolOffset += size;
        alignPool();
        return b
    } else {
        return createUnsafeBuffer(size);
    }
}
```
源碼直接看來就是以8KB作為界限，如果寫入的數據大於8KB一半的話直接則直接去分配記憶體，如果小於4KB的話則從當前分配池裡面判斷是否夠空間放下當前存儲的數據，如果不夠則重新去申請8KB的記憶體空間，把數據存儲到新申請的空間裡面，如果足夠寫入則直接寫入數據到記憶體空間裡面，下圖為其記憶體分配策略。

![Buffer記憶體分配策略圖](https://user-gold-cdn.xitu.io/2019/7/16/16bfa9c8e4af644f?w=664&h=446&f=png&s=29461)
看記憶體分配策略圖，如果當前存儲了2KB的數據，後面要存儲5KB大小數據的時候分配池判斷所需記憶體空間大於4KB，則會去重新申請記憶體空間來存儲5KB數據並且分配池的當前偏移指針也是指向新申請的記憶體空間，這時候就之前剩餘的6KB(8KB-2KB)記憶體空間就會被擱置。至於為什麼會用`8KB`作為`存儲單元`分配，為什麼大於`8KB`按照大記憶體分配策略，在下麵`Buffer`記憶體分配機制優點有說明。


- 分配大記憶體

還是看上面那張記憶體分配圖，如果需要超過`8KB`的`Buffer`對象，將會直接分配一個`SlowBuffer`對象作為基礎單元，這個基礎單元將會被這個大`Buffer`對象獨占。

```JavaScript
// Big buffer,just alloc one
this.parent = new SlowBuffer(this.length);
this.offset = 0;
```
這裡的`SlowBUffer`類實在`C++`中定義的，雖然引用buffer模塊可以訪問到它，但是不推薦直接操作它，而是用`Buffer`替代。這裡內部`parent`屬性指向的`SlowBuffer`對象來自`Node`自身`C++`中的定義，是`C++`層面的`Buffer`對象，所用記憶體不在`V8`的堆中

- 記憶體分配的限制

此外，`Buffer`單次的記憶體分配也有限制，而這個限制根據不同操作系統而不同，而這個限制可以看到`node_buffer.h`裡面

```C
    static const unsigned int kMaxLength =
    sizeof(int32_t) == sizeof(intptr_t) ? 0x3fffffff : 0x7fffffff;
```
對於32位的操作系統單次可最大分配的記憶體為1G，對於64位或者更高的為2G。

#### buffer記憶體分配機制優點
`Buffer`真正的記憶體實在`Node`的`C++`層面提供的，`JavaScript`層面只是使用它。當進行小而頻繁的`Buffer`操作時，採用的是`8KB`為一個單元的機制進行預先申請和事後分配，使得`Javascript`到操作系統之間不必有過多的記憶體申請方面的系統調用。對於大塊的`Buffer`而言(大於`8KB`)，則直接使用`C++`層面提供的記憶體，則無需細膩的分配操作。

## Buffer與stream
#### stream的流動為什麼要使用二進位Buffer
根據最初代碼的列印結果，`stream`中流動的數據就是`Buffer`類型，也就是`二進位`。

**原因一：**

`node`官方使用二進位作為數據流動肯定是考慮過很多，比如在上一篇  [想學Node.js，stream先有必要搞清楚](https://juejin.im/post/5d25ce36f265da1ba84ab97a)文章已經說過，stream主要的設計目的——是為了優化`IO操作`（`文件IO`和`網路IO`），對應後端無論是`文件IO`還是`網路IO`，其中包含的數據格式都是未知的，有可能是字元串，音頻，視頻，網路包等等，即使就是字元串，它的編碼格式也是未知的，可能`ASC編碼`，也可能`utf-8`編碼，對於這些未知的情況，還不如直接使用最通用的格式`二進位`.

**原因二：**

`Buffer`對於`http`請求也會帶來性能提升。

舉一個例子：

```JavaScript
const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer(function (req, res) {
    const fileName = path.resolve(__dirname, 'buffer-test.txt');
    fs.readFile(fileName, function (err, data) {
        res.end(data)   // 測試1 ：直接返回二進位數據
        // res.end(data.toString())  // 測試2 ：返回字元串數據
    });
});
server.listen(8000);
```

將代碼中的`buffer-test`文件大小增加到`50KB`左右，然後使用`ab`工具測試一下性能，你會發現無論是從`吞吐量`（Requests per second）還是連接時間上，返回二進位格式比返回字元串格式效率提高很多。為何字元串格式效率低？—— 因為網路請求的數據本來就是二進位格式傳輸，雖然代碼中寫的是 `response` 返回字元串，最終還得再轉換為二進位進行傳輸，多了一步操作，效率當然低了。
#### Buffer在stream數據流轉充當的角色

我們可以把整個`流(stream)`和`Buffer`的配合過程看作`公交站`。在一些公交站，`公交車`在沒有裝滿乘客前是不會發車的，或者在特定的時刻才會發車。當然，乘客也可能在不同的時間，人流量大小也會有所不同，有人多的時候，有人少的時候，`乘客`或`公交車站`都無法控制人流量。

不論何時，早到的乘客都必須等待，直到`公交車`接到指令可以發車。當乘客到站，發現`公交車`已經裝滿，或者已經開走，他就必須等待下一班車次。

總之，這裡總會有一個等待的地方，這個`等待的區域`就是`Node.js`中的`Buffer`，`Node.js`不能控制數據什麼時候傳輸過來，傳輸速度，就好像公交車站無法控制人流量一樣。他只能決定什麼時候發送數據(公交車發車)。如果時間還不到，那麼`Node.js`就會把數據放入`Buffer`等待區域中，一個在RAM中的地址，直到把他們發送出去進行處理。

**註意點：**

`Buffer`雖好也不要瞎用，`Buffer`與`String`兩者都可以存儲字元串類型的數據，但是，`String`與`Buffer`不同，在記憶體分配上面，`String`直接使用`v8堆存儲`，不用經過`c++`堆外分配記憶體，並且`Google`也對`String`進行優化，在實際的拼接測速對比中，`String`比`Buffer`快。但是`Buffer`的出現是為了處理二進位以及其他非`Unicode`編碼的數據，所以在處理`非utf8`數據的時候需要使用到`Buffer`來處理。

設置的效果圖如下: 在node導航下:

自定義佈局內容

網站的導航和側邊欄都已經配置好之後, 如果你覺得頁面不是很符合你的預期, 你也可以自定修改成你想要的效果。比如就像我的博客中左側固定的內容, 就是自定義的全局組件. 這裡使用vuepress提供的插件機制來實現

在.vuepress文件夾下創建components文件夾, 在components下再創建fixed.vue文件

<template>
  <div class="fixed_container">
    <div class="tencent_code">
      <h4>關註作者公眾號</h4>
      <p>和萬千小伙伴一起學習</p>
    </div>
    <div class="group_code">
      <h4>加入技術交流群</h4>
      <p>掃描二維碼 備註
        <span> 加群</span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'fixed'
}
</script>

然後在配置文件中以插件的形式配置即可:

// 插件
  plugins:[
    {
      name:"page-plugin",
      globalUIComponents:["fixed"], 
    }
  ]

globalUIComponents是用於註入全局的UI, 它以數組的形式接收參數名字, 這裡的名字必須與components文件夾下的.vue文件同名, 全局UI就是一個Vue組件; 其實vuepress也提供了一些內置的全局UI組件, 例如:back-to-top, popup, nprogress等.

配置插件

UI插件

配置內置的全局UI,首先需要插件:

yarn add -D @vuepress/plugin-back-to-top @vuepress/plugin-nprogress

在config.js中配置:

  plugins:[
   ["@vuepress/back-to-top"], // 返回頂部
   ["@vuepress/nprogress"],   // 載入進度條
  ]

支持PWA

vuepress還有一個我比較看重的優勢, 就是支持PWA, 當用戶沒有網的情況下,一樣能繼續的訪問我們的網站

首先需要安裝插件:

yarn add -D @vuepress/plugin-pwa

在config.js中配置:

module.exports = {
  plugins: ['@vuepress/pwa', {
    serviceWorker: true,
    updatePopup: true
  }]
}

為了讓網站完全地相容 PWA，你需要:

在 .vuepress/public 提供 Manifest 和 icons
在 .vuepress/config.js 添加正確的 head links

// 配置
module.exports = {
  head: [
    ['link', { rel: 'icon', href: `/favicon.ico` }],
    //增加manifest.json
    ['link', { rel: 'manifest', href: '/manifest.json' }],
  ],
}

manifest.json 文件

（路徑是docs/.vuepress/public/manifest.json）

{
  "name": "koala_blog",
  "short_name": "blog",
  "version": "1.0.0",
  "description": "程式員成長指北博主, koala的博客",
  "manifest_version": 2
}

配置評論

valine, 除了評論功能還可以統計閱讀量

valine 使用

點擊進入 Valine官網，需要先註冊才能使用.

然後創建應用, 獲取APP ID 和APP KEY

應用創建好以後，進入剛剛創建的應用，選擇左下角的設置 > 應用Key，然後就能看到你的APP ID 和APP Key了

安裝:

yarn add vuepress-plugin-comment -D

快速使用

在.vuepress下的config.js插件配置中:

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment',
      {
        choosen: 'valine', 
        // options選項中的所有參數，會傳給Valine的配置
        options: {
          el: '#valine-vuepress-comment',
          appId: 'Your own appId',
          appKey: 'Your own appKey'
        }
      }
    ]
  ]
}

gitTalk 使用

主題樣式修改

vuepress預設是主題顏色是綠色, 如果你不喜歡可以對其進行更改. 如果要對預設設置的樣式進行簡單顏色替換, 或者自定義一些顏色變數供以後使用, 可以在.vuepress/styles下創建palette.styl文件.

你可以調整的顏色變數:

// 顏色
$textColor ?= #2c3e50
$accentColor ?= #1e90ff
$grayTextColor ?= #666
$lightTextColor ?= #999
$borderColor ?= #eaecef
$codeBgColor ?= #282c34
$arrowBgColor ?= #ccc
$navbarColor ?= #fff
$headerColor ?= #fff
$headerTitleColor ?= #fff
$nprogressColor ?= $accentColor
// 佈局
bannerHeight ?= 12rem

// 響應式 breakpoints
MQNarrow ?= 1024px
MQMobileNarrow ?= 480px

如果要添加額外的樣式, vuepress也是提供了簡便方法的, 只要在.vuepress/styles文件下創建一個 index.styl, 在裡面寫css樣式即可, 註意文件命名是固定的.

改完以後是這個樣紙滴

部署

nginx部署

第一步: 確保你滿足下麵幾個條件

你有一臺伺服器
已經安裝好nginx, 如果不會的小伙伴請看如何安裝nginx （我通常都是用寶塔傻瓜式搞定）
解析了一個可用的功能變數名稱

第二步: 打包你的項目

運行npm run docs:build將項目打包, 預設打包文件在docs/.vuepress/dist目錄下

第三步: 配置nginx

我一般都是寶塔安裝lnmp環境

第四步: 上傳靜態資源文件

將靜態資源文件放置到伺服器上, 路徑為配置的/usr/web/inode/dist, 可以藉助xftp工具上傳也可以通過git克隆, 選擇適合自己的方式就可以

可以通過功能變數名稱來訪問你的網站啦！！！

github部署

將代碼部署到 Github Pages, 你可以看vuepress文檔: vuepress部署, 也參照我這裡寫的的步驟來部署

第一步: 首先確保你的項目滿足以下幾個條件:

文檔放置在docs目錄中
使用的是預設的構建輸出位置
vuepress以本地依賴的形式被安裝到你的項目中

第二步: 創建github倉庫

在github上創建一個名為blog的倉庫, 並將代碼提交到github上

第三步: 配置倉庫名稱

配置docs/.vuepress/config.js文件中的base, 如果打算發佈到https://<USERNAME>.github.io/<REPO>/(也就是說你的倉庫在: https://github.com/<USERNAME>/<REPO> ), 此處我的倉庫為: blog, 則將base按照如下配置即可:

module.exports = {
  base: "/blog/"
}

第四步: 在項目根目錄中,創建一個如下的腳本文件deploy.sh

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態文件
npm run docs:build

# 進入生成的文件夾
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果發佈到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages
# 例如 git push -f [email protected]:koala-coding/blog.git master:gh-pages 
cd -

第五步: 雙擊 deploy.sh 運行腳本

會自動在我們的 GitHub 倉庫中，創建一個名為 gh-pages 的分支，而我們要部署到 GitHub Pages 的正是這個分支

第六步: setting Github Pages 這是最後一步了，在 GitHub 項目點擊 Setting 按鈕，找到 GitHub Pages - Source，選擇 gh-pages 分支，點擊 Save 按鈕後，靜靜地等待它部署完成即可。

原文鏈接：https://juejin.im/post/5ee1770551882542ee694fa5#heading-10
作者：ikoala 本文只是我練手記錄而已==