主頁 > 企業開發 > 使用vuepress快速搭建個人博客(完整配置與原始碼)

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

2020-09-18 01:40:59 企業開發

大家都說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 >
    <div >
      <h4>關注作者公眾號</h4>
      <p>和萬千小伙伴一起學習</p>
    </div>
    <div >
      <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 本文只是我練手記錄而已==

 

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/69818.html

標籤：JavaScript

上一篇：AntD框架的upload組件上傳圖片時使用customRequest方法自定義上傳行為

下一篇：如何實作vue3.0的回應式呢？本文實戰教你

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂