# 使用VuePress快速搭建部落格

最近我在3A平臺購買了伺服器，準備搭建一個部落格。

## VuePress介紹

**`VuePress`** 是Vuejs官方提供的一個是Vue驅動的靜態網站生成器，基於Markdown語法生成網頁。簡單的說它就是一個快速建設文件站點的工具，在簡單配置好功能後，需要做的事情就剩下寫好一個個 Markdown文件。

![image.png](https://f.pz.al/pzal/2022/09/14/d6a016ee404a9.png)

## VuePress官網

[https://www.vuepress.cn](https://link.segmentfault.com/?enc=7ajD6Gdxfyl7tk%2F0NICk4A%3D%3D.Nu%2BWSczhXO4M9Wj%2BiRj3fY8VQ2rNUN4lJZweVZlUVhw%3D)

## VuePress指南

[https://www.vuepress.cn/guide...](https://link.segmentfault.com/?enc=Bx1YeQC2wXmKYUejx9QghQ%3D%3D.WxqdhnlQP7mayGFqvctgj7YhKhkfsB1bfYw1Lr%2FwSMe1AFQY9%2FaCS%2F70l25yE6sbX9IZOpIABhovYnKr5TOBFw%3D%3D)

## VuePress安裝

安裝前請安裝 **`Node.js`**

**Node.js下載地址**

[http://www.nodejs.com.cn](https://link.segmentfault.com/?enc=zwhPzJG3QQPYX6VuQf%2Fg1Q%3D%3D.KaOF46E6AXYdeZJ%2F5cIa2JAtKWNZGltuZyMd2YEjBUc%3D)

你可以在一個硬碟建立一個目錄，例如我再D盤的根目錄下建立一個VuePress目錄，然後雙擊進入這個目錄，在這個目錄的路徑欄（將 **`D:\VuePress`** 替換為 **`cmd`** 然後按回車）輸入CMD啟動cmd來執行命令。

![image.png](https://f.pz.al/pzal/2022/09/14/2bd5f2ac8e27f.png)

就會在這個目錄下啟動cmd命令列工具。

![image.png](https://f.pz.al/pzal/2022/09/14/6dbec99c8b247.png)

**VuePress安裝命令**

```cmake
npm install -D vuepress
```

國內請使用 **`cnpm`** 安裝會更快，可執行以下命令安裝 **`cnpm`**

```awk
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

再執行以下命令安裝 **`VuePress`**

```cmake
cnpm install -D vuepress
```

![image.png](https://f.pz.al/pzal/2022/09/14/80a474504f6ba.png)

直接貼上命令按回車就可以開始安裝，只要命令還在跑，都還沒完成安裝，需要耐心等待。

> > 以上寫得如此詳細，就是為了照顧新手，大神請不要嫌棄。如果新手連以上的操作都不懂，建議還是要現學習一下Vue專案的建立、配置、執行、打包等基礎知識。

## 建立VuePress文件

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

## 配置VuePress

在你的VuePress專案目錄下的 **`package.json`** 檔案新增以下程式碼。

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

## 啟動VuePress專案

```routeros
npm run docs:dev
```

![image.png](https://f.pz.al/pzal/2022/09/14/56128b7d2fcf1.png)

啟動後，將會在你的本地開啟一個http服務

![image.png](D:\img\bVc2h2n-1663145374461-6)

然後就可以透過 **`Markdown`** 語法來編寫你的文件、部落格、文章等內容了！

![image.png](https://f.pz.al/pzal/2022/09/14/128a2c382f674.png)

## VuePress進一步配置

如果想要進一步完善你的 **`VuePress`** 文件，甚至是讓 **`VuePress`** 像部落格一樣去使用，那麼你可以根據 **`VuePress`** 官網提供的指南去進一步配置 **`VuePress`** 的導航欄、搜尋、logo、側邊欄、程式碼高亮等，這樣可以讓你很快地學會使用 **`VuePress`** 來編寫你的文章。

使用VuePress快速搭建部落格

相關文章