流程

yarn安裝

yarn global add vuepress

npm安裝

npm install -g vuepress

創建一個文件夾

mkdir blog

初始化README.md

echo '# Hello VuePress!' > README.md

開發環境運行，.表示默認頁面路由地址

vuepress dev .

構建靜態文件

vuepress build .
echo PowerShell亂碼

echo '# Hello VuePress!' > README.md
執行這句之後，運行訪問出現亂碼，這是因為默認PowerShell選擇UTF-16編碼
執行下面這句將編碼指定為UTF-8
$PSDefaultParameterValues['Out-File:Encoding'] = 'utf8'

運行完出現的應該就是下面這樣子

添磚加瓦

這是基本的目錄結構，當我們使用 vuepress dev docs 所有的訪問路徑都是基於docs文件夾

.
├── docs
│ ├── .vuepress # 用於存放全局的配置、組件、靜態資源等
│ │ ├── config.js # 配置文件的入口文件，也可以是 YML 或 toml
│ │ └── public # 靜態資源目錄
│ └── README.md # 默認頁面
└── package.json

3 directories, 4 files
下面我們修改一下README.md主頁

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

就能看到下面的效果

然後再docs下新建文件夾或者新建md文件
然後訪問對應的路徑，就可以訪問到文件
比如以下目錄

.
├── README.md
├── docs
│ ├── .vuepress
│ │ ├── config.js
│ │ └── public
│ ├── 2020
│ │ └── b.md
│ ├── README.md
│ └── a.md
└── package.json

4 directories, 6 files

Reco主題

主題

如果你和我一樣不擅長前端開發的話
使用現成的主題也不失為一個好的方案
這裡選擇了Reco

安裝

全局安裝reco提供的cli工具，比較方便

npm install @vuepress-reco/theme-cli -g

項目初始化,跟著他的操作來就可以了

最後有一個style的選擇,我三個都試了,沒發現什麼區別

theme-cli init
theme-cli無法找到

沒有配置npm全局包的環境變量
npm config list查看prefix =後面的值
將其加入環境變量即可

進入你剛剛創建的文件夾

cd blog

安裝依賴

npm install

運行

開發環境

npm run dev

編譯

npm run build
運行起來之後就能看到跟我這個博客一樣的界面了

配置

主要是針對.vuepress/config.js的修改
官網和主題的文檔都非常詳細，建議參考官方文檔

採坑

熱加載

啟動之後一直無法熱加載，網上說的是md文件可以，config.js不行但我md文件也不行
最後在issue上找到了答案

vuepress dev . --host localhost
注意不能寫在package.json的script裡，無法生效
要直接運行vuepress dev . --host localhost

build

我還在想build之後我們是如何更新新的文章
結果發現其實需要我們手動去替換新生成的文件
這裡我們可以使用腳本來解決

upload.sh

先刪除本地文件

rm -rf blog

編譯

vuepress build .

編譯之後是public，我們重命名為想要的文件名

mv public blog

使用scp -r上傳

scp -r blog [email protected]:/usr/share/nginx/yps/html/
我用這種做法是因為我是將網站部署在自己的雲服務器
如果你是部署在github可以參考官方

插件

有很多好用的插件,比如評論、背景音樂

下面是我的配置文件

plugins: [

[
  'vuepress-plugin-comment',
  {
    choosen: 'valine', 
    // options選項中的所有參數，會傳給Valine的配置
    options: {
      el: '#valine-vuepress-comment',
      // 需要去註冊，很簡單
      appId: 'your app Id',
      appKey: 'your app Key'
    }
  }
],
[
  '@vuepress-reco/vuepress-plugin-bgm-player',
  {
    audios: [
      {
        name: '野孩子',
        // bgm目錄放在.vuepress/public下
        url: '/bgm/楊千嬅 - 野孩子.mp3',
        cover: '/bgm/1.jpg'
      }
    ]
  }
]

搭建VuePress— Ikarosxのblog