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

時間 2020-06-21

標籤使用 vuepress 快速搭建我的博客完整配置源碼简体版

原文原文鏈接

你們都說yarn比npm好，今天全局安裝yarn嘗試下javascript

cnpm install -g yarn

安裝完成後，查看yarn版本css

yarn --version

項目搭建

安裝vuepress

yarn global add vuepress

初始化項目

建立項目目錄bloghtml

mkdir blog
cd blog

初始化前端

yarn init -y

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

{
  "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相關的配置java

mkdir docs

接着在docs文件夾中建立.vuepress文件夾node

cd docs
mkdir .vuepress

頁面具體內容配置

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

cd .vuepress
touch config.js

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

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文件, 再運行,就能夠看到運行起來的效果nginx

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 git@github.com:<USERNAME>/<REPO>.git master:gh-pages
# 例如 git push -f git@github.com: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

本文只是我練手記錄而已==