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


大家都說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 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 按鈕后,靜靜地等待它部署完成即可。

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM